user2322082 user2322082 - 1 year ago 72
Android Question

Scale Image in ImageView to Height, maintaining aspect ratio outside bounds of screen, and align right

I have an image that I want to match the height of the screen, extending past the left edge of the screen, aligning the right side of the image with the right side of the screen.

An XML solution is preferable, but a Java solution is fine as well.

How can I do this?
Example Scaling

Answer Source

You need to use matrix scaling and set up the matrix yourself. This isn't difficult.

You have to do this after the view is laid out so that you can get the dimensions of the ImageView. You will also need the dimensions of the Drawable or Bitmap you are setting.

  • First you have figure out how much you have to scale (multiply) the image so that the height is the same as the height of the ImageView. For this you just divide the ImageView height by the image height.

  • Now you also know how wide the image will be. To get the right edges of the image and the ImageView to line up, you need to move (translate) the image to the left by its width, then move it back the width of the ImageView. So the translation is just the difference of the image width and the ImageView width.

Here's how I did it:

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        final ImageView imageView = (ImageView) findViewById(R.id.imageview);

        imageView.getViewTreeObserver().addOnGlobalLayoutListener(new ViewTreeObserver.OnGlobalLayoutListener() {
            @Override
            public void onGlobalLayout() {

                BitmapDrawable drawable = null;
                if (Build.VERSION.SDK_INT >= 21) {
                    drawable = (BitmapDrawable) getResources().getDrawable(R.drawable.sunset, getTheme());
                } else {
                    drawable = (BitmapDrawable) getResources().getDrawable(R.drawable.sunset);
                }
                Bitmap bitmap = drawable.getBitmap();

                // get the scale factor that will have to be applied to
                // the image to make it the same height as your ImageView
                float factor = (float) imageView.getHeight() / (float) bitmap.getHeight();

                // now the image will have to be shifted over all of its
                // width minus the width of the ImageView.  This will make
                // the right edges line up.
                int scaledImageWidth = (int) (bitmap.getWidth() * factor);
                int translateX = imageView.getWidth() - scaledImageWidth;

                // you can also use drawable.getIntrinsicWidth() and
                //     drawable.getIntrinsicHeight()

                Matrix matrix = new Matrix();
                matrix.setScale(factor, factor);
                matrix.postTranslate(translateX, 0);

                imageView.setScaleType(ImageView.ScaleType.MATRIX);
                imageView.setImageMatrix(matrix);
                imageView.setImageBitmap(bitmap);
            }
        });
    }
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download