android, how to show border around a few views inside the constriantLayout - android-constraintlayout

Using ConstraintLayout to flat the view hierarchy.
In the view there are some views need to show inside a rounded border.
Did it with a view group as those view's parent container view (here using a nested ConstrainLayout, could be other like RelativeLayout),
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/second_part_container"
But that introduced one more level of the view hierarchy.
Is there a way to group a few views in a visually bordered container but still being only one flat level for all of the views (only one root ContraintLayout)?
<?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:card_view="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"
android:layout_marginTop="8dp"
android:background="?android:attr/selectableItemBackground"
android:paddingStart="10dp"
android:paddingEnd="10dp">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/a_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="52dp" />
<ImageView
android:id="#+id/b_icon"
android:layout_width="20dp"
android:layout_height="20dp"
android:layout_marginEnd="3dp"
android:src="#drawable/b_icon"
android:visibility="visible"
app:layout_constraintBottom_toBottomOf="#+id/b_title"
app:layout_constraintEnd_toStartOf="#+id/a_guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="#+id/b_title" />
<TextView
android:id="#+id/b_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="3dp"
android:ellipsize="end"
android:maxLines="1"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/a_guideline"
app:layout_constraintTop_toTopOf="parent"
tools:text="Lorem ipsum dolor sit amet " />
<ImageView
android:id="#+id/a_avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="3dp"
android:scaleType="fitXY"
android:src="#drawable/unknown_avatar"
app:layout_constraintEnd_toStartOf="#+id/a_guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/b_title" />
<!-- -->
<TextView
android:id="#+id/a_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxWidth="220dp"
android:maxLines="1"
android:textColor="#color/txt_color"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#+id/a_guideline"
app:layout_constraintRight_toLeftOf="#+id/a_user_id_verified"
app:layout_constraintTop_toBottomOf="#+id/b_title"
tools:text="ee" />
<ImageView
android:id="#+id/a_user_id_verified"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:layout_marginRight="3dp"
app:layout_constraintBottom_toBottomOf="#+id/a_user_name"
app:layout_constraintLeft_toRightOf="#id/a_user_name"
app:layout_constraintRight_toLeftOf="#id/a_user_id"
app:layout_constraintTop_toTopOf="#+id/a_user_name"
app:srcCompat="#drawable/phoenix_active_account_tick" />
<TextView
android:id="#+id/a_user_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:clickable="true"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/a_user_name"
app:layout_constraintLeft_toRightOf="#id/a_user_id_verified"
app:layout_constraintRight_toLeftOf="#id/a_message_time"
app:layout_constraintTop_toTopOf="#+id/a_user_name"
app:layout_constraintWidth_default="wrap"
tools:text="eee888" />
<TextView
android:id="#+id/a_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="3dp"
android:textColor="#color/txt_color"
app:layout_constraintBottom_toBottomOf="#+id/a_user_id"
app:layout_constraintLeft_toRightOf="#id/a_user_id"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/a_user_id"
tools:text="30 Nov 2018" />
<TextView
android:id="#+id/a_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:textColor="#color/txt_color"
android:textColorLink="#color/red"
android:lineSpacingMultiplier="1.1"
android:clickable="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/a_guideline"
app:layout_constraintTop_toBottomOf="#+id/a_user_name"
tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />
<ImageView
android:id="#+id/a_media_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:scaleType="matrix"
android:visibility="gone"
app:layout_constraintDimensionRatio="H,15:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/a_guideline"
app:layout_constraintTop_toBottomOf="#+id/a_content"
app:layout_goneMarginBottom="8dp"
tools:srcCompat="#tools:sample/backgrounds/scenic" />
<androidx.constraintlayout.widget.ConstraintLayout
android:id="#+id/second_part_container"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#drawable/bk_round_border"
android:visibility="visible"
app:layout_constraintBottom_toTopOf="#+id/a_reply"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/a_guideline"
app:layout_constraintTop_toBottomOf="#+id/a_media_image"
app:layout_goneMarginBottom="8dp">
<ImageView
android:id="#+id/a_quoted_user_avatar"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_marginLeft="6dp"
android:layout_marginTop="3dp"
android:layout_marginRight="3dp"
android:scaleType="fitXY"
android:src="#drawable/unknown_avatar"
app:layout_constraintBottom_toBottomOf="#+id/a_user_name_quoted"
app:layout_constraintHorizontal_bias="0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toLeftOf="#+id/a_user_name_quoted"
app:layout_constraintTop_toTopOf="#+id/a_user_name_quoted"
app:layout_constraintVertical_bias="0.6" />
<TextView
android:id="#+id/a_user_name_quoted"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxWidth="220dp"
android:maxLines="1"
tools:text="ee 88888888"
android:textColor="#color/txt_color"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintLeft_toRightOf="#id/a_quoted_user_avatar"
app:layout_constraintRight_toLeftOf="#id/a_user_id_verified_quoted"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/a_user_id_verified_quoted"
android:layout_width="12dp"
android:layout_height="12dp"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:layout_marginRight="3dp"
app:layout_constraintBottom_toBottomOf="#+id/a_user_name_quoted"
app:layout_constraintLeft_toRightOf="#id/a_user_name_quoted"
app:layout_constraintRight_toLeftOf="#id/a_user_id_quoted"
app:layout_constraintTop_toTopOf="#+id/a_user_name_quoted"
app:srcCompat="#drawable/phoenix_active_account_tick" />
<TextView
android:id="#+id/a_user_id_quoted"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:clickable="true"
android:ellipsize="end"
android:maxLines="1"
tools:text="eee88dfdf"
app:layout_constraintBottom_toBottomOf="#+id/a_user_name_quoted"
app:layout_constraintLeft_toRightOf="#id/a_user_id_verified_quoted"
app:layout_constraintRight_toLeftOf="#id/a_message_time_quoted"
app:layout_constraintTop_toTopOf="#+id/a_user_name_quoted"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="#+id/a_message_time_quoted"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginRight="3dp"
tools:text="30 Nov 2018"
android:textColor="#color/txt_color"
app:layout_constraintBottom_toBottomOf="#+id/a_user_id_quoted"
app:layout_constraintLeft_toRightOf="#id/a_user_id_quoted"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/a_user_id_quoted" />
<!-- -->
<TextView
android:id="#+id/a_content_quoted"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:paddingBottom="8dp"
android:autoLink="web"
android:linksClickable="true"
tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
android:textColor="#color/txt_color"
android:textColorLink="#color/red"
android:lineSpacingMultiplier="1.1"
app:layout_constraintBottom_toTopOf="#+id/a_media_image_quoted"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/a_user_name_quoted" />
<ImageView
android:id="#+id/a_media_image_quoted"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginTop="8dp"
android:scaleType="matrix"
android:visibility="gone"
app:layout_constraintDimensionRatio="H,15:9"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/a_content_quoted"
app:layout_goneMarginBottom="8dp" />
</androidx.constraintlayout.widget.ConstraintLayout>
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#20000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/a_reply" />
</androidx.constraintlayout.widget.ConstraintLayout>

