CODEWITHSUNDEEP
androidlayoutandroid-constraintlayout
Bogy
Bogy

Reputation: 964

How to set maxHeight over DimensionRatio with ConstraintLayout?

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?

Upvotes: 7

Views: 2939

Answers (3)

Mario Velasco
Mario Velasco

Reputation: 3456

If you want to maximize the area with a dimension ratio and a max height, but you don't know if width or height is going to be adjusted, better don't to use layout_constraintDimensionRatio + layout_constraintHeight_max. They don't work well together.

Here I put my solution in the case you have an image 16:9 which will use full width while max height is not yet reached, otherwise it will respect max height, and width will be adjusted:

aspect ratio + max height sample

<androidx.constraintlayout.widget.ConstraintLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

        <!-- This space view makes ImageView expands to its corresponding height -->
        <Space
            android:layout_width="0dp"
            android:layout_height="0dp"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintTop_toBottomOf="@+id/imageview" />

        <com.a3.sgt.ui.widget.AspectRatioImageView
            android:id="@+id/imageview"
            android:layout_width="wrap_content"
            android:layout_height="0dp"
            android:adjustViewBounds="true"
            app:dominantMeasurement="height"
            app:aspectRatioEnabled="true"
            app:aspectRatio="1.778"
            android:scaleType="centerCrop"
            app:layout_constraintHeight_max="400dp"
            tools:src="@drawable/placeholder_glacier"
            app:layout_constraintLeft_toLeftOf="parent"
            app:layout_constraintRight_toRightOf="parent"
            app:layout_constraintTop_toTopOf="parent"
            />
</androidx.constraintlayout.widget.ConstraintLayout>

I used a custom ImageView I had in my gist which adjusts to aspect ratio, in order to avoid using layout_constraintDimensionRatio which causes the problem together with layout_constraintHeight_max

Upvotes: 0

Pawel Laskowski
Pawel Laskowski

Reputation: 6316

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.

Upvotes: 8

Andrew
Andrew

Reputation: 47

Have you tried to add the tag maxHeight?

android:maxHeight="200dp"

Upvotes: -3

Related Questions