How to align view to the end of constraint layout along with a start constraint

user_4176416 0
Viewed 2864

I have a constraint layout with one text view on left side and other on the right side. I want the right text view to be aligned to the end. Right text view should also be able to take the available space on left. It should ellipsize at end if space is not enough.

I have tried this using following xml code:

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="@dimen/dimen_16dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:text="Title"
        android:textStyle="bold"
        android:layout_marginEnd="@dimen/dimen_24dp"/>

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Subtitle"/>

</androidx.constraintlayout.widget.ConstraintLayout>

This works great for small text in the right text view. But if the text in the right text view is large it overlaps the left text view. I tried adding app:layout_constraintStart_toEndOf="@id/title" to the right text view, but it causes two problems:

  • If the text is small, text in right text view is centered in the available space but I want it to be right aligned.
  • If the text is large, it does not ellipsize properly

How can this be achieved without changing parent layout to linear layout?

android-constraintlayout android-xml textview android
2 Answers

1st make subtitle textview width = 0dp and give it's start constraint to end of title textview and android:textAlignment="textEnd"

2nd title textview end constraint to start of subtitle textview

    <?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="24dp"
        android:text="Title"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@+id/subtitle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="5dp"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle Subtitle"
        android:textAlignment="textEnd"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/title"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

enter image description here

user_60214690

Is this what you are looking for.

Now the text on left does not overlap right now.

<?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"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16dp">

    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="24dp"
        android:text="Large text which could overlap"
        android:textSize="28sp"
        android:textStyle="bold"
        app:layout_constraintEnd_toStartOf="@id/subtitle"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        android:text="Subtitle"
        android:textSize="28sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

Let me know how it goes

user_77251030
Related