CODEWITHSUNDEEP
androidandroid-constraintlayout
Adam
Adam

Reputation: 3013

ConstraintLayout with growing TextViews claiming equal space if needed

Is it possible to in ConstrainLayout have two textviews constrained such that they take 50% of the horizontal space each if they need it, and if they don't the other grows to fill the space.

A Correct: When texts are short the textViews do not interfere with eachother. equal

B Correct: The short left textView yields space to the longer right one leftsmall

C Correct: Share horizontal space equally and grow vertically

correct

D Incorrect: Right textView grows on expense of the left textView.

rightlonger

E Incorrect: Right textView grows vertically rather than filling available horizontal space.

enter image description here

I've tried a lot of things. It think layout_width="wrap_content" or layout_constraintWidth_default="wrap" is a must since it is the textViews' only way to communicate how much space it wants.

Experimented with:

layout_constrainedWidth="true/false"
layout_constraintWidth_default="spread/wrap"
layout_constraintWidth_max="wrap"
layout_constraintHorizontal_weight="1" // with 0dp as width

Experimentation mostly with the textViews in a horizontal chain, since there is a symmetry in the problem I think a symmetric solution makes sense.

Has anyone managed this or is it just impossible? I do not know why it behaves as it does with the second element in the chain being 'heavier' than the first one forcing it to be the only one to grow vertically.

Upvotes: 13

Views: 2706

Answers (3)

CoderUni
CoderUni

Reputation: 6164

To solve your problem, you have to set the width of the TextViews to 0dp. I added a Barrier to the TextView at the left so that whenever the right TextView needs space, it will take the space of the left TextView. Try this code:

<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/textView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TextView"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent" />

    <TextView
            android:id="@+id/textView3"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:text="TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest"
            app:layout_constraintBottom_toBottomOf="parent"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/text_barrier"
            app:layout_constraintTop_toTopOf="parent" />

    <androidx.constraintlayout.widget.Barrier
            android:id="@+id/text_barrier"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            app:barrierDirection="end"
            app:constraint_referenced_ids="textView1" />
</androidx.constraintlayout.widget.ConstraintLayout>

cha

Upvotes: 3

Brandon McAnsh
Brandon McAnsh

Reputation: 1031

Barriers is what you are looking for in combination with chaining. 

<TextView
    android:id="@+id/textView1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constrainedWidth="true"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintEnd_toStartOf="@id/barrier"/>

<androidx.constraintlayout.widget.Barrier
    android:id="@+id/barrier"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:barrierDirection="start"
    app:constraint_referenced_ids="textView2" />

<TextView
    android:id="@+id/textView2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constrainedWidth="true"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent" 
    app:layout_constraintStart_toEndOf="@id/barrier"/>

Upvotes: 2

Shweta Chauhan
Shweta Chauhan

Reputation: 6981

Use Constraint layout horizinatal chain property.

enter image description here

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


    <TextView
        android:id="@+id/title"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textColor="#655643"
        android:textSize="15sp"
        android:textStyle="bold"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="5dp"
        android:layout_marginStart="5dp"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_chainStyle="spread"
        app:layout_constraintEnd_toStartOf="@+id/subtitle"
        app:layout_constraintStart_toStartOf="parent"
        tools:text="Dream Destinations sfsd sdfsdfdsfsdfsdfsdfsdfs" />

    <TextView
        android:id="@+id/subtitle"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:textColor="#999999"
        android:textSize="13sp"
        android:layout_marginStart="5dp"
        android:layout_marginEnd="5dp"
        app:layout_constraintTop_toTopOf="@+id/title"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@+id/title"
        tools:text="by Someone, 921 discoveriesdfdsfdsfsdffsfsfsdf" />
</androidx.constraintlayout.widget.ConstraintLayout>

Upvotes: 0

Related Questions