ConstraintLayout: Unable to scale image to fit a ratio in RecyclerView

Question

• I have a recycler view with StaggeredGridLayoutManager.
• Within in I have custom items/views.
• Each item is defined as a ConstraintLayout where there is an image which is supposed to have a constant aspect ratio.
• But the image is to still be able to scale to fit the width of each span.
• And then the height should be adjusted according to the ratio.

But somehow the images are not maintaining the aspect ratio.

Here are the xml files and code to create the recycler view:

item.xml

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:padding="10dp">


    <ImageView
        android:id="@+id/image"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintDimensionRatio="16:9"
        tools:src="@drawable/ic_logo" />


    <TextView
        android:id="@+id/title"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintBottom_toBottomOf="@+id/image"
        android:textColor="@color/white"
        tools:text="SAMPLE"
        android:paddingBottom="10dp"
        android:layout_margin="5dp"/>

</android.support.constraint.ConstraintLayout>

activity.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="10dp">

    <android.support.v7.widget.RecyclerView
        android:id="@+id/recycler_view"
        android:layout_marginTop="5dp"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_alignParentStart="true" />

</RelativeLayout>

Code to generate the whole view:

adapter = new SampleAdapter(list);
        StaggeredGridLayoutManager manager = new StaggeredGridLayoutManager(3, StaggeredGridLayoutManager.VERTICAL);
        sampleRecyclerView.setLayoutManager(manager);
        sampleRecyclerView.setAdapter(adapter);

The width of each item is set fine and fits the width of each column span. But the height is not maintained and is very little.

Could someone please help?

Thanks

Nd

Answer 1

For your image, you can specify which dimension should match constraints while the other dimension is adjusted to satisfy the ratio. See the section entitled "Ratio" in the documentation for Dimensions constraints.

You can also use ratio if both dimensions are set to MATCH_CONSTRAINT (0dp). In this case the system sets the largest dimensions the satisfies all constraints and maintains the aspect ratio specified. To constrain one specific side based on the dimensions of another. You can pre append W," or H, to constrain the width or height respectively. For example, If one dimension is constrained by two targets (e.g. width is 0dp and centered on parent) you can indicate which side should be constrained, by adding the letter W (for constraining the width) or H (for constraining the height) in front of the ratio, separated by a comma:

     <Button android:layout_width="0dp"
               android:layout_height="0dp"
               app:layout_constraintDimensionRatio="H,16:9"
               app:layout_constraintBottom_toBottomOf="parent"
               app:layout_constraintTop_toTopOf="parent"/>

So, in your case, I would try app:layout_constraintDimensionRatio="H,16:9".

In addition, I don't think that you will need android:scaleType="centerCrop" or adjustViewBounds but you will have to try it out to see.

Kellner

layout_constraintDimensionRatio helped me fit the height properly, thanks – Ngo