Clever Geek Handbook

TextView width is greater than LinearLayout Width

I have a strange 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 text of the text is long, part of it exceeds the linear width. Where did I go wrong?

enter image description here

+3


source to share


4 answers


Add another one LinearLayout

in charge of padding left over for text view and then the original LinearLayout

is in charge of padding left over for 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>
+2


source


The problem stems from the fact that in your 80% layout, not all children indicate weights AND some of those that don't - they have a preferred size, which is the sum of all children more than a parent can suggest.

The layout_weight way in this case: let each take up as much space as they need and I'll take the rest, up to the maximum allowed by my parent. The problem is that in this case there is no rest (or negative, if I may say so :-)). I don't understand in detail the layout algorithm, but I think a layout with a weight! = 0 is going to pop all layouts after it - hence, more TextView

in your example is disabled.

To test my assumption, I built an even simpler format, only 2 TextViews: the first one with width = 0 and weight = 1 and short text; second with width = wrapper and longer text - basically the first and last views from 80% of the layout from your sample. See the same thing happen. And it stops as soon as you put the weight on the second, because now the layout algorithm works based on weights for all 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 think the lesson learned in this case: do not use weight for only some child views, unless it is absolutely guaranteed that the required space to accommodate them is less than the parent's size.

It seemed like a simple layout at first, but boy, I learned from this ... I can only hope that everything is correct :-)

+2


source


Give weight to the text view so that the width of the text view is the same.

And also give the 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"
        />
0


source


You need to remove 0dp width from linearlayout and view. Use a weight parameter, for example:

    <?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 many extras directly to your example in text form (30-40dp) to keep the text from escaping.

-1


source






More articles:


All Articles