Top cropping an image in Android

The goal is to do an top cropping of an image when it is loaded into an ImageView in Android. The solution is to use matrix scaleType on the ImageView and scales the width and the height of the image according to the device screen width.

The scale factor is calculated by screen width / image source width
The scale factor will be > 1.0 which will scale up the image if the image width is smaller than the screen width.
The scale factor will be < 1.0 which will scale down the image if the image width is larger than the screen width.

Doing the top cropping directly on the ImageView and Image:

ImageView imageView = (ImageView) findViewById(R.id.iv_an_image);
Picasso.with(getApplicationContext())
        .load("https://images.com/pretty_image.jpg")
        .into(imageView, new Callback() {
            @Override
            public void onSuccess() {
                Drawable drawable = imageView.getDrawable();
                if (drawable != null) {
                    float scale;
                    final int drawableWidth = drawable.getIntrinsicWidth();
                    DisplayMetrics displaymetrics = new DisplayMetrics();
                    getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
                    float screenWidth = displaymetrics.widthPixels;
                    scale =  screenWidth / drawableWidth;
                    Matrix matrix = imageView.getImageMatrix();
                    matrix.postScale(scale, scale);
                    imageView.setImageMatrix(matrix);
                }
            }
            @Override
            public void onError() {

            }
        });
<ImageView
    android:id="@+id/iv_an_image"
    android:layout_width="match_parent"
    android:layout_height="100dp"/>

Making a custom ImageView for doing the top cropping:

public class TopCropImageView extends ImageView {
    public TopCropImageView(Context context) {
        super(context);
        init();
    }

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

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

    @TargetApi(Build.VERSION_CODES.LOLLIPOP)
    public TopCropImageView(Context context, AttributeSet attrs, int defStyleAttr, int defStyleRes) {
        super(context, attrs, defStyleAttr, defStyleRes);
        init();
    }

    @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 init() {
        setScaleType(ScaleType.MATRIX);
    }

    private void recomputeImgMatrix() {
        final Drawable drawable = getDrawable();
        if (drawable == null) {
            return;
        }

        final Matrix matrix = getImageMatrix();

        float scale = 1.0f;
        DisplayMetrics displaymetrics = new DisplayMetrics();
        ((Activity) getContext()).getWindowManager().getDefaultDisplay().getMetrics(displaymetrics);
        float screenWidth = displaymetrics.widthPixels;
        final int drawableWidth = drawable.getIntrinsicWidth();

        scale =  screenWidth / drawableWidth;

        matrix.setScale(scale, scale);
        setImageMatrix(matrix);
    }
}
<com.example.TopCropImageView
    android:id="@+id/iv_an_image"
    android:layout_width="match_parent"
    android:layout_height="100dp"/>
TopCropImageView imageView = (ImageView) findViewById(R.id.iv_an_image);
Picasso.with(getApplicationContext())
        .load("https://images.com/pretty_image.jpg")
        .into(imageView);

Reference: https://gist.github.com/arriolac/3843346

Search within Codexpedia

Custom Search

Search the entire web

Custom Search