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.
