TextView is ignoring its boundaries with longer text and second line. How to fix that?

Question

So here's the code of a simple ConstraintLayout containing two textviews.

Classic Chat Bubble. As I expand the text length of "message_body" Textview everything works as expected until the parent reaches its left border (marginLeft=100dp).

Instead of adding further text to a second line the "message-body" Textview keeps expanding for a while beyond its boundaries and messes up my layout before finally going to next line. How can I fix this it really drives me crazy.

Thanks in advance to this great community!

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/myMessage"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="right"
    android:layout_marginLeft="100dp"
    android:layout_marginTop="4dp"
    android:layout_marginRight="4dp"
    android:background="@drawable/my_message">


    <TextView
        android:id="@+id/message_body"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:elevation="0dp"
        android:gravity="left"
        android:padding="10dp"
        android:text="try make this text than one line"
        android:textColor="#fff"
        android:textSize="12dp"
        app:layout_constraintEnd_toStartOf="@+id/timestamp"
        app:layout_constraintStart_toStartOf="parent" />

    <TextView
        android:id="@+id/timestamp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_toEndOf="@+id/message_body"
        android:elevation="0dp"
        android:padding="5dp"
        android:text="10:00"
        android:textColor="#fff"
        android:textSize="8dp"
        app:layout_constraintEnd_toEndOf="parent"
         />


</androidx.constraintlayout.widget.ConstraintLayout>

Screenshots:

short_text

medium_still_good

now it chrashes left and right border

tried your advice but looks like this now

dmitris solution looks like this on my side atm

Answer 1

Your TextView was missing these:

android:layout_width="0dp"
android:textAlignment="textEnd"

.

<TextView
        android:id="@+id/message_body"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="0dp"
        android:layout_marginEnd="0dp"
        android:elevation="0dp"
        android:padding="10dp"
        android:text="try make this text than one line"
        android:textColor="#fff"
        android:textSize="12dp"
        android:textAlignment="textEnd"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/timestamp" />

The above code should fix your problem, but I would also suggest you fixing all the warnings that Android Studio highlighted for you - add 1 vertical constraint to the TextViews