Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Allow TextView to grow until a certain point in constraint layout

There is TextView1 and TextView2. TextView2 should float on the right side of TextView1. TextView1 should grow to the right as long as the total width of both text views do not make TextView2 overlap with the box on the right. When this happens, TextView1 should wrap to a second line.

When there is only one TextView, this is achievable by setting TextView's width to 0dp and constraining the size to the box. But with two text views I don't know how to achieve this.

enter image description here

like image 297
Lucas Avatar asked May 14 '20 17:05

Lucas


People also ask

What is 0dp in constraint layout?

Widgets dimension constraints Using 0dp , which is the equivalent of " MATCH_CONSTRAINT "

Can we use LinearLayout in ConstraintLayout?

Most of what can be achieved in LinearLayout and RelativeLayout can be done in ConstraintLayout. However, learning the basics of LinearLayout and RelativeLayout is important before trying to understand how to use it with ConstraintLayout.

Can we use RelativeLayout inside ConstraintLayout?

You can't use relative layout directly inside constraint layout. Intention of ConstraintLayout is to optimize and flatten the view hierarchy of your layouts by applying some rules to each view to avoid nesting. Basically Constraint Layout reduces nesting.

What is layout_constrainedHeight?

app:layout_constrainedHeight="true" will reduce the size of a view according to it's constraints.


1 Answers

You can achieve this with the use of the following attributes:

  • app:layout_constraintHorizontal_bias="0": makes sure the first text view leaves no space on the left.
  • app:layout_constraintHorizontal_chainStyle="packed": removes spacing between items in the text view chain.
  • app:layout_constrainedWidth="true": allows the use of wrap_content on the text view while still allowing to wrap if text is too long.

Here's the layout:

<TextView
    android:id="@+id/text_view_1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constrainedWidth="true"
    app:layout_constraintEnd_toStartOf="@id/text_view_2"
    app:layout_constraintHorizontal_chainStyle="packed"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Very long text in this text"
    app:layout_constraintHorizontal_bias="0"
    />

<TextView
    android:id="@+id/text_view_2"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_margin="8dp"
    app:layout_constraintEnd_toStartOf="@id/box"
    app:layout_constraintStart_toEndOf="@id/text_view_1"
    app:layout_constraintTop_toTopOf="parent"
    tools:text="Text"
    />

<View
    android:id="@+id/box"
    android:layout_width="100dp"
    android:layout_height="100dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintTop_toTopOf="parent"
    />

I suggest you try removing each attribute to see what effect they have.

like image 164
Nicolas Avatar answered Oct 25 '22 17:10

Nicolas