9

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

1
  • Did my answer help you?
    – Nicolas
    Commented Jun 13, 2020 at 16:02

1 Answer 1

17

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.