Develop Reference

Android. ConstraintLayout, how to apply goneMargin

I have layout with ConstraintLayout as parent. Inside my constraint layout there are three views: ImageView and two TextView. I need, depending on whether the visibility of the ImageView and the TextView (1) is visible or not, the margin top of the second TextView changes. This is a visual example of what I want to implement:
I tried using goneMarginTop = 32 for my second TextView. However, in this case, as soon as the visibility of the first TextView is gone, I get margin between ImageView and TextView = 32 dp but expected 12 dp. I need margin = 32 dp only when ImageView and first TextView are gone. Here is my code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<ImageView
android:id="#+id/ivImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:visibility="gone"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="14dp"
android:gravity="center"
android:textColor="#color/black"
android:textSize="18sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ivImage"
app:layout_goneMarginTop="32dp" />
<TextView
app:layout_goneMarginTop="32dp"
android:id="#+id/tvDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="14dp"
android:textColor="#color/black"
android:textSize="17sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/tvTitle" />
</androidx.constraintlayout.widget.ConstraintLayout>
Is it possible to implement the behavior as in the image using ConstraintLayout from layout (not programmatically).
Please, help me.

I don't think there is a way to do what you ask just with XML and gone margins. You can do it programmatically like it is suggested, but you can also get the spacing you want by using a Barrier and a Space widget. See the comments in the sample XML below. (I added background colors and a visible horizontal marker at 32dp to show the extent of the widgets)
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content">
<!--
Space is set to the top of the layout with a height of 20dp.
-->
<Space
android:id="#+id/space"
android:layout_width="wrap_content"
android:layout_height="20dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<!--
A barrier is set to the bottom of the Space above and the bottom TextView (tvDesc). The
vertical placement of this barrier will vary from the bottom of tvTitle when
tvTitle is visible to 20dp (the bottom of the Space widget) when tvTitle is gone.
-->
<androidx.constraintlayout.widget.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="space,tvTitle" />
<ImageView
android:id="#+id/ivImage"
android:layout_width="0dp"
android:layout_height="0dp"
android:background="#android:color/holo_blue_light"
android:visibility="gone"
app:layout_constraintDimensionRatio="H,1:1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:visibility="visible" />
<TextView
android:id="#+id/tvTitle"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="14dp"
android:background="#android:color/holo_red_light"
android:gravity="center"
android:textColor="#color/black"
android:textSize="18sp"
android:visibility="gone"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/ivImage"
app:layout_goneMarginTop="20dp"
tools:visibility="visible" />
<!--
The top constraint of tvDesc is set to the barrier and the top margin is set to 12dp. If
tvTitle and the ImageView are gone, the top margin will still be 12dp. Since the
minimum vertical placement of the barrier is 20dp (the height of the Space widget) the
effective top margin for tvDesc will be 32dp (20dp + 12dp) as desired.
-->
<TextView
android:id="#+id/tvDesc"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="14dp"
android:layout_marginTop="12dp"
android:layout_marginEnd="14dp"
android:background="#android:color/holo_green_light"
android:textColor="#color/black"
android:textSize="17sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/barrier"
tools:visibility="visible" />
<View
android:layout_width="0dp"
android:layout_height="1dp"
android:layout_marginTop="32dp"
android:background="#android:color/black"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
All views visible:
tvTitle gone
ImageView and tvTitle gone

you can do it programmatically :
val layoutParams = imageView.layoutParams as RelativeLayout.LayoutParams
layoutParams.setMargins(100, 100, 100, 100)

TextView exceed Constraint if text is too long in ConstraintLayout

I have one TextView aligned to the left and centered vertically. Two groups of ImageView and TextView are both aligned to the right, with two layout configurations, one with image on the right, another with image on the left.
The hello world text can be very long. I want it to expand to fill the whole width without covering up the left text.
I have added app:layout_constraintStart_toEndOf="#id/text1" to constraint the right group (image + text) not to overlap with the left text. However, it does not behave as I expected.
How to make it not overlapping using only ConstraintLayout?
Text1 will be covered up if the right text is too long, which is not expected. Be noted that the image on the second row is gone too.
code:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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">
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/text1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text1" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/row1_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toStartOf="#id/row1_image"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#id/text1"
app:layout_constraintTop_toTopOf="parent"
tools:text="Hello World" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/row1_image"
android:layout_width="22dp"
android:layout_height="22dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/row1_text"
app:layout_constraintTop_toTopOf="parent"
tools:src="#drawable/ic_confirm" />
<androidx.constraintlayout.widget.Barrier
android:id="#+id/horizontal_barrier"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:barrierDirection="bottom"
app:constraint_referenced_ids="row1_text,row1_image" />
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/row2_image"
android:layout_width="22dp"
android:layout_height="22dp"
app:layout_constraintEnd_toStartOf="#id/row2_text"
app:layout_constraintHorizontal_bias="1"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toEndOf="#id/text1"
app:layout_constraintTop_toTopOf="#id/horizontal_barrier"
tools:src="#drawable/ic_confirm" />
<androidx.appcompat.widget.AppCompatTextView
android:id="#+id/row2_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/row2_image"
app:layout_constraintTop_toTopOf="#id/horizontal_barrier"
tools:text="Hello World" />
</androidx.constraintlayout.widget.ConstraintLayout>
expected to be like below if the right text is too long. It can achieved by LinearLayout and RelativeLayout

