How do you scale an ImageView like centerCrop, but from top?

Question

Let's say I'm getting some image from an API. I have no idea what the image's dimensions will be ahead of time, but I know that I want that image to become the src of an ImageView I have set to some specific size. I want whatever image I get from the API to fill the entire ImageView, I want to preserve aspect ratio, and I don't care if one dimension (width or height) becomes too big for the set size of the view—so I use centerCrop.

<ImageView
  android:layout_width="400px"
  android:layout_height="300px"
  android:scaleType="centerCrop" />

If the image that comes back from the API is this:

When it gets set as the ImageView's src, the result will be something akin to this (shaded parts are cropped off):

However, I get a request that we should always show the top of the image and crop from the bottom up. So the desired result is something like this:

I'm sure this is possible, but I'm a web guy operating out of his league here. Will it be better to extend ImageView somehow, or to try scaleType="matrix" and setImageMatrix(), or some third, unmentioned option?

Possibly duplicate http://stackoverflow.com/questions/6330084/imageview-scaling-top-crop — Sunil Sunny, Jul 07 '16 at 05:00
Possible duplicate of [How set imageview scaletype to topCrop](http://stackoverflow.com/questions/29783358/how-set-imageview-scaletype-to-topcrop) — einverne, Oct 20 '16 at 07:58

score 10 · Answer 1 · answered Jul 07 '16 at 02:44

Use this TopCropImageView gist

import android.content.Context;
import android.graphics.Matrix;
import android.widget.ImageView;

/**
* ImageView to display top-crop scale of an image view.
*
* @author Chris Arriola
*/
public class TopCropImageView extends ImageView {

    public TopCropImageView(Context context) {
        super(context);
        setScaleType(ScaleType.MATRIX);
    }

    @Override
    protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
        super.onLayout(changed, left, top, right, bottom);
        recomputeImgMatrix();
    }

    @Override
    protected boolean setFrame(int l, int t, int r, int b) {
        recomputeImgMatrix();
        return super.setFrame(l, t, r, b);
    }      

    private void recomputeImgMatrix() {
        final Matrix matrix = getImageMatrix();

        float scale;
        final int viewWidth = getWidth() - getPaddingLeft() - getPaddingRight();
        final int viewHeight = getHeight() - getPaddingTop() - getPaddingBottom();
        final int drawableWidth = getDrawable().getIntrinsicWidth();
        final int drawableHeight = getDrawable().getIntrinsicHeight();

        if (drawableWidth * viewHeight > drawableHeight * viewWidth) {
            scale = (float) viewHeight / (float) drawableHeight;
        } else {
            scale = (float) viewWidth / (float) drawableWidth;
        }

        matrix.setScale(scale, scale);
        setImageMatrix(matrix);
    }
}

I also added a Kotlin version of this class in your gist: https://gist.github.com/arriolac/3843346#gistcomment-3604153 — FMDM, Jan 22 '21 at 23:10

score 7 · Answer 2 · answered Sep 28 '16 at 08:40

If you are using Glide, you can use a custom transformation. Feel free to use mine (which is an almost exact copy of the CenterCrop Class by Glide), which takes percentages:

https://gist.github.com/bjornson/3ff8888c09908d5c6cc345d0a8e1f6a7

Use it just like any other bitmap transformation:

Glide.with(getContext())
    .load(imagePath)
    .transform(new PositionedCropTransformation(getContext(), 1, 0))
    .into(imageView);

Commonly needed values: top-left: 0, 0 top-right: 0, 1 bottom-left: 1, 0 bottom-right: 1, 1

Use 0.5f for center

This doesn't work on Glide 4.x. All values I plugged in crop the right — galaxigirl, Jun 30 '20 at 11:32

score 2 · Answer 3 · answered Oct 04 '20 at 12:04

2

PositionedCropTransformation converted code to support for Glide v4.x https://gist.github.com/bjornson/3ff8888c09908d5c6cc345d0a8e1f6a7

answered Oct 04 '20 at 12:04

Mikhail Sharin

3,661
3
27
36

score 0 · Answer 4 · answered Jun 24 '20 at 09:36

If you are using Glide you can use optionalTransform by this way:

Glide.with(context).load("http:///...")
            .override(300, 300)
            .optionalTransform(
                  new Transformation<Bitmap>() {
                     @NonNull
                     @Override
                     public Resource<Bitmap> transform(@NonNull Context context, 
                    @NonNull Resource<Bitmap> resource, int outWidth, int outHeight) {
                                       resource.get().setHeight(YOUR_CUSTOM_HIGHT);
                                       return resource;
                                   }

                    @Override 
                    public void updateDiskCacheKey(@NonNull MessageDigest messageDigest) {

                                   }
                               }

            )
           into(binding.img);

How do you scale an ImageView like centerCrop, but from top?

4 Answers4