Related

android constraintlayout, ellipse does not work as expected

Trying to use constraintlayout, but having problem to show ellipse properly.
It has three columns, left icon; middle part (which has two lines); right icon;
left icon should left align parent, and right icon should right align parent,
the middle part should left align the left icon.
| [left icon] | [first line][B] | [right icon] |
| | [second line][other] | |
The middle part "First line ......" when text is too long it should show ellipsis,
and the "Second line ..." when text is too long it should show ellipsis as well
but when the text are too long the first line run over the right side icon, and the second line does show ellipsis but whole line runs over the right icon as well, although they have
app:layout_constraintRight_toLeftOf="#+id/_logo"
to set to be placed in left of the right icon ("#+id/_logo")
Why the code does not do it supposed to do, or something not right?
the xml:
<?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:id="#+id/_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_marginBottom="20dp"
android:background="?android:attr/selectableItemBackground"
android:paddingStart="20dp"
android:paddingEnd="20dp"
tools:background="#00880088"
>
<View android:id="#+id/top_divider"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginBottom="20dp"
android:background="#888"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/_top_horizontal_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="#+id/top_divider"
app:layout_constraintGuide_begin="#dimen/social_content_padding" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="36dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/_top_horizontal_guideline_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="#+id/top_divider"
app:layout_constraintGuide_begin="52dp" />
<ImageView
android:id="#+id/_avatar"
android:layout_width="#dimen/social_avatar_size"
android:layout_height="#dimen/social_avatar_size"
android:layout_marginStart="0dp"
android:scaleType="fitXY"
android:src="#drawable/ic_share_blue"
app:layout_constraintEnd_toStartOf="#+id/_guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintTop_toTopOf="#+id/_top_horizontal_guideline"
tools:background="#ff0000"
/>
<TextView
android:id="#+id/_first_line"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:clickable="true"
android:ellipsize="end"
android:maxLines="1"
android:textSize="14sp"
app:layout_constraintTop_toTopOf="#+id/_top_horizontal_guideline"
app:layout_constraintStart_toEndOf="#+id/_guideline"
app:layout_constraintRight_toLeftOf="#+id/_check_icon"
tools:text="First line, more text, asdfsdfa eee 888 eee 888 " />
<ImageView
android:id="#+id/_check_icon"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:layout_marginRight="3dp"
app:layout_constraintBottom_toBottomOf="#+id/_first_line"
app:layout_constraintLeft_toRightOf="#id/_first_line"
app:layout_constraintRight_toLeftOf="#+id/_logo"
app:layout_constraintTop_toTopOf="#+id/_first_line"
app:srcCompat="#drawable/ic_pause"
tools:background="#ff0000"
/>
<TextView
android:id="#+id/_second_line"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:ellipsize="end"
android:maxWidth="220dp"
android:maxLines="1"
android:textSize="12sp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toRightOf="#+id/_guideline"
app:layout_constraintRight_toLeftOf="#+id/_msg_time"
app:layout_constraintTop_toBottomOf="#+id/_first_line"
app:layout_constraintBottom_toTopOf="#+id/_top_horizontal_guideline_2"
tools:text="Second line, test long text more more more eee 888 ===" />
<TextView
android:id="#+id/_msg_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/_second_line"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#id/_second_line"
app:layout_constraintRight_toLeftOf="#+id/_logo"
app:layout_constraintTop_toTopOf="#+id/_second_line"
tools:text=" \u2039 30 Nov 2018 \u203A" />
<ImageView
android:id="#+id/_logo"
android:layout_width="#dimen/social_logo_size"
android:layout_height="#dimen/social_logo_size"
android:layout_marginLeft="3dp"
android:layout_marginTop="2dp"
android:layout_marginRight="0dp"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintLeft_toRightOf="#id/_check_icon"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/_top_horizontal_guideline"
app:layout_constraintBottom_toTopOf="#+id/_top_horizontal_guideline_2"
tools:background="#33ff00ff"
app:srcCompat="#drawable/ic_rotate" />
<TextView
android:id="#+id/_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:layout_marginEnd="8dp"
android:clickable="true"
android:lineSpacingMultiplier="1.1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/_guideline"
app:layout_constraintTop_toBottomOf="20dp"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />
</androidx.constraintlayout.widget.ConstraintLayout>

