I need to use a ValueAnimator to make a custom "drop field" appear when the user drags a certain view. (I want to change the field from gone, height = 0 to visible, height = wrap_content).
I've tried the solution of this question: How to animate to wrap_content?
The answer there worked when I used it on a single TextView, but when I tried to apply it to a LinearLayout with multiple text views it animated to a too large height value, then, when the animation finished, snapped back to the correct one. The layout:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:visibility="gone"
android:orientation="horizontal">
<TextView
android:layout_width="0dp"
android:layout_weight="5"
android:layout_height="match_parent"
android:paddingVertical="8dp"
android:gravity="center"
android:textSize="18sp"/>
<TextView
android:layout_width="0dp"
android:layout_weight="2"
android:layout_height="match_parent"
android:paddingVertical="8dp"
android:gravity="center"
android:textSize="18sp"/>
</LinearLayout>
Using animateLayoutChanges didn't work for me either, and I want to use a custom animator anyway.
I'm using C# in Xamarin, but answering with Android Studio Java code is acceptable too, I'll translate it to C#.
This should be caused by measuring the children views during Measure, so you can change your xaml like this ,change your children views's width to wrap_content:
<LinearLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:visibility="gone"
android:orientation="horizontal">
<TextView
android:layout_width="wrap_content"
android:layout_weight="5"
android:layout_height="match_parent"
android:paddingVertical="8dp"
android:gravity="center"
android:textSize="18sp"/>
<TextView
android:layout_width="wrap_content"
android:layout_weight="2"
android:layout_height="match_parent"
android:paddingVertical="8dp"
android:gravity="center"
android:textSize="18sp"/>
</LinearLayout>
Related
I got such issue with my RecyclerView
I need to present to user images that I downloaded with help of picasso lib from web to my RecyclerView. Eventually it looks like this
As you can see I need to scratch my images, but in proper aspect ratio of course.
I went to my XML file and set attribute in my ImageView android:scaleType="fitXY"
now my ImageView looks like this
<ImageView
android:id="#+id/imageViewMainCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
/>
and here is result that I got
as you can see now image fill all available space, but them doesn't scratch with propriety aspect ratio. Images scratch width more than height and does't looks nice...
Also here is my XML file
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:paddingBottom="3dp"
android:paddingEnd="3dp"
android:paddingStart="3dp"
android:paddingTop="3dp"
>
<LinearLayout
android:id="#+id/cardMainActivityLinearLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
>
<com.balysv.materialripple.MaterialRippleLayout
android:id="#+id/rippleInbox"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:mrl_rippleColor="#color/ntz_background_light_grey"
app:mrl_rippleOverlay="true"
>
<ImageView
android:id="#+id/imageViewMainCard"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:scaleType="fitXY"
/>
</com.balysv.materialripple.MaterialRippleLayout>
<RelativeLayout
android:id="#+id/rlCardMain"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#color/white"
android:padding="4dp"
>
<TextView
android:id="#+id/tvBrandName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_alignParentTop="true"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvItemName"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvBrandName"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvPreviousPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_below="#+id/tvItemName"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<TextView
android:id="#+id/tvDivider"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvPreviousPrice"
android:layout_toEndOf="#+id/tvPreviousPrice"
android:text=" / "
android:textSize="10dp"
android:visibility="gone"
/>
<TextView
android:id="#+id/tvPrice"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignTop="#+id/tvDivider"
android:layout_toEndOf="#+id/tvDivider"
android:textColor="#color/black_color"
android:textSize="10dp"
/>
<Button
android:id="#+id/bAction"
android:layout_width="70dp"
android:layout_height="30dp"
android:layout_alignParentEnd="true"
android:layout_alignParentTop="true"
android:textSize="8dp"
/>
</RelativeLayout>
</LinearLayout>
</LinearLayout>
What am I doing wrong?
Edit1
There is a result of android:scaleType="centerCrop" attributes
It is also not so nice when women don't have head))
Edit2
There is result of android:scaleType="centerInside"
To answer your question, please use centerCrop to center the image absolute to it's parent. Also add this attribute, android:adjustViewBounds="true". With this the aspect ratio of the image will be preserved.
fitXY uses FILL which is described as "Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src" in the Android Documentation.
You should use centerInside to center, fit and scale while keeping the aspect ratio
Alright the problem is that your layout does not respect the bounds of your image.To remedy this, wrap the image-view in a separate parent layout , add a parent weight to the layout it self with layout_weight="1".Then set the width relative to the layout with android:layout_width="0px", to avoid tearing and proper bounds coordination set android:adjustViewBounds="true". To center and crop the image at it's center use android:scaleType="centerCrop".
I have a task - make an activity like this Here photo takes one half of screen and text takes another. And everything works fine with weights, but sometimes text can take a lot of space and don't fit in screen, so I covered all my layout with ScrollView, but here comes problem. If everything doesn't fit into one screen everything should look that way - photo will take one half of visible screen and second half will contain some part of text that can fit there, and when I scroll, everything should be scrolled and new text will appear at the bottom. But I don't understand how to realize that, weights here work in some weird way and as I understood tag fillViewPort="true" makes something only if there is nothing to scroll, and when there is something this tag makes nothing. So how can I make my view look in proper way?
Here is my XML
<?xml version="1.0" encoding="utf-8"?>
<ScrollView xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fillViewport="true">
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
tools:context="leopikinc.musiciansyandex.MusicianInfo"
android:orientation="vertical">
<LinearLayout
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="#+id/big_photo"
android:src="#drawable/test"
android:layout_gravity="center" />
</LinearLayout>
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Genres"
android:id="#+id/genres"
android:layout_alignParentTop="true"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Album count"
android:id="#+id/album_count"
android:layout_below="#+id/genres"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Track count"
android:id="#+id/track_count"
android:layout_above="#+id/biography_string"
android:layout_toRightOf="#+id/album_count"
android:layout_toEndOf="#+id/album_count" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceLarge"
android:text="#string/biography_string_text"
android:id="#+id/biography_string"
android:layout_below="#+id/album_count"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:textAppearance="?android:attr/textAppearanceMedium"
android:text="Biography Text"
android:id="#+id/biography_text"
android:layout_below="#+id/biography_string"
android:layout_alignParentLeft="true"
android:layout_alignParentStart="true" />
</RelativeLayout>
</LinearLayout>
</ScrollView>
I achived my aim making it programmaticaly. In activity I got access to ImageView and set it's height = half of visible screen.
ViewGroup.LayoutParams lp = bigphoto.getLayoutParams();
lp.height = getResources().getDisplayMetrics().heightPixels/2;
bigphoto.setLayoutParams(lp);
But still I don't know how to make this using XML
I am trying to add two different textviews with different heights like so:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginBottom="#dimen/single_margin"
android:layout_marginLeft="#dimen/double_margin"
android:layout_marginRight="#dimen/double_margin"
android:layout_marginTop="#dimen/single_margin"
android:baselineAligned="false"
android:gravity="center"
android:orientation="horizontal">
<TextView
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_marginRight="28dp"
android:layout_weight="3"
android:fontFamily="sans-serif-light"
android:gravity="center_vertical"
android:singleLine="false"
android:text="This is example text view that will mess up the height!"
android:textColor="#color/dark_blue"
android:textSize="#dimen/ad_title_text" />
<TextView
android:id="#+id/newsfeed_ad_info_button"
android:layout_width="0px"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:layout_weight="2"
android:background="#drawable/selector_rounded_box_light_blue"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:paddingBottom="#dimen/single_margin"
android:paddingLeft="#dimen/double_margin"
android:paddingRight="#dimen/double_margin"
android:paddingTop="#dimen/single_margin"
android:text="Learn More"
android:textColor="#color/dark_blue"
android:textSize="#dimen/body_text" /> </LinearLayout>
And the result is this:
(Don't mind the drop shadow above. I cropped the image and the shadow is from the actionbar)
The height of the linear layout is determined by the smaller textview instead of the bigger one. Why? And how do I go about fixing it? Thanks in advance
Make textview's height wrap_content it will solve the issue
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="wrap_content"
try this,
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_marginBottom="#dimen/single_margin"
android:layout_marginLeft="#dimen/double_margin"
android:layout_marginRight="#dimen/double_margin"
android:layout_marginTop="#dimen/single_margin"
android:baselineAligned="false"
android:gravity="center"
android:orientation="horizontal" >
<TextView
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_marginRight="28dp"
android:layout_weight="3"
android:fontFamily="sans-serif-light"
android:gravity="center_vertical"
android:singleLine="false"
android:text="This is example text view that will mess up the height!"
android:textColor="#color/dark_blue"
android:textSize="#dimen/ad_title_text" />
<TextView
android:id="#+id/newsfeed_ad_info_button"
android:layout_width="0px"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="2"
android:background="#drawable/selector_rounded_box_light_blue"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:paddingBottom="#dimen/single_margin"
android:paddingLeft="#dimen/double_margin"
android:paddingRight="#dimen/double_margin"
android:paddingTop="#dimen/single_margin"
android:text="Learn More"
android:textColor="#color/dark_blue"
android:textSize="#dimen/body_text" />
</LinearLayout>
If this does not solve your problem then give your dimen.xml file.
Hope this will be helpful...thanks
You want to make the left textview (with ID newsfeed_ad_title) not cut right? Change the android:layout_height to "wrap_content"
Try to set match_parent newsfeed_ad_info_button TextView :
<TextView
android:id="#+id/newsfeed_ad_info_button"
android:layout_width="0dp"
android:layout_height="match_parent"
android:layout_gravity="center"
android:layout_weight="2"
android:background="#drawable/selector_rounded_box_light_blue"
android:fontFamily="sans-serif-light"
android:gravity="center"
android:paddingBottom="#dimen/single_margin"
android:paddingLeft="#dimen/double_margin"
android:paddingRight="#dimen/double_margin"
android:paddingTop="#dimen/single_margin"
android:text="Learn More"
android:textColor="#color/dark_blue"
android:textSize="#dimen/body_text" />
Note : Also use dp instead px :
http://developer.android.com/guide/practices/screens_support.html
The problem is that the first TextView (the one with ID newsfeed_ad_title) has an height of match_parent. This means that first the LinearLayout will compute its preferred height, and then the TextView will occupy exactly that height.
Giving a wrap_content to the first TextView will solve the issue, because this way the LinearLayout will first ask both children to compute their desired height,and then set his own accordingly.
<TextView
android:id="#+id/newsfeed_ad_title"
android:layout_width="0px"
android:layout_height="wrap_content"
... //the rest is unmodified
My understanding was that the wrap_content take as much space as needed by its contents. But doesn’t this apply to TextViews as well?
In the following layout why when I change the font of TextView with id real_status to 24 the text is partially hidden? I was expecting that due to the wrap content the enclosing TextView it would wrap around the 24 sp and display the text fine. It is fine with 18sp.
Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="match_parent">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="0dp"
android:layout_weight="1"
>
<TextView
android:id="#+id/real_status"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignParentRight="true"
android:layout_alignTop="#+id/full_display_name"
android:gravity="center_vertical"
android:textSize="24sp"
android:textStyle="bold"
tools:text="Active"
/>
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentLeft="true"
android:layout_alignParentTop="true"
android:layout_toLeftOf="#id/real_status"
android:gravity="center_vertical"
android:text="The real user status:"
android:textSize="16sp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/full_display_name"
android:gravity="right"
>
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:visibility="gone"
tools:text="Just a text view"
tools:visibility="visible" />
</LinearLayout>
</RelativeLayout>
</LinearLayout>
With 18sp:
With 24sp:
UPDATE:
Following the answers I removed the layout top/bottom and the font adjusted but now I see that the TextView overlaps with the next widget. Adding red background is more visible.
I thought that by “growning” the TextView the rest would move down and not overlap
whenever You suffering from this type of problem You can LiniarLayout is best if You understand it very well. because of wrap_content and match_parent is simple to handle in LiniarLayout.
lets understand it.(For Your case)..
1.take two LiniarLayout(parent have verticle orientation..)
i give Id LL1(horizontal) and id LL2 for your case
2.in first layout two textview #+id/full_display_name and #+id/real_status
in real_status have match_parent in width so it easy to divide parent(fill_parent) and set its android:gravity="right"
3.LiniarLayout as it is without relate
See belove XML code...
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:orientation="vertical" >
<LinearLayout
android:id="#+id/LL1"
android:layout_width="fill_parent"
android:layout_height="wrap_content"
android:orientation="horizontal" >
<TextView
android:id="#+id/full_display_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="The real user status:"
android:textSize="16sp" />
<TextView
android:id="#+id/real_status"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="right"
android:text="Active"
android:textSize="26sp" />
</LinearLayout>
<LinearLayout
android:id="#+id/LL2"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_below="#+id/real_status"
android:gravity="right" >
<TextView
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:gravity="center_vertical"
android:text="Just a text view" />
</LinearLayout>
</LinearLayout>
It will help you Your GUI give bestView in All devices with any size of text
Hope it help You
Remove these two line will fix your problem
android:layout_alignBottom="#+id/full_display_name"
android:layout_alignTop="#+id/full_display_name"
Yes the wrap_content will take as much space needed by the view. It will also applied to the TextView also. The problem here is you written android:layout_alignBottom="#+id/full_display_name" to real_status text view. This attribute is overriding the wrap_content So remove allignBottom attribute from the text view.
UPDATE
For your bottom linear layout update the line
android:layout_below="#+id/full_display_name"
with
android:layout_below="#+id/real_status"
I develop a photo album app. I would like to place photos on screen like the following layout :
For this purpose, I decided to place a vertical linear layout at outside of all. Then place RelativeLayouts for each row. In each RelativeLayouts in a row, I put two relative layouts to contain the ImageViews. In each RelativeLayout I size them with proper "dp" as I draw at the image above.
My question is, can it be the same view in different phones with different resolutions ? If so, what would be the proper approach to have the view that I show above ?
Thanks
Use linear layout completely and make sure you know what layout_weight does.
refer the following
http://developer.android.com/guide/topics/ui/declaring-layout.html#CommonLayouts
http://developer.android.com/guide/topics/ui/layout/linear.html#Weight
Try this...its only for 1 row, but you get the idea..this is inside vertical linear layout..
<LinearLayout
android:orientation="horizontal"
android:layout_width="match_parent"
android:layout_height="wrap_content" >
<ImageView
android:id="#+id/imageView1"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:layout_height="wrap_content" />
<LinearLayout
android:layout_width="0dp"
android:layout_weight="1"
android:layout_height="match_parent"
android:orientation="vertical"
>
<ImageView
android:id="#+id/imageView2"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:src="#drawable/ic_launcher"
android:layout_weight="1"
android:layout_gravity="center_horizontal"/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="1dp"
android:layout_weight="1" >
<ImageView
android:id="#+id/imageView3"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:layout_height="wrap_content" />
<ImageView
android:id="#+id/imageView4"
android:layout_width="0dp"
android:layout_weight="1"
android:src="#drawable/ic_launcher"
android:layout_height="wrap_content" />
</LinearLayout>
</LinearLayout>
</LinearLayout>