Wrap_content view inside a ConstraintLayout stretches outside the screen
Updated (ConstraintLayout 1.1.+)
Use app:layout_constrainedWidth="true"
with android:layout_width="wrap_content"
Previously (deprecated):
app:layout_constraintWidth_default="wrap"
with android:layout_width="0dp"
Outdated: See better answer
No, you cannot do what you want with ConstraintLayout as it is today (1.0 beta 4):
wrap_content
only asks the widget to measure itself, but won't limit its expansion against eventual constraintsmatch_constraints
(0dp) will limit the size of the widget against the constraints... but will match them even ifwrap_content
would have been smaller (your first example), which isn't what you want either.
So right now, you are out of luck for that particular case :-/
Now... we are thinking about adding extra capabilities to match_constraints
to deal with this exact scenario (behaving as wrap_content
unless the size ends being more than the constraints).
I cannot promise that this new feature will make it before the 1.0 release though.
Edit: we did add this capability in 1.0 with the attribute app:layout_constraintWidth_default="wrap"
(with width set to 0dp). If set, the widget will have the same size as if using wrap_content, but will be limited by constraints (i.e. it won't expand beyond them)
UpdateNow those tags are deprecated, instead use layout_width="WRAP_CONTENT" and layout_constrainedWidth="true".
Yep, as mentioned in answer given by Nikolas Roard you should add app:layout_constraintWidth_default="wrap"
and set width to 0dp. And to align your bubble right you should set 1.0 for layout_constraintHorizontal_bias
.
Here's the final source code:
<android.support.constraint.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/chat_message" android:layout_width="0dp" android:layout_height="wrap_content" android:padding="16dp" android:layout_marginTop="8dp" android:layout_marginStart="64dp" android:layout_marginEnd="8dp" android:layout_marginBottom="8dp" app:layout_constraintHorizontal_bias="1.0" app:layout_constraintWidth_default="wrap" app:layout_constraintTop_toTopOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintBottom_toBottomOf="parent" android:background="@drawable/chat_message_bubble" android:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum." /></android.support.constraint.ConstraintLayout>
As a result it looks like: