How to change the height of the view based on width?

Question

I have ConstraintLayout with 4 ImageViews inside, and I need to put for any ImageView weight like LinearLayout and change the height of the view based on width.

This is what I need:

So as you can see here I have 4 views with the same width and the height change like the width.

After I show you what I trying to do, this is my status right now:

This is the layout:

    <android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <ImageView
        android:id="@+id/label_1"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toStartOf="@+id/label_2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/a" />

    <ImageView
        android:id="@+id/label_2"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintEnd_toStartOf="@+id/label_3"
        app:layout_constraintStart_toEndOf="@id/label_1"
        app:srcCompat="@drawable/a" />

    <ImageView
        android:id="@+id/label_3"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintEnd_toEndOf="@id/label_4"
        app:layout_constraintStart_toEndOf="@id/label_2"
        app:srcCompat="@drawable/a" />

    <ImageView
        android:id="@+id/label_4"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/label_3"
        app:srcCompat="@drawable/a" />

</android.support.constraint.ConstraintLayout>

NOTE: my asset @drawable/a is 40X40

How can I get the same result as in the example I attached?

Answer 1

One would think that placing the four image views in a chain anchored to the start and end of the ConstraintLayout parent with a height of wrap_content as you have defined would give the desired result. Unfortunately, in my best estimation, the chain is not sufficient to force the layout to "open up" and assume the correct height. The only thing in your layout that gives the layout height is your drawables; the chain does not cause the layout to open up enough to assume the specified ratios.

It is unclear to me whether this behavior is just how ConstraintLayout works or if it is a defect. Regardless, the work-around for this is to force the layout to open up to let the chain size itself and its member views appropriately. To force the layout to open up, we will define a Space view as follows:

<Space
    android:layout_width="0dp"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="W,1:1.15"
    app:layout_constraintEnd_toStartOf="@id/guide25"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />

The vertical guideline is set at 25% of the width of the layout because each ImageView will take up 25% of the layout's width. 0dp is match_constraints. The ratio forces the correct height of the Space and, therefore, the height of the layout. This Space is not visible in the layout, but is enough to give the layout vertical dimension.

The entire XML file is below. There was an error in the chain at label_3 which has been corrected. I also changed the height of all ImageViews to 0dp so the ImageViews could assume the desired ratios. I did remove the drawables, so they will need to be reintroduced with the appropriate scaleType defined. What you see in the screen shot is the extents of the ImageViews.

<android.support.constraint.ConstraintLayout 
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <android.support.constraint.Guideline
        android:id="@+id/guide25"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:orientation="vertical"
        app:layout_constraintGuide_percent="0.25" />

    <Space
        android:layout_width="0dp"
        android:layout_height="0dp"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toStartOf="@id/guide25"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/label_1"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF00FF00"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toStartOf="@+id/label_2"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/label_2"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FFFF0000"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toStartOf="@+id/label_3"
        app:layout_constraintStart_toEndOf="@id/label_1" />

    <ImageView
        android:id="@+id/label_3"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#FF0000FF"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toStartOf="@id/label_4"
        app:layout_constraintStart_toEndOf="@id/label_2" />

    <ImageView
        android:id="@+id/label_4"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:background="#ffea00"
        app:layout_constraintBaseline_toBaselineOf="@id/label_1"
        app:layout_constraintDimensionRatio="W,1:1.15"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toEndOf="@id/label_3" />

</android.support.constraint.ConstraintLayout>