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.
Widgets dimension constraints Using 0dp , which is the equivalent of " MATCH_CONSTRAINT "
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.
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.
app:layout_constrainedHeight="true" will reduce the size of a view according to it's constraints.
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.
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