How to set maxHeight over DimensionRatio with ConstraintLayout?

Question

I'm trying to display an image centered in parent with a dimension ratio of 1220:1000 AND a maximum height of 300dp (to keep the image small even with large screen)

<android.support.constraint.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">
    <com.facebook.drawee.view.SimpleDraweeView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:layout_marginStart="10dp"
        android:layout_marginLeft="10dp"
        android:layout_marginTop="10dp"
        android:layout_marginEnd="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="10dp"
        android:adjustViewBounds="true"
        android:scaleType="centerInside"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintDimensionRatio="1220:1000"
        app:layout_constraintHeight_max="200dp"  ==> This line break the ratio (the image is not displayed)
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />
</android.support.constraint.ConstraintLayout>

The app:layout_constraintHeight_max property break the ratio. Is there is a way to do it?

Answer 1

If you want to enforce max_height and keep the dimension ratio at the same time, you need to constrain the width based on height. You can achieve that by adding W to your ratio:

app:layout_constraintDimensionRatio="W,1220:1000"

This will constrain the height first and then set the width accordingly to satisfy the ratio.

More info on how this dimension ratio works can be found in the documentation.