Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I prevent a TextView in a ConstraintLayout Chain from pushing other TextViews beyond their constraints while using layout_constrainedWidth?

My end goal is to have two single-line TextViews in a left-aligned, packed horizontal chain that allows both of them to grow to fill the remaining space, splitting it evenly if necessary, ellipsizing when there's not space.

Visual Aid: enter image description here

And here's the layout code that I've tried to accomplish this:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:padding="16dp">

    <TextView
        android:id="@+id/textView1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:ellipsize="end"
        android:maxLines="1"
        tools:text="@tools:sample/lorem"
        app:layout_constrainedWidth="true"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textView2"
        app:layout_constraintHorizontal_chainStyle="packed"
        app:layout_constraintHorizontal_bias="0"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="4dp"
        android:ellipsize="end"
        android:maxLines="1"
        tools:text="@tools:sample/lorem"
        app:layout_constrainedWidth="true"
        app:layout_constraintStart_toEndOf="@id/textView1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintBottom_toBottomOf="parent" />

</android.support.constraint.ConstraintLayout>

As you can see, I've laid out two textviews in a horizontal chain. I've got the chain style set to packed so that they stay together. I've got the horizontal bias set to 0 so that the chain is left aligned. I've got the width set to wrap_content so that they don't stretch when the text is short, and I've also set app:layout_constrainedWidth="true" so that they don't go past their bounds when the text is long. This works almost exactly how I want except when the text in textView2 grows. As textView1 grows, it pushes textView2 to the right until it hits its constraint, at which point it ellipsizes (as expected/desired), but the same is not true for textview2. As textView2 grows, it stretches to fill the room to its right, but once it hits its constraint, instead of ellipsizing, it keeps stretching and starts to push textView1 to the left until it is no longer visible at all.

Visual aid (actual behavior):

enter image description here

I've tried to use things like setting layout_constraintHorizontal_weight to .5 on each view but that has no effect unless I change both view widths to 0dp (match_constraints) which breaks the scenario where both views have short text (it adds extra space between the two text views).

What it feels like is that when you combine width=wrap_content with layout_constrainedWidth=true, the weight values are ignored. Is this just a limitation of ConstraintLayout? I've spent a lot of time trying to figure out a way to make this work and right now it doesn't seem like it's possible. I've fallen back to using a LinearLayout and making some design compromises, but I'd really like to get this working if anyone has any ideas. Thanks!

like image 273
user1601456 Avatar asked Jul 13 '18 23:07

user1601456


People also ask

What is bias in Constraint layout?

Bias, in terms of ConstraintLayout , means "if there is extra room, slide the widget in this direction along the axis". The default bias is 0.5, meaning that the widget is centered in the available space.

What does infer constraints do in Android Studio?

Instead of adding constraints to every view as you place them in the layout, you can move each view into the positions you desire, and then click Infer Constraints to automatically create constraints. Infer Constraints scans the layout to determine the most effective set of constraints for all views.

How to Add constraints in Constraint layout in Android Studio?

Add constraints to the parent layout To add a constraint to the left edge of the ImageView , click and hold the constraint handle and drag the line to the left edge of the parent layout. To add the right edge constraint for the ImageView , drag from the constraint handle to the right edge of the parent layout.

What is baseline in Constraint layout Android?

It's used to set the top, left, bottom and right constraints of the view. Baseline handle - It's used to align the baseline with another textview in the layout. Let's assign the constraints on the TextView and look into the xml code of it.


1 Answers

If someone is still looking for an answer, I think the following code will help.

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.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">

    <TextView
        android:id="@+id/text1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="0.5"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/text2"
        app:layout_constraintHorizontal_chainStyle="packed"
        android:background="#ff0000"
        android:text="This is what you are looking for ?"
        />

    <TextView
        android:id="@+id/text2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_max="wrap"
        app:layout_constraintWidth_percent="1"
        android:maxLines="1"
        android:ellipsize="end"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toEndOf="@id/text1"
        app:layout_constraintEnd_toEndOf="parent"
        android:background="#ee0"
        android:text="This is a Long Text TextView2 And not something else"
        />

</android.support.constraint.ConstraintLayout>
like image 64
Oren Zakay Avatar answered Oct 19 '22 17:10

Oren Zakay