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:
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):
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!
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.
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.
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.
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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With