M-WaJeEh :
I am trying to make the following seemingly simple yet tricky layout using ConstraintLayout
.
With longer title:
I have tried following code:
<androidx.constraintlayout.widget.ConstraintLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp">
<TextView
android:id="@+id/title"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="April Ludgate"
android:textColor="#000"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintEnd_toStartOf="@+id/threadType"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="@+id/threadType"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:text="SMS"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="@+id/title"
app:layout_constraintEnd_toStartOf="@+id/dummy"
app:layout_constraintStart_toEndOf="@+id/title"
app:layout_constraintTop_toTopOf="@+id/title"
app:layout_constraintWidth_default="wrap" />
<View
android:id="@+id/dummy"
android:layout_width="0dp"
android:layout_height="0dp"
android:layout_weight="1"
app:layout_constraintBottom_toBottomOf="@+id/title"
app:layout_constraintEnd_toStartOf="@+id/date"
app:layout_constraintStart_toEndOf="@+id/threadType"
app:layout_constraintTop_toTopOf="@+id/title"
app:layout_constraintWidth_default="spread" />
<TextView
android:id="@+id/date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="4:18 PM"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="@+id/title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toEndOf="@+id/dummy"
app:layout_constraintTop_toTopOf="@+id/title"
app:layout_constraintWidth_default="wrap" />
</androidx.constraintlayout.widget.ConstraintLayout>
Which give me this:
But quickly fall apart with a longer name:
Is there a way to achieve this via ConstraintLayout
just in xml? I am willing to switch to another layout if it accomplished what I want.
Md. Asaduzzaman :
Use constraintHorizontal_chainStyle
to packed in title with constraintHorizontal_bias
to 0.0 like below:
<androidx.constraintlayout.widget.ConstraintLayout android:layout_width="match_parent"
android:layout_height="wrap_content"
android:padding="16dp"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:android="http://schemas.android.com/apk/res/android">
<TextView
android:id="@+id/title"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:ellipsize="end"
android:maxLines="1"
android:text="April Ludgate April Ludgate April Ludgate April Ludgate"
android:textColor="#000"
android:textSize="16sp"
android:textStyle="bold"
app:layout_constraintHorizontal_bias="0.0"
app:layout_constraintHorizontal_chainStyle="packed"
app:layout_constraintEnd_toStartOf="@+id/threadType"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="@+id/threadType"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:layout_marginLeft="4dp"
android:layout_marginRight="4dp"
android:text="SMS"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="@+id/title"
app:layout_constraintEnd_toStartOf="@+id/date"
app:layout_constraintStart_toEndOf="@+id/title"
app:layout_constraintTop_toTopOf="@+id/title"
app:layout_constraintWidth_default="wrap" />
<TextView
android:id="@+id/date"
android:layout_width="0dp"
android:layout_height="wrap_content"
android:text="4:18 PM"
android:textSize="12sp"
app:layout_constraintBottom_toBottomOf="@+id/title"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="@+id/title"
app:layout_constraintWidth_default="wrap" />
</androidx.constraintlayout.widget.ConstraintLayout>
Output:
- Short Text
- Long Text