How to use barrier to constraint views to top of parent

Question

I am trying to build a layout with an image and a text side to side and center aligned together. I have an other view below these two.

With a barrier below I managed to have the below text nicely constrained to the biggest of imgage/text.

But I have a problem with the parent view. The image is constaint to parent with a margin. So when the texts grows it comes outside of the view.

I tried to remove the constraint on image and add a barrier (containing the image and text) and contraint the barrier to top of parent by the whole views disapears.

Help would be welcome as I've spent hours on this.

<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="wrap_content"
    android:layout_marginBottom="8dp"
    android:background="@color/message_background"
    android:orientation="vertical">


    <ImageView
        android:id="@+id/screen_img_arrow_info"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginTop="8dp"

        app:layout_constraintBottom_toBottomOf="@+id/screen_img_info"
        app:layout_constraintLeft_toRightOf="@+id/screen_img_info"
        app:layout_constraintTop_toTopOf="@+id/screen_img_info"
        app:srcCompat="@drawable/ic_keyboard_arrow_right_white_48dp"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintTop_creator="1" />


    <ImageView
        android:id="@+id/screen_img_info"
        android:layout_width="70dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:layout_marginTop="8dp"
        android:background="@null"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/info"
        tools:layout_constraintLeft_creator="1"
        tools:layout_constraintRight_creator="1"
        tools:layout_constraintTop_creator="1" />

    <TextView
        android:id="@+id/screen_txt_message_info"
        style="@style/messagebox_info"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginBottom="8dp"
        android:layout_marginLeft="8dp"
        android:layout_marginRight="8dp"
        android:layout_marginTop="8dp"
        android:inputType="textMultiLine"
        android:text="small text"
        app:layout_constraintBottom_toBottomOf="@+id/screen_img_arrow_info"
        app:layout_constraintLeft_toRightOf="@+id/screen_img_arrow_info"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="@+id/screen_img_arrow_info" />

    <android.support.constraint.Barrier
        android:id="@+id/barrierBottom"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:barrierDirection="bottom"
        app:constraint_referenced_ids="screen_txt_message_info,screen_img_info,screen_img_arrow_info" />

    <TextView
        android:id="@+id/textbottom"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:layout_marginStart="8dp"
        android:text="TextView"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/barrierBottom"
        tools:text="Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare.Martinus agens illas provincias pro praefectis aerumnas innocentium graviter gemens saepeque obsecrans, ut ab omni culpa inmunibus parceretur, cum non inpetraret, minabatur se discessurum: ut saltem id metuens perquisitor malivolus tandem desineret quieti coalitos homines in aperta pericula proiectare." />


</android.support.constraint.ConstraintLayout>

Answer 1

If I understand properly, you don't need Barrier for this view. you just need define your textView to be below of parent and define your imageView to be on center of your textView. for your textView just define these constraints:

app:layout_constraintStart_toEndOf="@+id/screen_img_arrow_info"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintEnd_toEndOf="parent"

and for your ImageView define these constraints:

app:layout_constraintBottom_toBottomOf="@+id/screen_txt_message_info"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="@+id/screen_txt_message_info"

the result will be this

here is the full code :

<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="wrap_content"
android:layout_marginBottom="8dp"
android:orientation="vertical">


<ImageView
    android:id="@+id/screen_img_arrow_info"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginBottom="8dp"
    android:layout_marginLeft="8dp"
    android:layout_marginTop="8dp"
    app:layout_constraintBottom_toBottomOf="@+id/screen_img_info"
    app:layout_constraintLeft_toRightOf="@+id/screen_img_info"
    app:layout_constraintTop_toTopOf="@+id/screen_img_info"
    app:srcCompat="@drawable/ic_accept"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1"
    tools:layout_constraintTop_creator="1" />


<ImageView
    android:id="@+id/screen_img_info"
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:layout_marginBottom="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:background="@null"
    app:layout_constraintBottom_toBottomOf="@+id/screen_txt_message_info"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="@+id/screen_txt_message_info"
    app:srcCompat="@drawable/ic_location"
    tools:layout_constraintLeft_creator="1"
    tools:layout_constraintRight_creator="1"
    tools:layout_constraintTop_creator="1" />

<TextView
    android:id="@+id/screen_txt_message_info"
    android:layout_width="270dp"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:layout_marginStart="8dp"
    android:layout_marginTop="8dp"
    android:inputType="textMultiLine"
    android:text="small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text small text "
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@+id/screen_img_arrow_info"
    app:layout_constraintTop_toTopOf="parent" />