ConstraintLayout set constraint priorities?

Question

I'm trying to implememnt the following layout in Android using ConstraintLayout.

However, the two username TextViews need to expand until they reach the max width, which depends on each phone's screen.

The first username should be visible, as much as possible, it should have an 8dp margin and then the "reply arrow" which has a fixed width, and then, if it fits, as much of the "reply to username" TextView should be visible. The dot separator, date and likes TexViews should awlays be visible, at wrap_content.

In iOS we have managed to implement such a layout by using content hugging and content compression resistance priorities. Are there similar features in Android?

Here's my XML layout for reference:

<?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/newspaperLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical">

<View
    android:id="@+id/commentDepthView"
    android:layout_width="2dp"
    android:layout_height="0dp"
    android:layout_marginStart="@dimen/default_margin"
    android:background="@color/blueDark"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />

<TextView
    android:id="@+id/commentAuthorTextView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/default_margin"
    android:layout_marginTop="@dimen/default_margin"
    android:ellipsize="end"
    android:lines="1"
    android:textColor="@color/blue"
    android:textStyle="bold"
    app:layout_constraintBottom_toTopOf="@id/commentTextView"
    app:layout_constraintEnd_toStartOf="@id/replyToArrowImageView"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toEndOf="@+id/commentDepthView"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Username"/>

<ImageView
    android:id="@+id/replyToArrowImageView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/default_margin"
    android:layout_marginEnd="8dp"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@id/commentAuthorTextView"
    app:layout_constraintEnd_toStartOf="@id/commentReplyToTextView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/commentAuthorTextView"
    app:layout_constraintTop_toTopOf="@id/commentAuthorTextView"
    app:srcCompat="@drawable/reply_to_arrow"/>

<TextView
    android:id="@+id/commentReplyToTextView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/default_margin"
    android:ellipsize="end"
    android:lines="1"
    android:textColor="@color/blue"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@+id/commentAuthorTextView"
    app:layout_constraintEnd_toStartOf="@+id/dotSeparatorTextView"
    app:layout_constraintHorizontal_bias="0.0"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toEndOf="@id/replyToArrowImageView"
    app:layout_constraintTop_toTopOf="@id/commentAuthorTextView"
    tools:text="Reply To Username"
    />

<TextView
    android:id="@+id/dotSeparatorTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/default_margin"
    android:layout_marginEnd="8dp"
    android:text="@string/dot_separator"
    android:textStyle="bold"
    app:layout_constraintBottom_toBottomOf="@id/commentAuthorTextView"
    app:layout_constraintEnd_toStartOf="@+id/commentDateTextView"
    app:layout_constraintHorizontal_bias="0.5"
    app:layout_constraintStart_toEndOf="@+id/commentReplyToTextView"
    app:layout_constraintTop_toTopOf="@id/commentAuthorTextView"/>

<TextView
    android:id="@+id/commentDateTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/default_margin"
    android:layout_marginEnd="@dimen/default_margin"
    app:layout_constraintBottom_toBottomOf="@+id/commentAuthorTextView"
    app:layout_constraintEnd_toStartOf="@id/commentLikesTextView"
    app:layout_constraintStart_toEndOf="@id/dotSeparatorTextView"
    app:layout_constraintTop_toTopOf="@+id/commentAuthorTextView"
    tools:text="1/1/1970"/>

<TextView
    android:id="@+id/commentLikesTextView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/default_margin"
    android:layout_marginEnd="@dimen/default_margin"
    app:layout_constraintBottom_toBottomOf="@+id/commentAuthorTextView"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/commentDateTextView"
    app:layout_constraintTop_toTopOf="@+id/commentAuthorTextView"
    tools:text="0 Likes"/>


<TextView
    android:id="@+id/commentTextView"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="@dimen/default_margin"
    android:layout_marginTop="@dimen/default_margin"
    android:layout_marginEnd="@dimen/default_margin"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/commentDepthView"
    app:layout_constraintTop_toBottomOf="@+id/commentAuthorTextView"
    tools:text="This is test comment that is really relly long. Well not that long, but it's long enough, don't you think?"/>

<View
    android:id="@+id/separatorView"
    android:layout_width="0dp"
    android:layout_height="0.5dp"
    android:layout_marginStart="@dimen/default_margin"
    android:layout_marginTop="@dimen/default_margin"
    android:layout_marginEnd="@dimen/default_margin"
    android:background="@color/grey"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toEndOf="@id/commentDepthView"
    app:layout_constraintTop_toBottomOf="@+id/commentTextView"/>

</androidx.constraintlayout.widget.ConstraintLayout>

Any suggestion is welcome, even using a different layout than ConstraintLayout. Thank you very much.

Answer 1

Give first username

android:layout_width="0dp" 
app:layout_constraintHorizontal_bias="0"
app:layout_constraintWidth_default="wrap"

and to second android:layout_width="0dp"

rest is wrap_content and chain them