Constraint Layout - Textview overlaps other views when it grows in size

Question

Above image shows how i want my view to look like. Problem is when upper gravity text increases in size it pushes the image out off the view. I tried using barriers, but couldn't make it work. Below image shows, how far i have come to achieving this. But now that problem is images are always stuck at the end. But i want it to be right next to gravity text and when that text increase,it should stuck at the end and gravity text should grow in height.

<?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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="@dimen/dp_4">

            <TextView
                android:id="@+id/last_msg_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:layout_marginBottom="8dp"
                android:textAlignment="viewStart"
                android:textColor="@color/color_grey_3"
                android:textSize="@dimen/sp_12"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="@+id/barrier9"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="@+id/title_tv"
                app:layout_constraintTop_toBottomOf="@+id/title_tv"
                tools:text="In the future, Earth is slowly becoming uninhabitable. Ex-NASA pilot Cooper, along with a team of researchers, is sent on a planet exploration mission to report which planet can sustain life." />

            <TextView
                android:id="@+id/title_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:textColor="@color/color_grey_2"
                android:textSize="@dimen/sp_16"
                android:textStyle="bold"
                app:layout_constraintEnd_toStartOf="@+id/imageView4"
                app:layout_constraintHorizontal_bias="0.0"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="Alpha CapriCod A" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="@dimen/dp_24"
                android:layout_height="@dimen/dp_24"
                android:layout_marginEnd="8dp"
                android:tint="@color/color_grey_5"
                app:layout_constraintEnd_toStartOf="@+id/user_count_tv"
                app:layout_constraintTop_toTopOf="@+id/title_tv"
                app:srcCompat="@drawable/mutiple_user_img" />

            <TextView
                android:id="@+id/user_count_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                app:layout_constraintBottom_toBottomOf="@+id/imageView4"
                app:layout_constraintEnd_toEndOf="@+id/barrier9"
                app:layout_constraintTop_toTopOf="@+id/imageView4"
                tools:text="1000" />

            <android.support.constraint.Barrier
                android:id="@+id/barrier9"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                app:barrierDirection="left"
                tools:layout_editor_absoluteX="387dp"
                tools:layout_editor_absoluteY="8dp" />

        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

Answer 1

What you can do is put title_tv (with wrap_content width), imageView4 and user_count_tv in a horizontal chain with the packed style and a bias of 0 to have them aligned to the left. When the title_tv expands, you need to use app:layout_constrainedWidth="true" to prevent it from pushing the other views out of bounds. This is what the constraints should look like:

<?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:id="@+id/constraintLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.v7.widget.CardView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent">

        <android.support.constraint.ConstraintLayout
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:padding="4dp">

            <TextView
                android:id="@+id/last_msg_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:textAlignment="viewStart"
                android:textSize="12sp"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toStartOf="@id/title_tv"
                app:layout_constraintTop_toBottomOf="@id/title_tv"
                tools:text="In the future, Earth is slowly becoming uninhabitable. Ex-NASA pilot Cooper, along with a team of researchers, is sent on a planet exploration mission to report which planet can sustain life." />

            <TextView
                android:id="@+id/title_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginStart="16dp"
                android:layout_marginTop="8dp"
                android:layout_marginEnd="8dp"
                android:textSize="16sp"
                android:textStyle="bold"
                app:layout_constraintHorizontal_bias="0"
                app:layout_constraintHorizontal_chainStyle="packed"
                app:layout_constrainedWidth="true"
                app:layout_constraintEnd_toStartOf="@id/imageView4"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                tools:text="Alpha CapriA" />

            <ImageView
                android:id="@+id/imageView4"
                android:layout_width="24dp"
                android:layout_height="24dp"
                android:layout_marginEnd="8dp"
                app:layout_constraintEnd_toStartOf="@id/user_count_tv"
                app:layout_constraintStart_toEndOf="@id/title_tv"
                app:layout_constraintTop_toTopOf="@id/title_tv"
                app:srcCompat="@android:drawable/btn_star" />

            <TextView
                android:id="@+id/user_count_tv"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_marginEnd="8dp"
                app:layout_constraintBottom_toBottomOf="@id/imageView4"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/imageView4"
                app:layout_constraintTop_toTopOf="@+id/imageView4"
                tools:text="1000" />

        </android.support.constraint.ConstraintLayout>

    </android.support.v7.widget.CardView>

</android.support.constraint.ConstraintLayout>

Result:

and with a longer title:

Answer 2

Try this way,
1. In your card view's constraint layout, add one LinearLayout whose orientation is horizontal.
2. In that horizontal view, add your title with width and height as wrap context.
Then add imageview and number textview.
3. Set your details textview below that linear layout.
Done.