Lets first go through the different results of using toStartOf and toLeftOf
using toStartOf will result in this output.
using toLeftOf will result in this output.
As you can see, Using toLeftOf push the date view out of the screen in case of big text.
While toStartOf will not change the position of date view no matter how big or small the text is.
Hope you got the point.
Here is the your required layout using toStartOf.
<?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:id="#+id/_container"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_marginTop="0dp"
android:layout_marginBottom="20dp"
android:background="?android:attr/selectableItemBackground"
android:paddingStart="20dp"
android:paddingEnd="20dp"
tools:background="#00880088"
>
<View android:id="#+id/top_divider"
android:layout_width="wrap_content"
android:layout_height="1dp"
android:layout_marginBottom="20dp"
android:background="#888"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"/>
<androidx.constraintlayout.widget.Guideline
android:id="#+id/_top_horizontal_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="#+id/top_divider"
app:layout_constraintGuide_begin="#dimen/social_content_padding" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="36dp" />
<androidx.constraintlayout.widget.Guideline
android:id="#+id/_top_horizontal_guideline_2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="horizontal"
app:layout_constraintTop_toTopOf="#+id/top_divider"
app:layout_constraintGuide_begin="52dp" />
<ImageView
android:id="#+id/_avatar"
android:layout_width="#dimen/social_avatar_size"
android:layout_height="#dimen/social_avatar_size"
android:layout_marginStart="0dp"
android:scaleType="fitXY"
android:src="#drawable/ic_launcher_foreground"
app:layout_constraintEnd_toStartOf="#+id/_guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintTop_toTopOf="#+id/_top_horizontal_guideline"
tools:background="#ff0000"
/>
<TextView
android:id="#+id/_first_line"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:clickable="true"
android:ellipsize="end"
android:maxLines="1"
android:textSize="14sp"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintTop_toTopOf="#+id/_top_horizontal_guideline"
app:layout_constraintStart_toStartOf="#+id/_guideline"
app:layout_constraintEnd_toStartOf="#+id/_check_icon"
app:layout_constraintWidth_default="wrap"
tools:text="first" />
<ImageView
android:id="#+id/_check_icon"
android:layout_width="14dp"
android:layout_height="14dp"
android:layout_marginLeft="3dp"
android:layout_marginTop="3dp"
android:layout_marginRight="3dp"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintBottom_toBottomOf="#+id/_first_line"
app:layout_constraintLeft_toRightOf="#id/_first_line"
app:layout_constraintRight_toLeftOf="#+id/_logo"
app:layout_constraintTop_toTopOf="#+id/_first_line"
app:srcCompat="#drawable/ic_launcher_foreground"
tools:background="#ff0000"
/>
<TextView
android:id="#+id/_second_line"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:ellipsize="end"
android:maxLines="1"
android:textSize="12sp"
app:layout_constraintWidth_default="wrap"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintStart_toStartOf="#+id/_guideline"
app:layout_constraintEnd_toStartOf="#+id/_msg_time"
app:layout_constraintTop_toBottomOf="#+id/_first_line"
app:layout_constraintBottom_toTopOf="#+id/_top_horizontal_guideline_2"
tools:text="second" />
<TextView
android:id="#+id/_msg_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="3dp"
android:layout_marginRight="3dp"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="#+id/_second_line"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toRightOf="#id/_second_line"
app:layout_constraintRight_toLeftOf="#+id/_logo"
app:layout_constraintTop_toTopOf="#+id/_second_line"
tools:text=" \u2039 30 Nov 2018 \u203A" />
<ImageView
android:id="#+id/_logo"
android:layout_width="#dimen/social_logo_size"
android:layout_height="#dimen/social_logo_size"
android:layout_marginLeft="3dp"
android:layout_marginTop="2dp"
android:layout_marginRight="0dp"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="#+id/_top_horizontal_guideline"
app:layout_constraintBottom_toTopOf="#+id/_top_horizontal_guideline_2"
tools:background="#33ff00ff"
app:srcCompat="#drawable/ic_launcher_foreground" />
<TextView
android:id="#+id/_content"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="28dp"
android:layout_marginEnd="8dp"
android:clickable="true"
android:lineSpacingMultiplier="1.1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/_guideline"
app:layout_constraintTop_toBottomOf="#+id/_top_horizontal_guideline_2"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />
</androidx.constraintlayout.widget.ConstraintLayout>

