CODEWITHSUNDEEP
androidtextviewandroid-xmlandroid-constraintlayout
Tushar Kathuria
Tushar Kathuria

Reputation: 655

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

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:

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

Upvotes: 4

Views: 6287

Answers (2)

Shweta Chauhan
Shweta Chauhan

Reputation: 6981

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

Upvotes: 6

Raj
Raj

Reputation: 1595

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

Upvotes: 0

Related Questions