CODEWITHSUNDEEP
androidandroid-constraintlayoutconstraint-layout-chains
Rom Shiri
Rom Shiri

Reputation: 1437

ConstraintLayout doesn't respect max height

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

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>

</android.support.constraint.ConstraintLayout>

Upvotes: 33

Views: 23071

Answers (3)

Isaak Osipovich Dunayevsky
Isaak Osipovich Dunayevsky

Reputation: 360

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

Upvotes: 2

elham shahidi
elham shahidi

Reputation: 781

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

be sure to set the height wrap_content

Upvotes: 62

papafe
papafe

Reputation: 3070

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.

Upvotes: 1

Related Questions