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:

1. The first layout (in red), that should grow according to the remaining space and has a max height.
2. The second layout (in green), which has a fixed size of 150dp and should always be below the first layout.
3. The third 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>

</android.support.constraint.ConstraintLayout>

Christinachristine

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? – Florentinoflorenza

Answer 1

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

be sure to set the height wrap_content

Yeah

app:layout_constrainedHeight="true" was the difference for me. Thanks for the solution! – Arcature

Worked fine for me with android:layout_height="0dp" app:layout_constraintHeight_max="300dp" – Deteriorate

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. – Neptune

Really thank you for such a simplified answer, You have just saved my day! – Slavonic

Answer 2

<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"
    />

Matteroffact

Answer 3

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.

Aliciaalick

@RomShiri, check my edited answer and let me know how it worked – Aliciaalick

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. – Christinachristine

@RomShiri Did you find an answer? I'm having the exact same problem! I'm thinking of switching it all back to linearlayout – Apelles

@Apelles 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. – Christinachristine