Android Text Views overflowing and blocking each other out-CodePudding

I am having issues with 2 text views next to each other in a constraint layout. One is a title and one is a dummy "description" and the description ends up displaying off the right edge of the screen and also pushing the title off the left edge of the screen. What am I getting wrong with the layout, the description text needs to do more linebreaks to give the title and itself space to fit within the screen.

<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="wrap_content">

<TextView
    android:id="@ id/fillerContent"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toEndOf="@ id/label"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"/>

<TextView
    android:id="@ id/label"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_marginEnd="8dp"
    android:text="TextView"
    android:textSize="20sp"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toStartOf="@ id/fillerContent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"/>

edit 1: This view is an item in a recyclerlist.

CodePudding user response：

your problem is cause by a miss understood on the way that constraints layout work but more important like the attributes of width and height must be used to had a more responsive layout.

When you are using constraints layouts the ideal approach is that views attributes width and height has been set as 0dp, meaning that they will grow respecting the available space and the constraints assigned.

Here is a example of two approaches:

1. You could set the width to 0dp:

 <TextView
        android:id="@ id/fillerContent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="DESCRIPTION"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="1.0"
        app:layout_constraintStart_toEndOf="@ id/label"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.0"/>
    
    <TextView
        android:id="@ id/label"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="TextView"
        android:textSize="20sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toStartOf="@ id/fillerContent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

2. Or the equivalent with a little refactor:

     <TextView
        android:id="@ id/fillerContent"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginStart="8dp"
        android:text="DESCRIPTION DESCRIPTION"
        app:layout_constraintStart_toEndOf="@id/label"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@ id/label"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="8dp"
        android:text="Title "
        android:textSize="20sp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

CodePudding user response：

You're using wrap_contents in a chained ConstraintLayout. Judging by the layout, only the label needs to be at actual width, and fillerContent must take whatever space it can get horizontally. So, you can change the width like this:

<TextView
    android:id="@ id/fillerContent"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_marginStart="8dp"
    android:text="TextView"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toEndOf="@ id/label"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"/>

Set the filler layout_width to 0dp, and it should work.