android constraintlayout, ellipse does not work as expected

Question

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>

Answer 1

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>