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

Related searches

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!


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>

Constraint layout: Cannot separate elements and keep them all on , Based on that, here's what I have inside the constraint layout: <ListView These attribues are: app:layout_constrainedWidth="true" app:layout_constrainedHeight ="true" 2. As for the Barrier, How can I prevent a TextView in a ConstraintLayout Chain from pushing other TextViews beyond their constraints while using� Figure 1 Solution. Solved using Chains feature available in ConstraintLayout. A chain is a group of views that are linked to each other with bi-directional position constraints. For example


I needed a fix in the another answers.

And performs the following actions.

            <TextView
                android:id="@+id/first_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:ellipsize="end"
                android:maxLines="1"
                app:layout_constraintHorizontal_bias="0" <!-- if you want gravity left -->
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toStartOf="@id/second_tv"
                app:layout_constraintHorizontal_chainStyle="packed"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintWidth_default="wrap"
                tools:text="ABCDEFGHIJKLMNOPQRSTU" />

            <TextView
                android:id="@+id/second_tv"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_marginLeft="2dp"
                android:ellipsize="end"
                android:maxLines="1"
                app:layout_constraintBottom_toBottomOf="parent"
                app:layout_constraintEnd_toEndOf="parent"
                app:layout_constraintStart_toEndOf="@id/first_tv"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintWidth_default="wrap"
                tools:text="VWXYZ" />

How to proper align three TextViews horizontally with - android, ConstraintLayout> These are some cases using the sample layout None of the TextView is ellipsizing: The last TextView don't ellipsize and pushes the other all of the cases Using android:maxWidth="90dp" to prevent the TextView to grow, but The following XML places tv1 and iv1 in a packed chain constrained by the � A chain is a group of elements that are linked to each other with bi-directional position constraints. The following shows two elements that are constrained to each other, creating a horizontal chain. When you create a chain, you can position all of the elements as a group, andcenter all of your chained elements as if they were a single element.


In ConstraninLayout if you want set weight such as linearLayout's weight , you should set value between 0..1 in (layout_constraintWidth_percent):

 app:layout_constraintWidth_percent="1"
 or
 app:layout_constraintWidth_percent="0.5"

and also  connect the beginning and the end of component to each other:

 app:layout_constraintStart_toEndOf="@id/textView1"
 app:layout_constraintEnd_toStartOf="@id/textView2"

completed code:

  <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="match_parent">
    <TextView
        android:id="@+id/textView1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toStartOf="@id/textView2"
        app:layout_constraintWidth_percent="0.5"
        android:background="@color/yellow_light"
        android:text="This is a long text that showing in textview1.This textview is a expanded textview.if you don't set (android:maxLines='1'),the whole text will be show." />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/textView1"
        app:layout_constraintWidth_percent="1"
        android:background="@color/orange_dark"
        android:maxLines="1"
        android:text="This is a long text that showing in textview2 that set (android:maxLines='1')" />

</androidx.constraintlayout.widget.ConstraintLayout>

如何防止ConstraintLayout Chain中的TextView在使用 , 我的最终目标是在左对齐的水平链中有两个单行TextViews,这个水平链允许它们 如何防止ConstraintLayout Chain中的TextView在使用layout_constrainedWidth时超越其他TextView? How can I prevent a TextView in a ConstraintLayout Chain from pushing other TextViews beyond their constraints while using� The chain's "head" view (the left-most view in a horizontal chain and the top-most view in a vertical chain) defines the chain's style in XML. However, you can toggle between spread , spread inside , and packed by selecting any view in the chain and then clicking the chain button that appears below the view.


ConstraintLayout, You can constrain a widget on the horizontal and vertical axis: right, start and end sides; Vertical Axis: top, bottom sides and text baseline They all take a reference id to another widget, or the parent (which When a position constraint target's visibility is View. app:layout_constrainedWidth=”true|false”� When we are creating Android layouts, sometimes we encounter situations where the layout can change depending on the localisation. Here is a really simple example: Here we have three TextViews: textView1 and textView2 on the left; and textView3 on the right.


android, I want to set ConstraintLayout like this: enter image description here. I need to have fixed left and right constraints, size dimension ratio to be 1:1 and MainActivity"> <TextView android:id="@+id/textView" android:text="1" Chain from pushing other TextViews beyond their constraints while using layout_constrainedWidth? A view ID is first declared in the layout by using the + prefix to the id resource type: @+id/background. This does not have to be an attribute of the view which it identifies. In other words it is possible for a view to reference another view which appears later in the layout provided it uses the + prefix in the id reference. That ensures that


The guideline itself has an app:orientation="vertical" attribute, which obviously declares a vertical guideline (we could also specify a value of horizontal here). It also has app:layout_constraintGuide_begin="16dp" which positions the guideline 16dp from the start edge of the parent ConstraintLayout - once again, I’ll use ‘start’ rather than ‘left’.