TextView wrapping/off screen in ConstraintLayout

Question

I am trying to set two TextViews in a ConstraintLayout side by side. TextView2 (Market) should always be on right of TextView1. It should never go off screen. This is my requirement with different lengths of TextView1:

This is my XML:

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">


    <TextView
        android:id="@+id/chat_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Lorem ipsum"
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap" />

    <TextView
        android:id="@+id/tvRate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/half_margin"
        android:background="@drawable/tag_marketplace_backround"
        android:paddingStart="@dimen/half_margin"
        android:paddingEnd="@dimen/half_margin"
        android:text="@string/market"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        app:layout_constraintStart_toEndOf="@id/chat_message"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

This works when TextView1 is small (first image). But TextView2 goes off screen when I increase length of TextView2. Please help me implement this.

Answer 1

Try this layout. It uses chains and horizontal bias:

<androidx.constraintlayout.widget.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal">

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum "
        app:layout_constrainedWidth="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@+id/tvRate"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/tvRate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="@dimen/half_margin"
        android:background="@drawable/ic_launcher_background"
        android:paddingStart="@dimen/half_margin"
        android:paddingEnd="@dimen/half_margin"
        android:text="@string/market"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toEndOf="@+id/chat_message"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Answer 2

Try this

    <androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

<androidx.constraintlayout.widget.ConstraintLayout
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@id/tvRate"
        app:layout_constraintHorizontal_weight="1"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Lorem dsjdlk lkjdksl jdlk jdlk djslkdjslkdsjdlskdjsdlsjsdl kjdl ksjd lksjlkd jl kjdl ksj slk jdslkd sjdlskjdslkj dlkj dlkjd lkd jsldksjdlksdjskdlsdjlksdjsl kj ldkjd lskdjs ldkjsldskjlk" />

    <TextView
        android:id="@+id/tvRate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@color/black"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:textAllCaps="true"
        android:textColor="@android:color/white"
        android:textSize="12sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="Market" />

</androidx.constraintlayout.widget.ConstraintLayout>

</androidx.constraintlayout.widget.ConstraintLayout>

0dp is basically between the left side of the screen till the right text which is tvRate (take as much space as possible) wrap content is basically take the space that is needed to wrap the content that the element has

Answer 3

I believe you can achieve that using the horizontal chain you make both View 's layouts depend on each other and on the parent. Then ConstraintLayout can define their resolved constraints in interesting ways. You can define the style of the chain on the first View in the chain. I also noticed that the orientation was set, but that does nothing for ConstraintLayout and the layout_constraintWidth_default only applies when the android:width is set to 0dp .

<androidx.constraintlayout.widget.ConstraintLayout 
   xmlns:android="http://schemas.android.com/apk/res/android"
   xmlns:app="http://schemas.android.com/apk/res-auto"
   android:layout_width="match_parent"
   android:layout_height="wrap_content">


<TextView
    android:id="@+id/chat_message"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Lorem ipsum"
    app:layout_constrainedWidth="true"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toStartOf="@id/tvRate"
    app:layout_constraintHorizontal_chainStyle="spread_inside" />

<TextView
    android:id="@+id/tvRate"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/half_margin"
    android:background="@drawable/tag_marketplace_backround"
    android:paddingStart="@dimen/half_margin"
    android:paddingEnd="@dimen/half_margin"
    android:text="@string/market"
    android:textAllCaps="true"
    android:textColor="@android:color/white"
    android:textSize="12sp"
    app:layout_constraintStart_toEndOf="@id/chat_message"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintEnd_toEndOf="parent" />