TextView Width Exceeds LinearLayout Width

Question

I have a weird problem with my layout:

<?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="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="15dp">
    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#ff3333"
        android:layout_weight="0.2"
        />
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="0.8">
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#ff134415"
            android:layout_weight="1"
            />
        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="5dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ff8833"
            android:paddingRight="10dp"
            android:paddingLeft="15dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:text="this is a longgggggggggggggggggggggggg text"
            />
    </LinearLayout>
</LinearLayout>

When the textview's text is long, a portion of it exceeds linearlayout width. Where did i do wrong?

Answer 1

The problem is caused by the fact that in your 80% layout not all children specify a weight AND some of the ones that don't do it - they have a preferred size that makes the sum of all children being bigger than what the parent can offer.

The way the layout_weight functions in this case is: let everybody take how much space they need and I will take the rest, to the max allowed by my parent. The problem is that in this case there's no rest (or is negative if I may say so :-) ). I don't understand in detail the layout algorithm, but I think the layout with weight != 0 is going to push all the layouts after it - hence the larger TextView in your sample is going off screen.

To validate my assumption I built an even simpler layout, with just 2 TextViews: first one with width=0 and weight=1 and short text; a second one with width=wrap and longer text - basically the first and last of the views from the 80% layout from your sample. Take a look to see that the same thing happens. And it stops as soon as you put a weight on the second one, because now the layout algorithm functions based on weights for all the children:

<?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="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="15dp">
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="#008833"
        android:paddingRight="10dp"
        android:paddingLeft="15dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:text="short text"/>
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="#ff8833"
        android:paddingRight="10dp"
        android:paddingLeft="15dp"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:text="this is an even longgggggggggggggggggggggggggggggeeerrrr text" />
</LinearLayout>

I guess the lesson learned in this case is: don't use weight only on some of the child views unless it is absolutely guaranteed that the required space to layout them is smaller then the size of the parent.

It seemed a simple layout issue at the beginning, but boy, did I learn from it... I can only hope I got it right :-)

Answer 2

Add another LinearLayout responsible for fill remaining for the text view and then the original LinearLayout is responsible for fill remaining for the green view.

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="15dp">
    <View
        android:layout_width="0dp"
        android:layout_height="match_parent"
        android:background="#ff3333"
        android:layout_weight="0.2"
        />
    <LinearLayout
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="0.8">
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#ff134415"
            android:layout_weight="1"
            />
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="horizontal">
            <View
                android:layout_width="2dp"
                android:layout_height="match_parent"
                android:background="#ff8833"
                android:layout_marginRight="2dp"
                />
            <View
                android:layout_width="3dp"
                android:layout_height="match_parent"
                android:background="#ff8833"
                android:layout_marginRight="2dp"
                />
            <View
                android:layout_width="5dp"
                android:layout_height="match_parent"
                android:background="#ff8833"
                android:layout_marginRight="2dp"
                />
            <View
                android:layout_width="10dp"
                android:layout_height="match_parent"
                android:background="#ff8833"
                android:layout_marginRight="2dp"
                />
            <TextView
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="1"
                android:background="#ff8833"
                android:paddingRight="10dp"
                android:paddingLeft="15dp"
                android:paddingTop="5dp"
                android:paddingBottom="5dp"
                android:text="this is a longgggggggggggggggggggggggg text"
                />
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Answer 3

Give weight for textview so that the width of the text view will be same.

And also give following two attributes:

    android:singleLine="true"
    android:ellipsize="end"


   <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:background="#ff8833"
        android:layout_weight="1"
        android:paddingRight="10dp"
        android:paddingLeft="15dp"
        android:singleLine="true"
        android:ellipsize="end"
        android:paddingTop="5dp"
        android:paddingBottom="5dp"
        android:text="this is a longgggggggggggggggggggggggg text"
        />

Answer 4

You have to remove you width 0dp from linearlayout and view. Use the weight parameter, like 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="wrap_content"
    android:orientation="horizontal"
    android:layout_marginTop="15dp">
    <View
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:background="#ff3333"
        android:layout_weight="1"
        />
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_weight="1">
        <View
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:background="#ff134415"
            android:layout_weight="1"
            />
        <View
            android:layout_width="2dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="3dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="5dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />
        <View
            android:layout_width="10dp"
            android:layout_height="match_parent"
            android:background="#ff8833"
            android:layout_marginRight="2dp"
            />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="#ff8833"
            android:paddingRight="40dp"
            android:paddingLeft="15dp"
            android:paddingTop="5dp"
            android:paddingBottom="5dp"
            android:text="this is a longgggggggggggggggggggggggg text"
            />
    </LinearLayout>
</LinearLayout>

You can add much padding right to your textview ad example (30-40dp) to not let out the text.