CODEWITHSUNDEEP
androidandroid-constraintlayout
Dominik G.
Dominik G.

Reputation: 700

Issue with ConstraintLayout with layout_height="wrap_content" and ratio based child view sizing

I've encountered a problem while trying to create a layout with ConstraintLayout 1.1.0-beta4.
My scenario is as follows: A ConstraintLayout wrapped in a ScrollView, with layout_height="wrap_content" and layout_width="match_parent". In it, I have a horizontal chain of three child views. They are supposed to fill out the full width of the screen, and have their height determined according to their width with an aspect ratio of 3:4. When the ConstraintLayout has layout_height="match_parent" applied, everything works fine, but with wrap_content, the size of the child views can't be computed. I expected it to work the same way.

Here is my XML:

 <ScrollView
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    >

    <android.support.constraint.ConstraintLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingBottom="16dp"
        android:paddingTop="16dp"
        >

        <View
            android:id="@+id/button_1"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginEnd="8dp"
            android:background="@android:color/black"
            app:layout_constraintDimensionRatio="3:4"
            app:layout_constraintEnd_toStartOf="@+id/button_2"
            app:layout_constraintStart_toStartOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />

        <View
            android:id="@+id/button_2"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="8dp"
            android:background="@android:color/black"
            app:layout_constraintBottom_toBottomOf="@+id/button_1"
            app:layout_constraintEnd_toStartOf="@+id/button_3"
            app:layout_constraintStart_toEndOf="@+id/button_1"
            app:layout_constraintTop_toTopOf="@+id/button_1"
            />

        <View
            android:id="@+id/button_3"
            android:layout_width="0dp"
            android:layout_height="0dp"
            android:layout_marginStart="8dp"
            android:background="@android:color/black"
            app:layout_constraintBottom_toBottomOf="@+id/button_1"
            app:layout_constraintEnd_toEndOf="parent"
            app:layout_constraintStart_toEndOf="@+id/button_2"
            app:layout_constraintTop_toTopOf="@+id/button_1"
            />

    </android.support.constraint.ConstraintLayout>

</ScrollView>

Why can ConstraintLayout not compute the sizes of the child views in this case? Am I missing something?
Thank you in advance.

Upvotes: 0

Views: 828

Answers (1)

Pawel
Pawel

Reputation: 17258

Looks like constraintLayout does have issues chaining views with dimension ratios. If you're fine with a work around, create extra invisible view with increased ratio and constrain top/bottom of views to it:

    <View
        android:id="@+id/viewButtonConstraint"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF00FF"
        app:layout_constraintDimensionRatio="W,3:12"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <View
        android:id="@+id/button_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginEnd="8dp"
        android:background="@android:color/black"
        app:layout_constraintEnd_toStartOf="@+id/button_2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="@+id/viewButtonConstraint"
        app:layout_constraintBottom_toBottomOf="@+id/viewButtonConstraint"
        />

    ...etc

Upvotes: 1

Related Questions