A

7

196

I am trying to implement a simple chat bubble using a ConstraintLayout. This is what I am trying to achieve:

However, wrap_content does not do what I want. It respects the margins, but expands outside of the view bounds. Here is my layout:

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout   xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <TextView
        android:id="@+id/chat_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="16dp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintHorizontal_bias="0"
        tools:background="@drawable/chat_message_bubble"
        tools:text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sodales accumsan tortor at bibendum."
        android:layout_marginStart="64dp"
        android:layout_marginLeft="64dp"
        android:layout_marginEnd="32dp"
        android:layout_marginRight="32dp"
        android:layout_marginTop="8dp"
        android:layout_marginBottom="8dp" />
</android.support.constraint.ConstraintLayout>

This renders as follows:

I am using com.android.support.constraint:constraint-layout:1.0.0-beta4.

Am I doing something wrong? Is it a bug or just an unintuitive behavior? Can I achieve the proper behavior using a ConstraintLayout (I know I can use other layouts, I am asking about ConstrainLayout specifically).

Atalante answered 28/11, 2016 at 18:21 Comment(7)

can you post the text view along with its parent constraint layout? as you know, attributes of parent layout has great impact on child – Anastassia 28/11, 2016 at 18:26

By the way, in your case i guess horizontal bias is the culprit. try removing layoutright to right of and bias – Anastassia 28/11, 2016 at 18:28

Horizontal bias is necessary, otherwise if the bubble is centered. Without layout right to right the right margin won't be taken into account, which is not what we want. I tried to remove them, as you advised, but it didn't help. – Atalante 29/11, 2016 at 14:48

problem is horizontal bias 0 for sure. I will check for the possible solutions and post it asap as I am also working with something similar on constraint layout. – Anastassia 29/11, 2016 at 17:38

@MarcinJedynak sorry if this is off topic, but where did you get the chat bubble? Looks great. – There 14/9, 2017 at 12:17

@There chat bubble comes from tools:background="@drawable/chat_message_bubble". To implement it you have to create chat_message_bubble.xml file in drawable folder then add this code:

<shape xmlns:android="http://schemas.android.com/apk/res/android">     <solid android:color="#FB4382"/>     <corners android:radius="10dip"/> </shape>

– Accumulate 4/10, 2017 at 9:4

For me this is not working on chained views. So one view have wrap content, then get all space of whole chain screen. :( – Lewellen 10/9, 2021 at 3:45

D

300

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 constraints
match_constraints (0dp) will limit the size of the widget against the constraints... but will match them even if wrap_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)

Update Now those tags are deprecated, instead use layout_width="WRAP_CONTENT" and layout_constrainedWidth="true".

Diu answered 30/11, 2016 at 6:5 Comment(16)

But this wrap_content behavior might be counterintuitive as it differs from what you would expect from classic layouts, like LinearLayout. Is it intended? Could you give me an example scenario where this approach is better? – Atalante 30/11, 2016 at 9:49

It's intended (it allows us to measure less), but that's not set in stone. We might either add more flexibility on match_constraints or change the way we deal with wrap_content. – Diu 30/11, 2016 at 19:13

Thats a super issue for me. I can't use TextView with compound drawables right now because if I set it to match_constraints the compound drawable will be on the very right, even if there is very short text. – Sikhism 25/1, 2017 at 7:54

This works absolutely perfectly! I will add that layout_constraintHorizontal_bias is another helpful attribute for cases like this. Otherwise when your text is very short the view will be centered by the two constraints as well as wrapped to content. – Hearsay 10/7, 2017 at 7:13

@NicolasRoard: can u pls help me with constraint layout, i have an image in the upper half with a guideline of 0.4 and content below, but when i set the constraint layout to wrap_content it only picks 0.4 of the screen (and half of the textviews below are not visible), i used app:layout_constraintWidth_default="wrap" too, and v1.0.2 of the library but it doesnt help – Faustinafaustine 21/7, 2017 at 14:31

app:layout_constraintWidth_default="wrap" with width as 0dp does it nicely! – Dexamyl 5/8, 2017 at 1:34

this should be EXPLICIT in the documentation/instructions. – Tripe 20/8, 2017 at 17:10

Should the Edit move to have greater prominence? Kind of gets lost beneath the original. Appreciate the answer. Thanks @NicolasRoard . – Introgression 30/8, 2017 at 15:6

I have a View with a width of wrap_content, it's constraintLeft="parent" and constraintRight a Guideline that is 80% of the width of the parent. If the View width is smaller than these constraints then it's centered between them. Is there a way to anchor it to the left and grow to the right, up to the Guideline? Apologies if this is confusing – Middle 16/1, 2018 at 14:34

Nvm I just realised that adding app:layout_constraintHorizontal_bias="0" to the View will work – Middle 16/1, 2018 at 14:39

wrap_content only asks the widget to measure itself, but won't limit its expansion against eventual constraints -> @NicolasRoard the question is “WHY” ? Why would a constraint engine not be in charge, especially given you have no priority system (like the iOS counterpart) because they “are complicated” which I understand, but this behavior is weird (and dare I say, not well documented, even as of constraint-layout:1.1.0-beta5 – Rory 22/2, 2018 at 21:37

the reason is bit complicated (mix of performance concerns and limitations of framework), so the current compromise felt the best solution; we might revisit this in the future. Agree on the documentation bit, we'll work on it. – Diu 23/2, 2018 at 20:36

Thanks for the clarification, however, still as of 1.1.0 beta 6, I am not getting the desired behavior. I have a packed horizontal chain of text views that has variable length of text in each text view. now what I want is that they are streatched as much as the constraint it self, otherwise should be wrapped and centered, what I am getting is that no view is respecting the constraint. and are expanding indefintly. I am using the new attribute constrainedWidth ="true". finally resorted to setting maxWidth to all textviews not to expand more than desired! hope this gets fixed soon :( – Beliabelial 5/4, 2018 at 23:20

@NicolasRoard Unfortunately it still doesn't work with Barriers. When my right constraint is parent then everything is OK but things go wrong when it's Barrier. Hopefully I was able to use another view as constraint (because it's visible every time) and it works but I would prefer to use Barrier for my particular case. Thanks anyway :) – Overhang 29/6, 2018 at 8:36

@NicolasRoard If the text is small, because of both start and end constraints to parent, the text gets center aligned. However, I want it to be either towards start or end based on sender or receiver in chat. Any idea how to do this? – Eulaliaeulaliah 21/7, 2020 at 5:47

@Eulaliaeulaliah you can use bias for your case. developer.android.com/reference/androidx/constraintlayout/… – Cung 16/2, 2021 at 7:54

P

455

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"

Puggree answered 19/10, 2017 at 15:37 Comment(5)

True, since ConstraintLayout 1.1.0 beta 2, I believe. androidstudio.googleblog.com/2017/10/… – Maighdiln 8/12, 2017 at 12:2

This now in the 1.1 release: medium.com/google-developers/… – Androgynous 26/4, 2018 at 10:55

love stackoverflow! thanks this helped me! keep the wrap content, but never go beyond the constraint! #TIL – Waldrop 14/2, 2020 at 8:5

What an answer, didn't know this existed! Thanks man, after 2 hours of playing with alternatives this worked a treat! – Feebleminded 14/3, 2020 at 11:38

You've made my day – Cindy 15/6, 2021 at 15:52

D

300

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 constraints
match_constraints (0dp) will limit the size of the widget against the constraints... but will match them even if wrap_content would have been smaller (your first example), which isn't what you want either.