Textview inside nested linear layout is cut?

Question

Currently I'm creating a layout for my Chat listView. The layout consist of a TextView which act as the chat bubble, and beside it there's a TextView for timeStamp. The problem with my layout is when my text is super long the first TextView will cut the space that should be used by the second TextView. So the second TextView is disappearing.

Here is my xml :

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="left"
    android:paddingLeft="10dp"
    android:paddingRight="40dp"
    android:paddingBottom="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:text="sssssssssssssssssssyssssssssssssss"
            android:padding="10dp"
            android:background="@color/grey"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/chat_bubble" />
        <TextView
            android:text="read"
            android:textSize="8sp"
            android:layout_marginLeft="5dp"
            android:layout_gravity="left|bottom"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:id="@+id/time_label" />
    </LinearLayout>

</LinearLayout>

please check this library : https://github.com/DeromirNeves/whatsapp-android — Sangram Haladkar, Mar 15 '17 at 05:18

score 1 · Accepted Answer · answered Mar 15 '17 at 12:17

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="wrap_content"
    android:gravity="left"
    android:maxWidth="match_parent"
    android:orientation="vertical"
    android:paddingBottom="10dp"
    android:paddingLeft="10dp"
    android:paddingRight="40dp">

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

        <TextView
            android:id="@+id/chat_bubble"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:padding="10dp"
            android:text="Message Long Text"
            android:textSize="15sp" />

        <TextView
           android:id="@+id/time_label"
           android:layout_width="wrap_content"
           android:layout_height="wrap_content"
           android:layout_gravity="left|bottom"
           android:layout_marginLeft="5dp"
           android:text="read"
           android:textSize="8sp" />
    </LinearLayout>

</LinearLayout>

Of all answers, this is the one that works. All of other answer seems to have the same approach by setting the layout_weight to 1, but this one also set the inner LinearLayout width to wrap_content. Thankssss :) — VincentTheonardo, Mar 16 '17 at 02:44

score 0 · Answer 2 · answered Mar 15 '17 at 03:00

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="10dp"
android:paddingRight="40dp"
android:paddingBottom="10dp">
<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:text="sssssssssssssssssssyssssssssssssss"
        android:padding="10dp"
        android:background="@color/grey"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:id="@+id/chat_bubble" />
    <TextView
        android:text="read"
        android:textSize="8sp"
        android:layout_marginLeft="5dp"
        android:layout_gravity="center_vertical"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/time_label" />
</LinearLayout>

Replace your code with this code.

actually I want the textview to wrap my content, but with layout_weight=1 the chat bubble will be too big for some small text — VincentTheonardo, Mar 15 '17 at 03:27
VincentTheonardo you can also give ellipsize="end" and singleline="true" to textview so that when the text is too long it will make three dots in end and not overlap with another textview.Please check at your end and let me know if still face issue. — Ekta Dushanj, Mar 15 '17 at 04:27
@Ekta singleline="true" is not convenient to be used for a chat app — VincentTheonardo, Mar 15 '17 at 04:51
@Vincent then you can give fix with to both the textview but then if text is too long it will start scrolling also you can try this one also — Ekta Dushanj, Mar 15 '17 at 04:57

score 0 · Answer 3 · answered Mar 15 '17 at 04:54

Please try following xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="left"
    android:paddingLeft="10dp"
    android:paddingRight="40dp"
    android:paddingBottom="10dp">

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">
        <TextView
            android:text="sssssssssssssssssssyssssssssssssssssss"
            android:padding="10dp"
            android:background="@color/colorAccent"
            android:textColor="@color/colorPrimary"
            android:textSize="15sp"
            android:layout_width="0dp"
            android:layout_weight="0.90"
            android:layout_height="wrap_content"
            android:id="@+id/chat_bubble" />
        <TextView
            android:text="read"
            android:textSize="8sp"
            android:layout_marginLeft="5dp"
            android:layout_gravity="left|bottom"
            android:layout_width="0dp"
            android:layout_weight="0.10"
            android:layout_height="wrap_content"
            android:id="@+id/time_label" />
    </LinearLayout>

</LinearLayout>

nope, it's not working. Just like the other answer, the layout_weight makes it unable to scale accordingly with the character inside textView — VincentTheonardo, Mar 15 '17 at 04:55

score 0 · Answer 4 · answered Mar 15 '17 at 09:50

try this

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical" android:layout_width="match_parent"
android:layout_height="wrap_content"
android:gravity="left"
android:paddingLeft="10dp"
android:paddingRight="40dp"
android:paddingBottom="10dp">


<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">
    <TextView
        android:text="Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing"
        android:padding="10dp"
        android:background="@color/tabcolor"
        android:textColor="@color/white"
        android:textSize="15sp"
        android:layout_width="150dp"
        android:layout_height="wrap_content"
        android:id="@+id/chat_bubble" />
    <TextView
        android:text="read"
        android:textSize="8sp"
        android:layout_marginLeft="5dp"
        android:layout_gravity="left|bottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/time_label" />
</LinearLayout>

</LinearLayout>

By specifying the layout_width, the width will be static and not wrapping my content — VincentTheonardo, Mar 16 '17 at 02:33
you are making a chat app so i thinks width should be static to half of screen width, so i give this code — Jins Lukose, Mar 16 '17 at 05:37

Textview inside nested linear layout is cut?

4 Answers4