android - TextView dynamic width with a view at the end

Question

I have two elements, a TextView and an ImageView. The ImageView will be at the end of the TextView. The TextView's width will be change based on the text, and the ImageView also follows the end of the TextView. Like this:

But the problem is, if the text is so long, the ImageView goes out of the screen, like this:

But it should be like this:

How can I get this only by XML? I know programatically it can be achieved, but I want a XML solution.

Note: The ImageView can be a Button, so I can't use drawableEnd like solution.

Answer 1

you can try this the key here is app:layout_constrainedWidth="true"

<?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"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
    android:id="@+id/left"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="lefttttttttttttttttttttttttttttttttttttttttttttttttt"
    app:layout_constrainedWidth="true"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintEnd_toStartOf="@id/right"
    app:layout_constraintTop_toTopOf="parent"/>
 <ImageView
    android:id="@+id/right"
    android:layout_width="40dp"
    android:layout_height="40dp"
    android:src="@mipmap/ic_launcher"
    app:layout_constraintStart_toEndOf="@id/left"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="@id/left"
    />
</android.support.constraint.ConstraintLayout>