For the first line (id/_first_line), you mixed left/right and start/end constraints together. Both ends of the dimension should use the same pair for match_constrains (0dp) to work. Change app:layout_constraintStart_toEndOf="#+id/_guideline" to app:layout_constraintLeft_toRightOf="#+id/_guideline".
For the second line (id/_second_line), you need to add app:layout_constrainedWidth="true" so that this view's constraints are enforced when it grows too big.

android constraintlayout, how to left align a textview but it should show ellipsis when it is too long

Having a few view horizontally left aligned, but only the right most one is right align to the window.
| [a][b][c] ---------- [d] |
when [b] has a lot text it should show ellipsis
| [a][b bbb...][c] [d] |
made it work in portrait
but does not work in landscape, the [c] is not left aligned but aligned at right side
[a][b] ------------------------------[c][d],
How to make the [c] always left aligned, test code is attached below?
<?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:id="#+id/container"
android:layout_width="match_parent"
android:layout_height="wrap_content">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/_guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="56dp" />
<TextView
android:id="#+id/topline_title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="10dp"
android:ellipsize="end"
android:maxLines="1"
android:visibility="visible"
app:layout_constraintEnd_toStartOf="#+id/content_logo"
app:layout_constraintStart_toStartOf="#+id/_guideline"
app:layout_constraintTop_toTopOf="parent"
tools:text="wer we rwe r wer eee 888 eee 888 eee eee eee eee 888" />
<ImageView
android:id="#+id/content_logo"
android:layout_width="36dp"
android:layout_height="36dp"
android:layout_margin="8dp"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="#mipmap/ic_launcher" />
<ImageView
android:id="#+id/content_avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:scaleType="fitXY"
android:src="#drawable/unknown_avatar"
app:layout_constraintEnd_toStartOf="#+id/_guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/topline_title" />
<!-- -->
<TextView
android:id="#+id/content_user_name"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginLeft="8dp"
android:layout_marginTop="8dp"
android:ellipsize="end"
android:maxWidth="220dp"
android:maxLines="1"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintLeft_toLeftOf="#+id/_guideline"
app:layout_constraintRight_toLeftOf="#+id/content_user_id_verified"
app:layout_constraintTop_toBottomOf="#+id/topline_title"
tools:text="test eee 888" />
<ImageView
android:id="#+id/content_user_id_verified"
android:layout_width="24dp"
android:layout_height="24dp"
android:layout_margin="8dp"
app:layout_constraintBottom_toBottomOf="#+id/content_user_name"
app:layout_constraintLeft_toRightOf="#id/content_user_name"
app:layout_constraintRight_toLeftOf="#id/content_user_id"
app:layout_constraintTop_toTopOf="#+id/content_user_name"
app:srcCompat="#drawable/ic_btn_play"
/>
<TextView
android:id="#+id/content_user_id"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="8dp"
android:clickable="true"
android:ellipsize="end"
android:maxLines="1"
app:layout_constraintBottom_toBottomOf="#+id/content_user_name"
app:layout_constraintLeft_toRightOf="#id/content_user_id_verified"
app:layout_constraintRight_toLeftOf="#id/content_message_time"
app:layout_constraintTop_toTopOf="#+id/content_user_name"
app:layout_constraintWidth_default="wrap"
tools:text="eee888 qwerqwe rqw er q we rq weerw erwe" />
<TextView
android:id="#+id/content_message_time"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_margin="8dp"
app:layout_constraintBottom_toBottomOf="#+id/content_user_id"
app:layout_constraintLeft_toRightOf="#id/content_user_id"
app:layout_constraintEnd_toStartOf="#+id/content_logo"
app:layout_constraintTop_toTopOf="#+id/content_user_id"
tools:text="30 Nov 2018" />
<TextView
android:id="#+id/content_text"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_margin="20dp"
android:clickable="true"
android:lineSpacingMultiplier="1.1"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/_guideline"
app:layout_constraintTop_toBottomOf="#+id/content_user_name"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat." />
</androidx.constraintlayout.widget.ConstraintLayout>