Kindly check the Constraintlayout version. Use app:layout_constrainedWidth="true"
with android:layout_width="wrap_content"

You can use Guidelines to stop your text from expanding more than needed.
let's take this layout for example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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"
tools:context=".MainActivity">
<TextView
android:layout_width="0dp"
android:layout_height="match_parent"
android:gravity="center"
android:text="longgggggg texttttttttttttttttexttttttttttttttttexttttttttttttttttexttttttttttttttt"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline2"
app:layout_constraintTop_toTopOf="parent" />
<TextView
android:id="#+id/textView"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="TextView"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.18" />
And because of app:layout_constraintGuide_percent="0.18" and android:layout_width="0dp" on both text views the long textView will not exit its constraints.

I had a similar issue, the problem was that I was mixing left and start, so the view was constrained from Right to Left, but the left was set as constraintStartToParent.
Changing everything to start / end solved the issue.

How to not push ImageView off of screen with Long TextView?

I want my imageview to stay directly to the right of my textview. I can accomplish this by setting toLeftOf in the attributes for TextView. But for really long text strings, I have ellipses set, and after it reaches the width of the layout, it'll push the ImageView off as well.
I can have the ImageView displayed by setting gravity to 1 for TextView, but then the ImageView is anchored to the right. What should I do?
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="left">
<TextView
android:id="#+id/title_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:layout_weight="1"
android:text="MY TEXT TO THE LEFT"
android:layout_toLeftOf="#id/img_button" />
<ImageButton
android:id="#+id/img_button"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="6dp"
android:background="#drawable/some_img"
app:srcCompat="#drawable/ic_edit" />
</LinearLayout>
So w/ setting the weight=1, that hugs the image to the far right, i need it to be dynamic and be to the right of the textview at all times and then when the width of the textview becomes longer than the parent, for the image to not get pushed off screen.

You can use constraintLayout and set your textView width to 0dp (also called match constraint).
The result will cause your textView to drop a line if the is a lot of text.
Here is an example:
<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.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="match_parent">
<ImageView
android:id="#+id/textView8"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:background="#android:color/holo_green_light"
android:padding="10dp"
android:text="something"
android:textColor="#color/colorAccent"
app:layout_constraintBottom_toBottomOf="#+id/textView10"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline3"
app:layout_constraintTop_toTopOf="#+id/textView10" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_percent="0.5" />
<TextView
android:id="#+id/textView10"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
android:text="this is really long text and it wont push the green image because of android:layout_width attribute"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#+id/guideline3"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
And it will look like this :

I set paddingRight to the size of the image button, inside the textview and I used alignRight on my image button.
And changed the container to RelativeLayout. It works as intended!!
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="left">
<TextView
android:id="#+id/title_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:paddingRight="22dp"
android:text="MY TEXT TO THE LEFT"
android:layout_toLeftOf="#id/img_button" />
<ImageButton
android:id="#+id/img_button"
android:layout_width="22dp"
android:layout_height="22dp"
android:layout_marginLeft="4dp"
android:layout_marginTop="6dp"
android:layout_alignRight="#+id/title_view"
android:background="#drawable/some_img"
app:srcCompat="#drawable/ic_edit" />
</RelativeLayout>

Use LinearLayout with the orientation="horizontal" attribute . Than set the weight_sum = 100 for the LinearLayout , and than for your TextView and ImageView , just place the weight attribute according to what you want . Hope it helps .

Can't figure out layout dependencies in Android

