How to scale an Image in ImageView to keep the aspect ratio

android imageview fill width aspect ratio
imageview resize image to fit
how to resize image in image view
android resize imageview based on screen size
android scale image programmatically
adjustviewbounds
android-constraintlayout imageview aspect ratio
android imageview 16:9

In Android, I defined an ImageView's layout_width to be fill_parent (which takes up the full width of the phone).

If the image I put to ImageView is bigger than the layout_width, Android will scale it, right? But what about the height? When Android scales the image, will it keep the aspect ratio?

What I find out is that there is some white space at the top and bottom of the ImageView when Android scales an image which is bigger than the ImageView. Is that true? If yes, how can I eliminate that white space?

  1. Yes, by default Android will scale your image down to fit the ImageView, maintaining the aspect ratio. However, make sure you're setting the image to the ImageView using android:src="..." rather than android:background="...". src= makes it scale the image maintaining aspect ratio, but background= makes it scale and distort the image to make it fit exactly to the size of the ImageView. (You can use a background and a source at the same time though, which can be useful for things like displaying a frame around the main image, using just one ImageView.)

  2. You should also see android:adjustViewBounds to make the ImageView resize itself to fit the rescaled image. For example, if you have a rectangular image in what would normally be a square ImageView, adjustViewBounds=true will make it resize the ImageView to be rectangular as well. This then affects how other Views are laid out around the ImageView.

    Then as Samuh wrote, you can change the way it default scales images using the android:scaleType parameter. By the way, the easiest way to discover how this works would simply have been to experiment a bit yourself! Just remember to look at the layouts in the emulator itself (or an actual phone) as the preview in Eclipse is usually wrong.

Scale Image to fill ImageView width and keep aspect ratio, Without using any custom classes or libraries: <ImageView android:id="@id/img" android:layout_width="match_parent" android:layout_height="wrap_content"  I would like to scale a Bitmap to a runtime dependant width and height, where the aspect ratio is maintained and the Bitmap fills the entire width and centers the image vertically, either cropping

See android:adjustViewBounds.

Set this to true if you want the ImageView to adjust its bounds to preserve the aspect ratio of its drawable.

Fit image into ImageView, keep aspect ratio and then resize , How do I change the aspect ratio of an image in Android? ImageView's height needs to change, either bigger or smaller based on the aspect ratio of the ; Excess height is cropped, can't have a lot of empty space like it is by default. For example, a tiny 50x50 image on a 400 px width screen would scale the image up to 400x400 px. A 800x200 image would scale to 400x100.

To anyone else having this particular issue. You have an ImageView (or other View) that you want to have a width of fill_parent and a height scaled proportionately:

Add these two attributes to your ImageView:

android:adjustViewBounds="true"
android:scaleType="centerCrop"

And set the ImageView width to fill_parent and height to wrap_content.

Also, if you don't want your image to be cropped, try this:

 android:adjustViewBounds="true"
 android:layout_centerInParent="true"

A guide for Android ImageView ScaleType and adjustViewBounds, Here we are centering the image without any scaling and because we are keeping the aspect ratio of the ImageView with adjustViewBounds  This example demonstrates how to scale an Image in ImageView to keep the aspect ratio in Android. Step 1 − Create a new project in Android Studio, go to File ⇒ New Project and fill all required details to create a new project. Step 2 − Add the following code to res/layout/activity_main.xml.

If you want an ImageView that both scales up and down while keeping the proper aspect ratio, add this to your XML:

android:adjustViewBounds="true"
android:scaleType="fitCenter"

Add this to your code:

// We need to adjust the height if the width of the bitmap is
// smaller than the view width, otherwise the image will be boxed.
final double viewWidthToBitmapWidthRatio = (double)image.getWidth() / (double)bitmap.getWidth();
image.getLayoutParams().height = (int) (bitmap.getHeight() * viewWidthToBitmapWidthRatio);

It took me a while to get this working, but this appears to work in the cases both where the image is smaller than the screen width and larger than the screen width, and it does not box the image.

Working with the ImageView, fitXY, Scales the x and y dimensions to exactly match the view size; does not maintain the image aspect ratio. matrix, Scales the image using a supplied Matrix​  Results of Scaling an Image. Here is a test image that we loaded into the scale function. And here it is after calling for a maxWidth of 5000 and a maxHeight of 200. You can see that the maxHeight of 200 was obeyed and the image was scaled while maintaining a proper aspect ratio. Other Image Processing Guides

This worked for me:

android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:maxWidth="39dip"
android:scaleType="centerCrop"
android:adjustViewBounds ="true"

How to scale an Image in ImageView to keep the aspect ratio in , This example demonstrates how to scale an Image in ImageView to keep the aspect ratio in Android.Step 1 − Create a new project in Android  The image should keep its aspect ratio; The ImageView dimensions should match scaled image’s dimensions after scaling; E.g. for an image of 100*150, the image and the ImageView should be 166*250. E.g. for an image of 150*100, the image and the ImageView should be 250*166. If I set the bounds as

Android: proportionally stretch an ImageView to fit the whole screen , Proportional image resizing is a fairly common scenario while developing an fit the whole screen while keeping its original aspect ratio. src= makes it scale the image maintaining aspect ratio, but background= makes it scale and distort the image to make it fit exactly to the size of the ImageView. (You can use a background and a source at the same time though, which can be useful for things like displaying a frame around the main image, using just one ImageView.)

How to scale image proportionally with custom height/width? · Issue , Issue details / Repro steps / Use case background: I want to resize an image such that it will fit an Imageview without any blank spaces and show  The ImageView should scale the Image so that it entirely fits into the window, at least on axes fits entirely and maintains the original aspect ratio. The size of the dialog should only be as large as the ImageView (plus its border width).

Android ImageView ScaleType: A Visual Guide, Center the image in the view, but perform no scaling. CENTER_CROP. Scale the image uniformly (maintain the image's aspect ratio) so that both  will make it as wide as the parent allows and up/down-scale as needed keeping aspect ratio. scaleType="centerInside" if the intrinsic width of src is smaller than parent width will center the image horizontally ; if the intrinsic width of src is larger than parent width will make it as wide as the parent allows and down-scale keeping aspect ratio.

Comments
  • That's the same thing, just done in code rather than XML. setImageBitmap is the same as android:src="..." and setBackground... is android:background="..."
  • @SuperUser image.setImageDrawable(...) is android:src="..." in xml aswell.
  • "android:adjustViewBounds" is the handy one here to note! if you do not add this, you most likely will have issues with the ImageView border/bounds/container not scaling correctly.
  • src= vs background= was the difference for me!
  • android:adjustViewBounds was the last piece to my puzzle, thanks!
  • This is the correct fix for the issue. We were having this on our image view, where the height included all of this extra whitespace. It isn't "transparent pixels", since we had fill_parent for width, and wrap_content for height. If you don't have adjustViewBounds=true, then you get the extra whitespace. After setting that to true, our issue went away. Thanks!
  • thanks, this and setting it to src instead of background worked perfectly!
  • See also how-to-scale-bitmap-to-screen-size
  • This is the perfect fix for the issue. Also for the sizes, use the parent container to set the size, and set match_parent in the ImageView. This solves a lot of troubles.
  • +1 for getting to the point. I initially wrote that in a more "colloquial" phrase and sof barred me from submitting it. Rather than ruffle feathers a went PC.