You mixed up start/end and left/right in your horizontal chain.
For id/content_message_time change:
app:layout_constraintEnd_toStartOf="#+id/content_logo"
to
app:layout_constraintRight_toLeftOf="#+id/content_logo"
As a side note, app:layout_constraintWidth_default="wrap" is deprecated. For your id/content_user_id it's recommended that you change:
android:layout_width="0dp"
app:layout_constraintWidth_default="wrap"
to
android:layout_width="wrap_content"
app:layout_constrainedWidth="true"
which should produce the same behavior.

android constraintLayout how to vertical attach to items above which may not visible

Having a few items above the last row, and they may all not visible or someone still visible.
Here is how they vertically aligned:
[content_part - 'Lorem ipsum...']
[media_image - RED BLOCK - has app:layout_constraintTop_toBottomOf="#+id/content_part"]
[quoted_view - IMG - has app:layout_constraintTop_toBottomOf="#+id/media_image"]
[comment - TEXTVIEW ROW - has app:layout_constraintTop_toBottomOf="#+id/quoted_view"]
when the quoted_view is visible, the comment button row is fine (both landscape and portrait):
but when the quoted_view is NOT visible in landscape the comment row is not displayed right
although in portrait mode it seems fine
How to vertically align to above items which may not visible?
<?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:card_view="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"
android:layout_marginTop="8dp"
android:background="?android:attr/selectableItemBackground"
android:paddingStart="10dp"
android:paddingEnd="10dp">
<androidx.constraintlayout.widget.Guideline
android:id="#+id/guideline"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:orientation="vertical"
app:layout_constraintGuide_begin="52dp" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginEnd="3dp"
android:ellipsize="end"
android:maxLines="1"
android:visibility="visible"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toTopOf="parent"
tools:text="re-tweet werwer wer we rwe r wer " />
<ImageView
android:id="#+id/avatar"
android:layout_width="50dp"
android:layout_height="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="3dp"
android:scaleType="fitXY"
android:background="#mipmap/ic_launcher"
app:layout_constraintEnd_toStartOf="#+id/guideline"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/title" />
<!-- -->
<TextView
android:id="#+id/content_part"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:autoLink="web"
android:linksClickable="true"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="1.0"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/title"
android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. " />
<ImageView
android:id="#+id/media_image"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:scaleType="matrix"
android:visibility="visible"
app:layout_constraintDimensionRatio="H,15:3"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/content_part"
app:layout_goneMarginBottom="8dp"
android:background="#ff0000" />
<androidx.cardview.widget.CardView
android:id="#+id/quoted_view"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:background="#color/colorAccent"
app:cardCornerRadius="8dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/media_image"
app:layout_goneMarginBottom="8dp"
android:visibility="gone">
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="#color/colorAccent"
android:orientation="vertical">
<androidx.appcompat.widget.AppCompatImageView
android:id="#+id/imageView"
android:layout_width="match_parent"
android:layout_height="30dp"
android:scaleType="centerCrop"
android:src="#mipmap/ic_launcher_round" />
<androidx.appcompat.widget.AppCompatTextView
android:layout_width="match_parent"
android:layout_height="30dp"
android:layout_below="#+id/imageView"
android:gravity="center_horizontal"
android:padding="8dp"
android:text="#string/app_name"
android:textColor="#ffffff"
android:textSize="12sp" />
</RelativeLayout>
</androidx.cardview.widget.CardView>
<!-- quoted -->
<TextView
android:id="#+id/comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/response"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/quoted_view"
android:text="TextView" />
<TextView
android:id="#+id/response"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/like"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/comment"
android:text="TextView" />
<TextView
android:id="#+id/like"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginEnd="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintStart_toEndOf="#+id/response"
android:text="TextView" />
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#20000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent" />
</androidx.constraintlayout.widget.ConstraintLayout>
update:
adding app:layout_constraintTop_toBottomOf="#+id/comment" to android:id="#+id/view" seems fixed it.
<View
android:id="#+id/view"
android:layout_width="match_parent"
android:layout_height="1dp"
android:background="#20000000"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.526"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/comment" />
But not really understand why it has to have this constrain, the android:id="#+id/comment" already has constrain app:layout_constraintBottom_toTopOf="#+id/view".
<TextView
android:id="#+id/comment"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginBottom="8dp"
app:layout_constraintBottom_toTopOf="#+id/view"
app:layout_constraintEnd_toStartOf="#+id/response"
app:layout_constraintHorizontal_bias="0.5"
app:layout_constraintHorizontal_chainStyle="spread_inside"
app:layout_constraintStart_toEndOf="#+id/guideline"
app:layout_constraintStart_toStartOf="#+id/guideline"
app:layout_constraintTop_toBottomOf="#+id/quoted_view"
android:text="TextView" />

