Element with wrap_content width takes full width of parent

Question

I have the following layout XML. Not sure why the third TextView is not visible in the layout at all. Can someone point out why?

Relevant part of layout XML -

<LinearLayout
    android:id="@+id/layout1"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_toLeftOf="@+id/layout0"
    android:layout_toStartOf="@+id/layout0"
    android:layout_toRightOf="@+id/imageMain1"
    android:layout_toEndOf="@+id/imageMain1"
    android:gravity="center_vertical"
    android:orientation="vertical"
    android:paddingBottom="6dp"
    android:paddingTop="6dp">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:paddingBottom="2dp"
        android:text="@string/dummy_long"
        android:textColor="?android:textColorPrimary"
        android:textSize="16sp"/>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginRight="8dp"
            android:layout_marginEnd="8dp"
            android:maxLines="1"
            android:text="@string/dummy_paragraph"
            android:textColor="?android:attr/textColorTertiary"
            android:textSize="14sp"/>

        <TextView
            android:id="@+id/textView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:text="@string/dummy"
            android:textColor="?android:attr/textColorTertiary"
            android:textSize="14sp"/>

    </LinearLayout>

</LinearLayout>

Update

Ended up using this solution finally - Finally ended up using this - https://stackoverflow.com/a/17657154/1086930

score 1 · Answer 1 · answered Sep 29 '15 at 16:48

1

Add WeightSum="2" to your LinearLayout and layout_weight="1" for each TextView as in

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:layout_marginRight="8dp"
            android:layout_marginEnd="8dp"
            android:maxLines="1"
            android:text="@string/dummy_paragraph"
            android:textColor="?android:attr/textColorTertiary"
            android:textSize="14sp"/>

        <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:text="@string/dummy"
            android:textColor="?android:attr/textColorTertiary"
            android:textSize="14sp"/>

    </LinearLayout>

answered Sep 29 '15 at 16:48

Rajan Kali

12,627
3
25
37

I don't want an equal distribution. I want the first textview to take as much width needed and I want to give the rest to the second textview. – jaibatrik Sep 29 '15 at 16:52
@jaibatrik if your first TextView take all the layout width, there is no rest to give to the third text, it will be invisible in screen. – Rami Sep 29 '15 at 16:56
I believe that is the case here, because I see that it pushes the other `TextView` out of its parent `LinearLayout`. How do you suggest I can go about this? – jaibatrik Sep 29 '15 at 16:59
Should I use a `RelativeLayout` then? – jaibatrik Sep 29 '15 at 17:03
I went with RelativeLayout and toLeftOf attribute. Upvoted this and accepted the other answer. Thanks for the help! – jaibatrik Sep 29 '15 at 17:47

score 1 · Accepted Answer · answered Sep 29 '15 at 17:15

You can use layout_weight as mentioned in @rajan answer, but with inequal distribution. eg:

<LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:weightSum="1">

        <TextView
            android:id="@+id/textView2"
            android:layout_width="0dp"
            android:layout_weight="0.7"
            android:layout_height="wrap_content"
            android:layout_marginRight="8dp"
            android:layout_marginEnd="8dp"
            android:maxLines="1"
            android:text="@string/dummy_paragraph"
            android:textColor="?android:attr/textColorTertiary"
            android:textSize="14sp"/>

        <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_weight="0.3"
            android:layout_height="wrap_content"
            android:maxLines="1"
            android:text="@string/dummy"
            android:textColor="?android:attr/textColorTertiary"
            android:textSize="14sp"/>

 </LinearLayout>

Or use RelativeLayout as parent and play with alignements. eg:

<RelativeLayout 
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginRight="8dp"
        android:layout_marginEnd="8dp"
        android:maxLines="1"
        android:text="@string/dummy_paragraph"
        android:textColor="?android:attr/textColorTertiary"
        android:textSize="14sp"
        android:layout_toLeftOf="@+id/textView3"
        android:layout_alignParentLeft="true" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:maxLines="1"
        android:text="@string/dummy"
        android:textColor="?android:attr/textColorTertiary"
        android:textSize="14sp"
        android:layout_alignParentRight="true" />

</RelativeLayout>

Element with wrap_content width takes full width of parent

2 Answers2