LinearLayout clipping children with TextView width set to wrap_content

Question

I have a LinearLayout which contains a TextView and an ImageView. The TextView width is set to wrap_content , but the issue is when the width reaches the parent width. The text content will correctly wrap to 2 or more lines, but the TextView and ImageView will be clipped on the left and right sides. The most similar question I could find was this one , which is from 2013 and has no solution.

Specifically, I'm experiencing the issue on this view , but I've created the following simpler view to exemplify the problem:

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_top_holder"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/card_top_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="One Two Three Four Five"
        android:textSize="40sp"/>

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_volume_up_black_48dp"/>
</LinearLayout>

Here is the problem: Here is the layout normally:

When the layout overlaps another view, setting android:clipChildren="false" on the LinearLayout doesn't even prevent the clipping.

And here is one final image to prove it's happening on a real device and not just the layout viewer:

I'm basically out of ideas. Any thoughts? Is this an issue with the Android layout system? Thanks for the help and consideration!

Answer 1

You can achieve the desired result using android:layout_weight

<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/card_top_holder"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/card_top_text"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:text="One Two Three Four Five"
        android:textSize="40sp"/>

    <ImageView
        android:layout_width="24dp"
        android:layout_height="24dp"
        android:src="@drawable/ic_volume_up_black_48dp"/>
</LinearLayout>

Edit: A little quote from the docs about how layout_weight works

LinearLayout also supports assigning a weight to individual children with the android:layout_weight attribute. This attribute assigns an "importance" value to a view in terms of how much space it should occupy on the screen. A larger weight value allows it to expand to fill any remaining space in the parent view. Child views can specify a weight value, and then any remaining space in the view group is assigned to children in the proportion of their declared weight. Default weight is zero.

For example, if there are three text fields and two of them declare a weight of 1, while the other is given no weight, the third text field without weight will not grow and will only occupy the area required by its content. The other two will expand equally to fill the space remaining after all three fields are measured. If the third field is then given a weight of 2 (instead of 0), then it is now declared more important than both the others, so it gets half the total remaining space, while the first two share the rest equally.