Is it possible to draw layouts with constraintDimensionRatio and height/width match_parent, while constraining top and bottom of layout to one point

Question

I'm trying to draw two views, one of which will overlay the other, using constraint layouts and, constraint_guidelines, and app:layout_constraintDimensionRatio="h, 1:1" for their sizing (this is because I'll be using custom views which need to know their own sizing when drawing)

I'm trying to constrain one layout's top and bottom to the other one's bottom to ensure they're positioned relative to one another, but it seems as soon as I use the match_parent for their sizing, the constraints don't allow them to overlay one another.

This is how I'd like them to lay out;

Note, above screenshot was taken with smaller imageView manually placed

This is how they layout with both the second images dimensions set to match_parent, and ratio set

This is the same, but with height/width of the smaller image view set to 120dp rather than match_parent

If I had to guess, I'd say the issue is because I'm simultaneously trying to match height with a constraint which would lead to a height of 0dp, while also giving it a ratio that ensures its height matches the width between the guidelines.

Below is the XML. If anybody can tell me how to get a layout to constrain to one point while deriving height from the width between the guidelines, would be much appreciated

<androidx.constraintlayout.widget.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:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/example_guideline_left_one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.3"
    app:layout_constraintStart_toStartOf="parent" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/onboarding_role_guideline_right_one"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.7"
    app:layout_constraintStart_toStartOf="parent" />

<ImageView
    android:id="@+id/example_image_one"
    android:layout_width="0dp"
    android:layout_height="0dp"
    android:background="@color/colorPrimaryDark"
    app:layout_constraintDimensionRatio="h, 1:1"
    app:layout_constraintEnd_toStartOf="@+id/onboarding_role_guideline_right_one"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="@+id/example_guideline_left_one"
    app:layout_constraintTop_toTopOf="parent" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/example_guideline_left_two"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.55"
    app:layout_constraintStart_toStartOf="parent" />

<androidx.constraintlayout.widget.Guideline
    android:id="@+id/onboarding_role_guideline_right_two"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    app:layout_constraintGuide_percent="0.85"
    app:layout_constraintStart_toStartOf="parent" />

<ImageView
    android:id="@+id/example_image_two"
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="h, 1:1"
    app:layout_constraintBottom_toBottomOf="@+id/example_image_one"
    app:layout_constraintEnd_toStartOf="@+id/onboarding_role_guideline_right_two"
    app:layout_constraintHorizontal_bias="1.0"
    app:layout_constraintStart_toStartOf="@+id/example_guideline_left_two"
    app:layout_constraintTop_toBottomOf="@+id/example_image_one" />

since you are using fixed positions for your guidelines, why not use height and width of "124dp" in your image_two and remove the end guideline? that will place it where you want it — Cruces
Unfortunately that was a result of moving the guidelines around without realising how the XML was changing, it was supposed to be based on app:layout_constraintGuide_percent. I've updated the xml to reflect this, sorry for the confusion — Biggs

Biggs Biggs · Accepted Answer · 2018-12-11T16:24:27

Realised an incredibly simple solution, think it was a matter of getting too bogged down in the particular of constraints and not being able to see the forest for the trees.

Create a <Space> element, set it to be constrained to the top and bottom of the larger image, then constrain the top of the smaller image to that. Can then adjust the layout_constraintVertical_bias of the <Space> as required.

Is it possible to draw layouts with constraintDimensionRatio and height/width match_parent, while constraining top and bottom of layout to one point

1 Answers