Alignment/wrapping inside the ConstraintLayout

Question

I have 3 text views placed horizontally. Leftmost one and rightmost one are of fixed size, but middle one can vary in length significantly. Something like this:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

    <androidx.constraintlayout.widget.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:padding="16dp">

        <TextView
            android:id="@+id/left"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:paddingEnd="8dp"
            android:text="LEFT"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

        <TextView
            android:id="@+id/message"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:paddingEnd="8dp"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toStartOf="@+id/right"
            app:layout_constraintStart_toEndOf="@+id/left"
            app:layout_constraintTop_toTopOf="parent"
            tools:text="@tools:sample/lorem/random" />

        <TextView
            android:id="@+id/right"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="RIGHT"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/message"
            app:layout_constraintTop_toTopOf="parent"
            tools:visibility="visible" />
    </androidx.constraintlayout.widget.ConstraintLayout>
</layout>

This results in following layout:

But if we have short text in the middle, like this:

tools:text="@tools:sample/lorem"

it will look:

Rightmost view is "glued" to the end.

I want it to follow the middle view, like this:

How can it be achieved?

what do you mean "follow"? you want to make left one and right one same height like middle one? check https://stackoverflow.com/questions/43288173/constraintlayout-set-height-of-all-views-in-row-to-match-the-tallest-one?rq=1 — Kirguduck, Mar 04 '20 at 14:26
@Kirguduck The height does not matter, "follow" means left gravity — brox, Mar 04 '20 at 14:43

sparkkc08 · Accepted Answer · 2020-03-04T17:28:59.287

You should use app:layout_constraintWidth_default="wrap" for the middle view and app:layout_constraintHorizontal_chainStyle="packed". Also don't forget to set app:layout_constraintHorizontal_bias="0.0" for the first view to align the whole layout to the start of the screen. Here how the whole layout should look:

<?xml version="1.0" encoding="utf-8"?>
<layout 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">

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <TextView
        android:id="@+id/left"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="LEFT"
        app:layout_constraintEnd_toStartOf="@id/message"
        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/message"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:padding="8dp"
        app:layout_constraintEnd_toStartOf="@id/apply_text"
        app:layout_constraintStart_toEndOf="@id/left"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintWidth_default="wrap"
        tools:text="@tools:sample/lorem" />

    <TextView
        android:id="@+id/apply_text"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="8dp"
        android:text="RIGHT"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/message"
        app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>

Here is the result:

short

full

score 0 · Answer 2 · answered Mar 04 '20 at 14:58

It is quite a challenge. AFAIK, To do what you want, you have to change the width of the middle TextView to wrap_content and remove right TextView constraint with parent's right.

You could try something like calculating width of left and right then if the total width of the device is more than or equal left + right + middle then you switch from

to this

Alignment/wrapping inside the ConstraintLayout

2 Answers2