ConstraintLayout doesn't respect max height

Question

I'm trying to create a layout composition using ConstraintLayout. In order to simplify my case, my layout should have three parts:

The first layout (in red), that should grow according to the remaining space and has a max height.
The second layout (in green), which has a fixed size of 150dp and should always be below the first layout.
The first layout (in pink), also has a fixed size of 150dp and should be aligned to the bottom the view.

The part I'm struggling with is setting a max height for the first layout (red). It seems like the ConstraintLayout ignores my "max height statements":

app:layout_constraintHeight_max="300dp"

Here's my current result (the red part ignores the height limit..):

Here's the full XML:

<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:id="@+id/coordinatorLayout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@color/white"
tools:context="com.mixtiles.android.reviewOrder.ReviewOrderActivity"
tools:layout_editor_absoluteY="25dp">


<android.support.design.widget.AppBarLayout
    android:id="@+id/appBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="@color/white">
        <android.support.v7.widget.Toolbar
            android:id="@+id/review_order_toolbar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:elevation="4dp"
            android:theme="@style/ThemeOverlay.AppCompat.ActionBar"
            app:popupTheme="@style/ThemeOverlay.AppCompat.Light">
        </android.support.v7.widget.Toolbar>
</android.support.design.widget.AppBarLayout>

<FrameLayout
    android:id="@+id/red"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/red"
    app:layout_constraintBottom_toTopOf="@+id/green"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintHeight_max="300dp"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/appBarLayout"
    app:layout_constraintVertical_chainStyle="spread_inside">

</FrameLayout>


<FrameLayout
    android:id="@+id/green"
    android:layout_width="0dp"
    android:layout_height="150dp"
    android:background="@color/greenish"
    app:layout_constraintBottom_toTopOf="@+id/pink"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/red">

</FrameLayout>

<FrameLayout
    android:id="@+id/pink"
    android:layout_width="match_parent"
    android:layout_height="150dp"
    android:background="@color/pink"
    app:layout_constraintBottom_toBottomOf="parent"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/green">

</FrameLayout>

Not sure if I understand correctly.. pink is _always_ attached to the bottom (like a bottom navigation view), green is _always_ right on top of pink, and red takes the remaining space, up to 300dp? — , Jun 04 '19 at 15:04

score 61 · Answer 1 · answered Jun 01 '18 at 12:03

61

android:layout_height="wrap_content"
app:layout_constraintHeight_max="300dp"
app:layout_constrainedHeight="true"

be sure to set the height wrap_content

answered Jun 01 '18 at 12:03

elham shahidi

771
6
11

5

app:layout_constrainedHeight="true" was the difference for me. Thanks for the solution! – Randy Sep 14 '19 at 22:34
1

Worked fine for me with android:layout_height="0dp" app:layout_constraintHeight_max="300dp" – Taras Lozovyi Mar 31 '20 at 15:57
If you use `layout_constraintHeight_max` in combination with `layout_height="wrap_content"` it won't actually work as the view size will wrap it's content. You should use `match_parent` or `odd` with other constraints and set the height constraint instead. The only situation where this will work is if the resource default height is actually bigger than your max height value (but for this you can put the height directly in `layout|_height`. – Ionut Negru Apr 28 '20 at 06:35
Really thank you for such a simplified answer, You have just saved my day! – Megamind Core May 28 '22 at 12:20

score 2 · Answer 2 · answered Apr 21 '20 at 13:46

<View
    android:id="@+id/view2"
    android:layout_width="88dp"
    android:layout_height="0dp"
    android:background="#F44"
    app:layout_constraintBottom_toTopOf="@+id/view"
    app:layout_constraintTop_toTopOf="parent"
    app:layout_constraintVertical_bias="0.0"
    app:layout_constraintVertical_chainStyle="packed"
    app:layout_constraintHeight_max="300dp"
    />

<View
    android:id="@+id/view"
    android:layout_width="88dp"
    android:layout_height="150dp"
    android:background="#690"
    app:layout_constraintBottom_toTopOf="@+id/view3"
    app:layout_constraintTop_toBottomOf="@+id/view2"
    />

<View
    android:id="@+id/view3"
    android:layout_width="88dp"
    android:layout_height="150dp"
    android:background="#93C"
    app:layout_constraintBottom_toBottomOf="parent"
    />

papafe · Answer 3 · 2018-02-20T15:28:15.887

1

The issue could be that you can't have both those constraints set at the same time on the red view:

app:layout_constraintBottom_toTopOf="@+id/green" app:layout_constraintTop_toBottomOf="@+id/appBarLayout"

If both those constraints are set, then the red view will be attached on top to the appBarLayout, and on the bottom to the green view, and this means that it will occupy all the space between those two views.

If you want to have the max height constraint be respected, you need to remove one of those two constraints. Which one should be removed depends on what kind of final result you are expecting.

OLD ANSWER

I think you should use android:maxHeight instead of app:layout_constraintHeight_max.

edited Feb 20 '18 at 15:28

answered Feb 20 '18 at 15:03

papafe

2,959
4
41
72

@RomShiri, check my edited answer and let me know how it worked – papafe Feb 20 '18 at 15:28
thanks again, it makes sense somehow, but unfortunately, once to take one of the constraints, the red view has no height at all (using "match constraints"). I really don't get it, how do I use the "max height" attributes.. You can try it yourself, I made the example abstract enough so you could test it too. – Rom Shiri Feb 21 '18 at 15:20
@RomShiri Did you find an answer? I'm having the exact same problem! I'm thinking of switching it all back to linearlayout – rodrigocl Mar 13 '18 at 12:41
@rodrigocl Unfortunately, no. I used the Android Flexbox library instead with some tweaks to make it work for my case.. It wasn't clean as it's supposed to be with ConstratintLayout, but you know, at least it works. – Rom Shiri Mar 14 '18 at 16:50

ConstraintLayout doesn't respect max height

3 Answers3

Linked