When you specify app:layout_constraintDimensionRatio="H,15:3" for media_image with a 0dp height and 0dp width, ConstraintLayout will maximize the width of the view and constrain the height of the view such that the resulting aspect ratio is 15:3 (5 x as wide as the height.)
So, given a screen width of, say, 500dp the width of media_image will become 500dp and the height will be 100dp. So, what happens when the actual height of the screen is something less than 100dp plus the height of the TextViews? You will see your problem. (Screen sizes are for example and do not reflect actual screen dimensions that I am aware of.)
The question now depends upon what you want to happen with the layout when the dimensions don't quite work as you have things laid out now.

Barrier doesn't set to referenceIds in constraint layout?

hey last few days I am exploring about the constraint layout.the concept of barrier I can understand but when i implement I can't get the correct output.
I want to set the barrier in the right direction to reference Id's. But barrier doesn't work.it should set for the views which are nameLabel and passionLabel. please help me. thank you in advance. This is the current output
<?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/activity_main_barriers"
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:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="#string/barriers"
android:textColor="#color/black"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="149dp"
android:layout_marginTop="8dp"
android:scaleType="centerCrop"
android:src="#drawable/arun"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:fontFamily="#font/roboto_bold"
android:text="Arun Pandian"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.032"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header" />
<!--#string/hobbies-->
<TextView
android:id="#+id/passionLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:labelFor="#+id/etPassion"
android:text="#string/passion"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_toBaselineOf="#+id/etPassion"
app:layout_constraintStart_toStartOf="#+id/nameLabel" />
<TextView
android:id="#+id/nameLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:fontFamily="#font/roboto_italic"
android:labelFor="#+id/cameraType"
android:text="#string/name"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_creator="1"
app:layout_constraintBaseline_toBaselineOf="#+id/etName"
app:layout_constraintLeft_creator="1"
app:layout_constraintStart_toStartOf="#+id/title"
app:layout_editor_absoluteX="16dp"
app:layout_editor_absoluteY="189dp"
tools:layout_constraintBaseline_creator="0"
tools:layout_constraintLeft_creator="0" />
<EditText
android:id="#+id/etPassion"
android:layout_width="217dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="textPersonName"
android:text="Developing softwares"
app:layout_constraintEnd_toEndOf="#+id/etName"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintStart_toStartOf="#+id/etName"
app:layout_constraintTop_toBottomOf="#+id/etName"
app:layout_editor_absoluteX="73dp"
app:layout_editor_absoluteY="225dp"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="0" />
<EditText
android:id="#+id/etName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:layout_marginEnd="148dp"
android:inputType="textPersonName"
android:text="Arun Pandian"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/tvName"
app:layout_constraintTop_toBottomOf="#+id/title"
tools:layout_constraintLeft_creator="1"
tools:layout_constraintRight_creator="1"
tools:layout_constraintTop_creator="0" />
<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="nameLabel,passionLabel"
tools:layout_editor_absoluteX="411dp" />
</android.support.constraint.ConstraintLayout>

