CODEWITHSUNDEEP
androidandroid-constraintlayout
Pupkin
Pupkin

Reputation: 1111

One Textview overlaps another in ConstraintLayout

I have ConstraintLayout with two TextView inside: 

<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="wrap_content">
    <TextView
        android:id="@+id/first"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/second"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/first"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>

I want to place the first one at the top left-corner of parent container and to place the second one at the top-right parent's corner. But both textviews can have text with any length. And when first one has very long text it overlaps the second textview. I can solve this problem by wrapping both textviews in LinearLayout. But this way seems to me inelegant. Maybe there is another way to do it? I mean with ConstraintLayout's feautures

Upvotes: 0

Views: 1715

Answers (5)

Nikos Hidalgo
Nikos Hidalgo

Reputation: 3766

First of all, remove the wrap_content from your widths as this makes the left/right constraints irrelevant. Use 0dp in its place to make it adhere to the constraints' rules.

Then create a horizontal chain between the views and have it as spread, so that the views don’t overlap at any point and they also stay at the edges of the screen at all times.

Finally, align the texts accordingly so that the left one aligns to the start of the view and the right one aligns to the end. In the example below you see that no matter how long the text is, the views don’t overlap and stick to their sides.

NOTE: It is considered better practice to use start/end constraints (as in my code) instead of left/right in order to cater for devices with different text direction. You can also modify the code below by adding the appropriate margins to have the text farther away from the edges of the screen.

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

    <TextView
        android:id="@+id/first"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textAlignment="viewStart"
        app:layout_constraintEnd_toStartOf="@+id/second"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@tools:sample/lorem/random" />

    <TextView
        android:id="@+id/second"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textAlignment="viewEnd"
        app:layout_constrainedWidth="true"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintStart_toEndOf="@id/first"
        app:layout_constraintTop_toTopOf="parent"
        tools:text="@tools:sample/lorem/random" />

</androidx.constraintlayout.widget.ConstraintLayout>

enter image description here

Upvotes: 3

Radhika Gami
Radhika Gami

Reputation: 91

 <androidx.constraintlayout.widget.ConstraintLayout
                android:layout_width="match_parent"
                android:layout_height="match_parent">

          <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/tvFirst"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toStartOf="@+id/tvSecond"
                    app:layout_constraintStart_toStartOf="parent"
                    app:layout_constraintTop_toTopOf="parent" />

                <androidx.appcompat.widget.AppCompatTextView
                    android:id="@+id/tvSecond"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    app:layout_constraintEnd_toEndOf="parent"
                    app:layout_constraintStart_toEndOf="@+id/tvFirst"
                    app:layout_constraintTop_toTopOf="parent" />

            </androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

Azay Gupta
Azay Gupta

Reputation: 311

<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="wrap_content">
    <TextView
        android:id="@+id/first"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="0dp"
        app:layout_constraintRight_toLeftOf="@+id/second"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/second"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/first"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

Milan Kundacina
Milan Kundacina

Reputation: 319

<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="wrap_content">
    <TextView
        android:id="@+id/first"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />
    <TextView
        android:id="@+id/second"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toRightOf="@+id/first"
        app:layout_constraintRight_toRightOf="parent"
        android:gravity="right"
        android:layout_width="0dp"
        android:layout_height="wrap_content" />
</androidx.constraintlayout.widget.ConstraintLayout>

This way second TextView won't overlap first one for sure, but there might happen that first is too long so that there is no place for second one. If that could be the case I would recommend setting maxWidth to first TextView, so that in worst case scenario there is some space left for second TextView.

Also I added graviti to second one to keep text on right side of TextView.

Upvotes: 0

mehul chauhan
mehul chauhan

Reputation: 1802

use this

 <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="wrap_content">
    <TextView
        android:id="@+id/first"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="chauhan"/>
    <TextView
        android:id="@+id/second"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="mehul"/>
</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

Related Questions