Load Image With Glide and Change Aspect Ratio

Question

I have an imageview and I would like to load an image with Glide into it. The thing here is, I want all the images have the same height (width match_parent) according to the 16:9 aspect ratio.

<ImageView
  android:id="@+id/thumbImage"
  android:layout_width="match_parent"
  android:layout_height="wrap_content"
  android:adjustViewBounds="true"
  android:contentDescription="@string/thumbnail_text"
  android:scaleType="fitCenter"
  android:src="@drawable/thumbnail_default"
  android:cropToPadding="true"

  app:layout_constraintStart_toStartOf="parent"
  app:layout_constraintTop_toTopOf="parent"
  app:layout_constraintBottom_toTopOf="@id/thumbTitle"/>

Glide code

Glide.with(mThumb.getContext())
          .load(getThumbUrl())
          .into(mThumb);

When I load an image with aspect ratio 16:9, everything is great. However, when I load another image, the height adjusts to the height of the image.

I tried adding Constraint layout dimension ratio

app:layout_constraintDimensionRatio="16:9"

I tried playing around with adjustViewBounds and scaleType but no success.

So I think I should play with Glide to adjust the bitmap before loading it to the imageview but I couldn't find a tutorial about that.

How can I show image with width match_parent and height calculated as aspect ratio 16:9?

Thank you,

Note: I tried

<ImageView
                android:id="@+id/thumbImage"
                android:layout_width="match_parent"
                android:layout_height="0dp"
                android:adjustViewBounds="true"
                android:contentDescription="@string/thumbnail_text"
                android:scaleType="centerCrop"
                android:src="@drawable/thumbnail_default"
                android:cropToPadding="true"
                app:layout_constraintDimensionRatio="H,16:9"
                app:layout_constraintStart_toStartOf="parent"
                app:layout_constraintTop_toTopOf="parent"
                app:layout_constraintBottom_toTopOf="@id/thumbTitle"/>

It works, but then if the orientation is changed, the height goes 0.

Answer 1

One way around is to use a Image view with 16:9 ratio .

public class CustomImageView extends AppCompatImageView {
    public CustomImageView(Context context) {
        super(context);
    }

    public CustomImageView(Context context, AttributeSet attrs) {
        super(context, attrs);
    }

    public CustomImageView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
    }

    @Override
    protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
        int width = getMeasuredWidth();
        int height=(width * 9) / 16;
        setMeasuredDimension(width, height);
    }
}

This will make a ImageView with hard code ratio of 16/9 . You can use Custom attributes for it to make it more flexible.

Update:- Now with the ConstraintsLayout its easy to break views in ratio . U can try following.

<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/expandableModes"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical">

<ImageView
    android:layout_width="match_parent"
    android:layout_height="0dp"
    app:layout_constraintDimensionRatio="16:9"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toTopOf="parent" />
 </androidx.constraintlayout.widget.ConstraintLayout>