Try this:
you have to give both edittext start constraint to barrier.
Also when I see in My android studio xml my output is same as you post in your question image. check http://prntscr.com/mkdtgb
But when I see in device it's working
<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/activity_main_barriers"
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:layout_marginTop="16dp"
android:layout_marginEnd="8dp"
android:text="barriers"
android:textColor="#android:color/black"
android:textSize="25sp"
android:textStyle="bold"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent" />
<ImageView
android:id="#+id/header"
android:layout_width="0dp"
android:layout_height="149dp"
android:layout_marginTop="8dp"
android:scaleType="centerCrop"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/textView" />
<TextView
android:id="#+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="15dp"
android:layout_marginTop="8dp"
android:layout_marginEnd="8dp"
android:text="Arun Pandian"
android:textColor="#color/colorPrimaryDark"
android:textSize="24sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="#+id/header" />
<!--#string/hobbies-->
<TextView
android:id="#+id/passionLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:labelFor="#+id/etPassion"
android:text="passios"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_toBaselineOf="#+id/etPassion"
app:layout_constraintStart_toStartOf="#+id/nameLabel" />
<EditText
android:id="#+id/etPassion"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
android:ems="10"
android:inputType="textPersonName"
android:layout_marginStart="16dp"
android:text="Developing softwares"
app:layout_constraintEnd_toEndOf="#+id/etName"
app:layout_constraintStart_toEndOf="#+id/barrier2"
app:layout_constraintTop_toBottomOf="#+id/etName" />
<TextView
android:id="#+id/nameLabel"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="8dp"
android:labelFor="#+id/cameraType"
android:text="namegfhfgdfgdfgdfgdfgdfgdf"
android:textColor="#color/colorPrimaryDark"
android:textSize="15sp"
app:layout_constraintBaseline_toBaselineOf="#+id/etName"
app:layout_constraintStart_toStartOf="parent" />
<EditText
android:id="#+id/etName"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginStart="16dp"
android:layout_marginTop="16dp"
android:inputType="textPersonName"
android:text="Arun Pandian"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="#+id/barrier2"
app:layout_constraintTop_toBottomOf="#+id/title" />
<android.support.constraint.Barrier
android:id="#+id/barrier2"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
app:barrierDirection="end"
app:constraint_referenced_ids="nameLabel,passionLabel" />
</android.support.constraint.ConstraintLayout>

I resolved this issue by updating the ConstraintLayout library
From
implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha2'
To this
implementation 'com.android.support.constraint:constraint-layout:2.0.0-alpha3'

I had a similar issue when using
implementation 'com.android.support.constraint:constraint-layout:1.1.3'
The same code was working in one project but not in another, both using the same version of the constraint-layout
If it works on device and but not in the layout editor, then try to force refresh the layout in the editor

This seems to be a rendering bug in the Preview in Android Studio 3.3.
The barrier will works at runtime on the emulator.

Constraint Layout viewed on xml design view is not same when run on a device