I need to create a layout which should look like this:
The TextView content should be wrapped so the ImageView is always at the ent of the text.
TextView should not overlap with other views regardless of content.
ImageView can have visibility GONE during runtime, so TextView should use the space of ImageView.
My current layout:
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="48dp"
android:background="#android:color/white">
<TextView
android:id="#+id/pref_list_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentStart="true"
android:layout_centerVertical="true"
android:layout_marginStart="16dp"
android:fontFamily="sans-serif"
android:text="Long long"
android:textSize="#dimen/preference_text_size" />
<ImageView
android:id="#+id/pref_list_item_help_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/pref_list_item_title"
android:layout_centerVertical="true"
android:layout_margin="8dp"
android:src="#drawable/ic_help_primary_color"
android:contentDescription="#string/help" />
<Switch
android:id="#+id/pref_list_item_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentEnd="true"
android:layout_centerVertical="true"
android:layout_marginEnd="16dp" />
</RelativeLayout>
ConstraintLayout is an option, but I couldn't create constraints that satisfy my needs.

Using ConstraintLayout you can do it like this:
<?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/pref_list_item_title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:fontFamily="sans-serif"
android:text="Long long asdasd asd asd aasdadasd"
android:textSize="#dimen/preference_text_size"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/pref_list_item_help_button"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<ImageView
android:id="#+id/pref_list_item_help_button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_toEndOf="#id/pref_list_item_title"
android:layout_margin="8dp"
android:src="#drawable/ic_help_primary_color"
android:contentDescription="#string/help"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/pref_list_item_switch"
app:layout_constraintStart_toEndOf="#id/pref_list_item_title"
app:layout_constraintTop_toTopOf="parent"/>
<Switch
android:id="#+id/pref_list_item_switch"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="16dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
</android.support.constraint.ConstraintLayout>
The TextView and the ImageView are chained together with packed style and horizontal bias of 0 to keep them aligned to the left. The app:layout_constrainedWidth="true" has to be set for the TextView to prevent it from overlapping other Views in case the text gets too long. All this also works well when you want to toggle ImageView's visibility.

ConstraintLayout: Compound ImageView that stays in parent when text expands

Consider the following layout:
<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/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text" />
<ImageView
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintStart_toEndOf="#id/text_view"
app:layout_constraintTop_toTopOf="parent"
tools:background="#android:color/black" />
</android.support.constraint.ConstraintLayout>
The image view (or button, or any other widget, important is that it has a fixed size) is aligned right/end of a TextView with a size of wrap_content, thus, the text itself only takes the space it needs.
What I now want is, when the text expands (aka if it's longer), that the button gets aligned to the right of the parent, and the text view only gets the width that is left and gets ellipsized.
At the moment, the image view is pushed outside and the text gets ellipsized once it fills the whole parent.
I tried to fix this by adding a endToEnd="parent" constraint the the image and setting the horizontal bias to 0 (see code), but that doesn't work.
Any suggestions on what I could do instead?

In order to prevent the ImageView from getting pushed outside the parent you need to constrain the end of the TextView to the start of the ImageView to create a chain. Now to ensure that the TextView only takes the space it needs but also has its constraints enforced, you need to add app:layout_constrainedWidth="true" attribute to your TextView.
If you want the ImageView to stay immediately to the right of the TextView can use packed chain style with a horizontal bias of 0.
If you want the ImageView to be aligned to the right of the parent you can use the spread_inside chain style without bias.
The resulting XML with above changes might look like this:
<?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/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_view"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constrainedWidth="true"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toStartOf="#id/image_view"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text" />
<ImageView
android:id="#+id/image_view"
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/text_view"
app:layout_constraintTop_toTopOf="parent"
tools:background="#android:color/black" />
</android.support.constraint.ConstraintLayout>
EDIT: As requested in the comment, here's how it would work with a Barrier sparating the 3 TextViews and the ImageView. In this case you don't specify the constraints for the ends of the TextViews thus you no longer have them chained horizontally. Instead, you create a Barrier with the direction being the end of all TextViews that are referenced in the Barrier. This will ensure that the Barrier is always at the end of the widest TextView. The last thing to do is to constrain the start side of the ImageView to the Barrier.
Example XML:
<?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/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<TextView
android:id="#+id/text_view1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toTopOf="#id/text_view2"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
tools:text="Text1" />
<TextView
android:id="#+id/text_view2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toTopOf="#id/text_view3"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/text_view1"
tools:text="Text2" />
<TextView
android:id="#+id/text_view3"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:padding="8dp"
android:textSize="18sp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#id/text_view2"
tools:text="Text3" />
<android.support.constraint.Barrier
android:id="#+id/barrier"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="text_view1,text_view2,text_view3" />
<ImageView
android:id="#+id/image_view"
android:layout_width="48dp"
android:layout_height="48dp"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#id/barrier"
app:layout_constraintTop_toTopOf="parent"
tools:background="#android:color/black" />
</android.support.constraint.ConstraintLayout>