android – ConstraintLayout doesn't respect max height-ThrowExceptions

Exception or error:

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 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..):

enter image description here

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>

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

be sure to set the height wrap_content

###

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.

###

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

Leave a Reply

Your email address will not be published. Required fields are marked *