I'm using constraint layout to minimize use of LinearLayouts but I can't understand why what I see on preview is not what it actually looks like when run on an emulator or on a physical device.
This is preview layout
this is what looks like when run on a device
this is my xml:
<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/conts"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="#android:color/white"
tools:layout_editor_absoluteX="0dp"
tools:layout_editor_absoluteY="89dp">
<ImageView
android:id="#+id/iv_header"
android:layout_width="379dp"
android:layout_height="148dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="50dp"
android:layout_marginRight="50dp"
android:layout_marginStart="8dp"
android:layout_marginTop="5dp"
android:paddingTop="5dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toTopOf="#+id/tvPg1_2"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/conts"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.0"
app:layout_constraintVertical_weight="1"
app:srcCompat="#drawable/tokhang_header" />
<TextView
android:id="#+id/tvPg1_0"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginBottom="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="8dp"
android:layout_marginTop="0dp"
android:text="As of"
android:textColor="#android:color/black"
android:textSize="18sp"
android:textStyle="bold"
app:layout_constraintBottom_toBottomOf="#+id/iv_header"
app:layout_constraintHorizontal_bias="0.499"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintVertical_bias="0.782"
android:shadowColor="#FFFF4444"
android:shadowDx="-2"
android:shadowDy="-2"
android:shadowRadius="1"/>
<TextView
android:id="#+id/tvPg1_1"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="150dp"
android:layout_marginStart="8dp"
android:background="#drawable/tokang_pg1_1antidrugopn"
android:gravity="top|center"
android:paddingLeft="55dp"
android:text="700"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textScaleX="1"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/tvPg1_2"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/iv_header"
app:layout_constraintVertical_weight="1"
android:shadowColor="#FFFF4444"
android:shadowDx="-2"
android:shadowDy="-2"
android:shadowRadius="1"/>
<TextView
android:id="#+id/tvPg1_2"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="150dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/tokang_pg1_2drugpers"
android:gravity="top|center"
android:paddingLeft="25dp"
android:text="700"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textScaleX="1"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/tvPg1_3"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPg1_1"
app:layout_constraintVertical_weight="1"
android:shadowColor="#FFFF4444"
android:shadowDx="-2"
android:shadowDy="-2"
android:shadowRadius="1"/>
<TextView
android:id="#+id/tvPg1_3"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="0dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="8dp"
android:layout_marginRight="150dp"
android:layout_marginStart="8dp"
android:background="#drawable/tokang_pg1_3drugpersdied"
android:gravity="top|center"
android:paddingLeft="10dp"
android:text="700"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textScaleX="1"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/tvPg1_4"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPg1_2"
app:layout_constraintVertical_weight="1"
android:shadowColor="#FFFF4444"
android:shadowDx="-2"
android:shadowDy="-2"
android:shadowRadius="1"/>
<TextView
android:id="#+id/tvPg1_4"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_marginBottom="8dp"
android:layout_marginEnd="8dp"
android:layout_marginLeft="150dp"
android:layout_marginRight="8dp"
android:layout_marginStart="8dp"
android:background="#drawable/tokang_pg1_4housevisited"
android:gravity="top|center"
android:paddingLeft="35dp"
android:paddingTop="15dp"
android:text="700"
android:textAlignment="center"
android:textColor="#android:color/black"
android:textScaleX="1"
android:textSize="30sp"
android:textStyle="bold"
app:layout_constraintBottom_toTopOf="#+id/imageView2"
app:layout_constraintHorizontal_bias="0.496"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPg1_3"
app:layout_constraintVertical_weight="1"
android:shadowColor="#FFFF4444"
android:shadowDx="-2"
android:shadowDy="-2"
android:shadowRadius="1"/>
<ImageView
android:id="#+id/imageView2"
android:layout_width="match_parent"
android:layout_height="122dp"
android:layout_marginEnd="0dp"
android:layout_marginLeft="0dp"
android:layout_marginRight="0dp"
android:layout_marginStart="8dp"
android:scaleType="fitXY"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintLeft_toLeftOf="parent"
app:layout_constraintRight_toRightOf="parent"
app:layout_constraintTop_toBottomOf="#+id/tvPg1_4"
app:layout_constraintVertical_bias="1.0"
app:layout_constraintVertical_weight="1"
app:srcCompat="#drawable/tokhang_footer" />
</android.support.constraint.ConstraintLayout>
and everytime i open the xml the layout changes or gets misaligned that i have to undo with me doing any changes. It seems constrain layout is unstable or it's me unstable being a newbie.
Do you have an idea of what's happening ?
Thanks in advance for your help.