1

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

Nick
  • 65
  • 8

2 Answers2

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

Dmitrii Leonov
  • 1,331
  • 1
  • 15
  • 25
  • inconsistent alignment specification between textAlignment and Gravity : / – Nick Nov 28 '19 at 10:52
  • I added another screenshot applying your code. where's the mistake iam making? – Nick Nov 28 '19 at 11:04
  • Thanks for helping me man. But now it totally overlaps again. when I put longer strings into the message_body the timestamp gets out of view. do you think my android studio is somehow corupted with bad dependencies or whatsoever? does it work on your side? – Nick Nov 28 '19 at 11:30
  • @Nick Are you using this layout inside the recycler view or inside some other layout? – Dmitrii Leonov Nov 28 '19 at 11:36
  • in a scroll view – Nick Nov 28 '19 at 11:40
  • but even the naked preview doesn't work as I want it to. The in app result in the scrollview is exactly as the preview (and the preview is for the layout without being embedded. its an xml of its own – Nick Nov 28 '19 at 11:42
  • @Nick I've inserted it inside the scroll view and it works totally fine for me. Maybe your background drawable is wrong? – Dmitrii Leonov Nov 28 '19 at 11:46
  • ``` . ``` – Nick Nov 28 '19 at 11:50
  • I've added another screenshot. this is 100% copy and paste of your soution with a longer text that doesn't break to next line – Nick Nov 28 '19 at 11:57
  • @Nick and seems like the problem with my solution is that the timestamp view isn't displayer, right? – Dmitrii Leonov Nov 28 '19 at 12:04
  • Here my last attempt I guess lol https://pastebin.com/12rYVHmW – Dmitrii Leonov Nov 28 '19 at 12:04
  • Or try this one :| https://pastebin.com/3fpjk6DL - I don't like it but if this doesn't work I don't know what will work – Dmitrii Leonov Nov 28 '19 at 12:10
  • this setup with the two linear layouts works perfectly fine. thank you so much you saved my day. I would have never come up with this solution. Have a great day! – Nick Nov 28 '19 at 12:21
0

Try use android:layout_width="0dp" so that the system will apply constraint properly.

Yang Liu
  • 1,300
  • 10
  • 14