How to prevent an imageview to be "pushed" outside the screen by a textview with variable dimensions?

Question

In a constraint layout, I have a textview, with an imageview next to it:

But sometimes the text in the textview can be very long and sometimes span more than one line. In these cases, the imageview get pushed outside the view:

Even addind a constraint between the imageview and the view container, the imageview gets pushed outside the view.

The goal is to always have the image right next to the text and if it grows, the image starts getting pushed to the side as long is not going outside the view. When it touches the boundaries of the view, it should stay there while the text wraps to the next line.

This code block just shows the case of the second picture:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

<TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textView" android:layout_marginTop="8dp"
        app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent"
        android:layout_marginStart="8dp"
        tools:text="This is a cat with a lot more text next to it so pay attention  "/>
<ImageView
        android:layout_width="30dp"
        android:layout_height="30dp" tools:srcCompat="@tools:sample/avatars[3]"
        android:id="@+id/imageView"
        app:layout_constraintStart_toEndOf="@+id/textView" android:layout_marginStart="8dp"
        android:layout_marginTop="8dp" app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.0"/>

</androidx.constraintlayout.widget.ConstraintLayout>

I've tried usgin barriers and guidelines, but they really do not serve for this case. The textview needs to be wrap_content since its size is variable and it is preferable to use constraint layout, that's why I did not used another one. Chains also did not work here.

Answer 1

You can use a packed chain with a bias of 0 to make it start-aligned and then set app:layout_constrainedWidth="true" for both views so that their constraints are respected when wrapping content.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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="match_parent">

    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="Text goes here"
        android:textSize="24sp"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toStartOf="@id/image"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginEnd="8dp"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textView"
        app:layout_constraintTop_toTopOf="parent"
        tools:src="@tools:sample/avatars" />

</android.support.constraint.ConstraintLayout>