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

Question

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?

score 887 · Accepted Answer · edited Jun 20 '20 at 09:12

887

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.)
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.

edited Jun 20 '20 at 09:12

Community

1
1

answered Mar 26 '10 at 15:07

Steve Haley

55,374
17
77
85

Thanks. But what if I have an ImageView, and I set the image by using imageView.setImageBitmap()? – michael Mar 31 '10 at 03:31
23

That's the same thing, just done in code rather than XML. `setImageBitmap` is the same as `android:src="..."` and `setBackground...` is `android:background="..."` – Steve Haley Mar 31 '10 at 10:55
@SteveHaley i know it is too late but can you please tell me image.setImageDrawable equivalent in xml code – Apr 27 '13 at 07:40
5

@SuperUser `image.setImageDrawable(...)` is `android:src="..."` in xml aswell. – PureSpider May 03 '13 at 15:43
14

"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. – Angry 84 Feb 02 '14 at 03:39
android:scaleType="fitCenter" Also seem to work well. It automatically crops such that image fully fits the Image view. – Confuse Sep 06 '14 at 09:32
Be aware that adjustViewBounds would not work in case ImageView has exact size specified in layout http://stackoverflow.com/questions/16022841/when-will-measurespec-unspecified-and-measurespec-at-most-be-applied – Kurovsky Jan 23 '15 at 10:48
Spot on ! Brilliant answer ...saved a lot of coding...i was going for a custom imageview..thanks a lot ! – sid_09 Aug 01 '15 at 07:15
It's awesome! I find your answer for along time. Before that I used adjustViewBounds and setBackground, It wasn't working as well. – nobjta_9x_tq Aug 07 '15 at 07:16
4

src= vs background= was the difference for me! – Christopher Rathgeb Oct 20 '15 at 02:39
29

`android:adjustViewBounds` was the last piece to my puzzle, thanks! – themarketka Jan 13 '16 at 21:58
Correct answer but I withheld my +1 because IMO your verbosity was unwarranted for this question. Regardless, thank you for your time. – Jacksonkr Mar 11 '16 at 18:47
android:adjustViewBounds="true" finally fixed it for me. Thanks. – Evan Sevy Feb 13 '17 at 01:43

score 313 · Answer 2 · edited Mar 10 '15 at 12:26

313

See android:adjustViewBounds.

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

edited Mar 10 '15 at 12:26

SMR

6,628
2
35
56

answered Jul 08 '10 at 12:08

Gratzi

3,139
1
15
2

7

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! – christophercotton Jul 16 '10 at 18:07
3

thanks, this and setting it to src instead of background worked perfectly! – Cameron Oct 10 '10 at 08:48
See also [how-to-scale-bitmap-to-screen-size](http://stackoverflow.com/questions/6410364/how-to-scale-bitmap-to-screen-size) – ThomasRS Jan 11 '12 at 16:40
1

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. – Nimila Hiranya Sep 25 '15 at 08:53
+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. – Jacksonkr Mar 11 '16 at 18:49

Kevin Parker · Answer 3 · 2020-04-24T16:33:11.347

205

To anyone else having this particular issue. You have an ImageView 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"

edited Apr 24 '20 at 16:33

answered May 26 '11 at 18:45

Kevin Parker

16,975
20
76
105

20

Yes but your image gets cropped. The perfect solution would stretch to width, maintain aspect ratio and not crop. I have no idea why this has to be so anoing to do... – Warpzit Nov 16 '11 at 10:21
1

Me either :( Sorry if my solution did not help you, but it did help me. – Kevin Parker Nov 16 '11 at 15:33
2

Kevin, what you said was exactly what i was looking for, if the size of the image is less than that of the screen, it gets zoomed in and centered, perfect. Thanks. – Soham Jan 17 '13 at 11:01
1

+1, except for "(or other `View`)". AFAICT no other view has `adjustViewBounds` or `scaleType` attributes. – LarsH Sep 08 '15 at 17:21
1

how about using android:scaleType="centerInside" instead of android:scaleType="centerCrop"? It would also not crop the image but ensure that both width and height are less than or equal the imageview's width and height :) Here's a good visual guide for scaletypes: https://thoughtbot.com/blog/android-imageview-scaletype-a-visual-guide – vida Jan 21 '20 at 23:27
@vida I looked through all of these and other questions, and this was the solution that worked for me. It involved no converting and worked perfectly. – petestmart Oct 25 '22 at 16:14

score 59 · Answer 4 · edited Sep 02 '12 at 16:36

59

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.

edited Sep 02 '12 at 16:36

biegleux

13,179
11
45
52

answered Mar 18 '12 at 18:39

Kevin

591
4
2

1

Why not just use android:scaleType="centerCrop"? – Lukas Batteau Jun 19 '12 at 12:45
works like a charm, thanks. scaleType depend on situation, for example i needed exactly this. – David Jan 18 '13 at 17:47
This's a little bit barbarian way of resizing the view. What happens if the view bounds change after you set the bitmap to the ImageView? This's why it should be done in onMeasure(), which can be implemented if you make a custom subclass of ImageView. – Aron Lorincz Mar 17 '14 at 13:48
1

All I needed was the fitCenter and adjustViewBounds, the rest of the code at least for me was unnecessary – kingargyle May 22 '15 at 19:13
This works for me and don't need to add any code. Without the adjustViewBounds if the image width was smaller than imageView width, it was not scaling up, so the height was stopping to the native height and on the width some bands did appear. – Cristi Băluță Apr 04 '19 at 04:44

score 18 · Answer 5 · edited Jul 03 '17 at 16:08

18

This worked for me:

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

edited Jul 03 '17 at 16:08

Tim Biegeleisen

502,043
27
286
360

answered Mar 28 '13 at 10:31

Mike6679

5,547
19
63
108

score 12 · Answer 6 · answered Jun 11 '19 at 10:27

This is how it worked for me inside a ConstraintLayout:

<ImageView
    android:id="@+id/myImg"
    android:layout_width="300dp"
    android:layout_height="300dp"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"/>

Then in code, I set the drawable as:

ImageView imgView = findViewById(R.id.myImg);
imgView.setImageDrawable(ResourcesCompat.getDrawable(getResources(), R.drawable.image_to_show, null));

This fits the image nicely according to its aspect ratio and keeps it in centre.

score 11 · Answer 7 · edited Apr 24 '17 at 11:49

11

this solved my problem

android:adjustViewBounds="true"
android:scaleType="fitXY"

edited Apr 24 '17 at 11:49

Anders R. Bystrup

15,729
10
59
55

answered Apr 24 '17 at 11:30

shafiq-ur-rehman

129
1
2

It doesn't preserve the aspect ratio of the image for me. – Dmitry Aug 23 '18 at 08:39

score 9 · Answer 8 · edited Sep 02 '12 at 16:37

9

Take a look at ImageView.ScaleType to control and understand the way resizing happens in an ImageView. When the image is resized (while maintaining its aspect ratio), chances are that either the image's height or width becomes smaller than ImageView's dimensions.

edited Sep 02 '12 at 16:37

biegleux

13,179
11
45
52

answered Mar 26 '10 at 09:09

Samuh

36,316
26
109
116

score 9 · Answer 9 · edited Nov 25 '14 at 14:38

9

Below code Working for scale image as aspect ratio:

Bitmap bitmapImage = BitmapFactory.decodeFile("Your path");
int nh = (int) ( bitmapImage.getHeight() * (512.0 / bitmapImage.getWidth()) );
Bitmap scaled = Bitmap.createScaledBitmap(bitmapImage, 512, nh, true);
your_imageview.setImageBitmap(scaled);

edited Nov 25 '14 at 14:38

Lukasz 'Severiaan' Grela

6,078
7
43
79

answered Sep 12 '14 at 12:23

Mukesh Parmar

941
1
15
25

score 6 · Answer 10 · edited Nov 25 '14 at 14:31

I have an image smaller than the screen. To have it stretched proportionally to the max and centered in the view I had to use the following code:

<ImageView
    android:id="@+id/my_image"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_centerInParent="true"
    android:adjustViewBounds="true"
    android:layout_weight="1"
    android:scaleType="fitCenter" />

Have in mind though, that if you have a relative layout and have some elements set to be above or below the ImageView, they will be most likely overlapped by the image.

score 6 · Answer 11 · answered May 05 '16 at 06:29

6

Use these properties in ImageView to keep aspect ratio:

android:adjustViewBounds="true"
android:scaleType="fitXY"

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:scaleType="fitXY"
    />

answered May 05 '16 at 06:29

Atif Mahmood

8,882
2
41
44

Only this answer helped me. Thanks! – Dmitry Aug 23 '18 at 08:40

score 5 · Answer 12 · edited Dec 20 '18 at 06:15

5

If image quality decreases in: use

android:adjustViewBounds="true"

instead of

android:adjustViewBounds="true"
android:scaleType="fitXY"

edited Dec 20 '18 at 06:15

Pradeep

9,667
13
27
34

answered Dec 20 '18 at 06:09

Sumit Singh

1,150
13
17

score 3 · Answer 13 · answered Dec 10 '12 at 12:14

3

For anyone of you who wants the image to fit exact the imageview with proper scaling and no cropping use

imageView.setScaleType(ScaleType.FIT_XY);

where imageView is the view representing your ImageView

answered Dec 10 '12 at 12:14

oneConsciousness

320
2
7

5

Nope, this changes the aspect ration. The docs say: "Scale in X and Y independently, so that src matches dst exactly. This may change the aspect ratio of the src." – Rose Perrone May 28 '13 at 19:58
By the way, this FIT_XY can not be used for changing the width/height of the image for displaying on the imageview. – Bay Feb 27 '18 at 21:32
`ScaleType.FIT_XY` does not preserve the aspect ratio. `ScaleType.FIT_XY` will stretch the image to exactly fit the `ImageView` dimensions. – iCantC Oct 17 '21 at 15:29

score 3 · Answer 14 · answered Mar 10 '15 at 12:36

You can calculate screen width. And you can scale bitmap.

 public static float getScreenWidth(Activity activity) {
        Display display = activity.getWindowManager().getDefaultDisplay();
        DisplayMetrics outMetrics = new DisplayMetrics();
        display.getMetrics(outMetrics);
        float pxWidth = outMetrics.widthPixels;
        return pxWidth;
    }

calculate screen width and scaled image height by screen width.

float screenWidth=getScreenWidth(act)
  float newHeight = screenWidth;
  if (bitmap.getWidth() != 0 && bitmap.getHeight() != 0) {
     newHeight = (screenWidth * bitmap.getHeight()) / bitmap.getWidth();
  }

After you can scale bitmap.

Bitmap scaledBitmap=Bitmap.createScaledBitmap(bitmap, (int) screenWidth, (int) newHeight, true);

score 3 · Answer 15 · answered Apr 06 '17 at 19:39

3

When doing this programmatically, be sure to call the setters in the correct order:

imageView.setAdjustViewBounds(true)
imageView.setScaleType(ImageView.ScaleType.CENTER_CROP)

answered Apr 06 '17 at 19:39

lukasz

3,121
1
21
20

score 2 · Answer 16 · answered Aug 19 '12 at 15:33

2

If you want your image occupy the maximum possible space then the best option would be

android:layout_weight="1"
android:scaleType="fitCenter"

answered Aug 19 '12 at 15:33

Mohsen Afshin

13,273
10
65
90

score 2 · Answer 17 · answered Jan 17 '17 at 02:15

2

Yo don't need any java code. You just have to :

<ImageView
android:layout_width="match_parent"
android:layout_height="match_parent"
android:adjustViewBounds="true"
android:scaleType="centerCrop" />

The key is in the match parent for width and height

answered Jan 17 '17 at 02:15

Romu Dizzy

113
2
8

score 1 · Answer 18 · answered Jun 26 '13 at 16:07

1

I use this:

<ImageView
android:id="@+id/logo"
android:layout_width="fill_parent"
android:layout_height="fill_parent"
android:layout_centerInParent="true"
android:scaleType="centerInside"
android:src="@drawable/logo" />

answered Jun 26 '13 at 16:07

Flavio Capaccio

706
4
15

I also set `android:adjustViewBounds="true"`. `centerInside` was the way to go to prevent cropping and maintaining the aspect ratio. – Martin Braun May 04 '21 at 00:01

score 1 · Answer 19 · answered Aug 20 '13 at 13:11

1

Try using android:layout_gravity for ImageView:

android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_gravity="center_vertical|center_horizontal"
android:layout_weight="1"

The example above worked for me.

answered Aug 20 '13 at 13:11

ITisha

902
2
12
14

1

android:layout_weight="1" is the key. – nima Oct 17 '14 at 05:54

score 1 · Answer 20 · edited Jun 20 '20 at 09:12

1

I have an algorithm to scale a bitmap to bestFit the container dimensions, maintaining its aspect ratio. Please find my solution here

Hope this helps someone down the lane!

edited Jun 20 '20 at 09:12

Community

1
1

answered Apr 08 '14 at 08:29

Parth Kapoor

1,494
12
23

score 1 · Answer 21 · edited Feb 11 '19 at 12:59

Pass your ImageView and based on screen height and width you can make it

    public void setScaleImage(EventAssetValueListenerView view){
        // Get the ImageView and its bitmap
        Drawable drawing = view.getDrawable();
        Bitmap bitmap = ((BitmapDrawable)drawing).getBitmap();
        // Get current dimensions
        int width = bitmap.getWidth();
        int height = bitmap.getHeight();

        float xScale = ((float) 4) / width;
        float yScale = ((float) 4) / height;
        float scale = (xScale <= yScale) ? xScale : yScale;

        Matrix matrix = new Matrix();
        matrix.postScale(scale, scale);

        Bitmap scaledBitmap = Bitmap.createBitmap(bitmap, 0, 0, width, height, matrix, true);
        BitmapDrawable result = new BitmapDrawable(scaledBitmap);
        width = scaledBitmap.getWidth();
        height = scaledBitmap.getHeight();

        view.setImageDrawable(result);

        LinearLayout.LayoutParams params = (LinearLayout.LayoutParams) view.getLayoutParams();
        params.width = width;
        params.height = height;
        view.setLayoutParams(params);
    }

score 1 · Answer 22 · edited Dec 01 '20 at 13:22

Programatically apply aspect ratio to Imageview:

aspectRatio = imageWidth/imageHeight   
ratioOfWidth = imageWidth/maxWidth  
ratioOfHeight = imageHeight/maxHeight  


if(ratioOfWidth > ratioOfHeight){
    imageWidth = maxWidth 
    imageHeight = imageWidth/aspectRatio
} else if(ratioOfHeight > ratioOfWidth){
    imageHeight = maxHeight
    imageWidth = imageHeight * aspectRatio
}

After that you can use scaled bitmap to image view

Bitmap scaledBitmap= Bitmap.createScaledBitmap(bitmap, (int) imageWidth , (int) imageHeight , true);

score 0 · Answer 23 · answered Nov 07 '18 at 20:23

in case of using cardviewfor rounding imageview and fixed android:layout_height for header this worked for me to load image with Glide

    <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
             xmlns:tools="http://schemas.android.com/tools"
             android:layout_width="match_parent"
             android:layout_height="220dp"
             xmlns:card_view="http://schemas.android.com/apk/res-auto"
             >

    <android.support.v7.widget.CardView
            android:id="@+id/card_view"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center|top"
            card_view:cardBackgroundColor="@color/colorPrimary"
            card_view:cardCornerRadius="10dp"
            card_view:cardElevation="10dp"
            card_view:cardPreventCornerOverlap="false"
            card_view:cardUseCompatPadding="true">

        <ImageView
                android:adjustViewBounds="true"
                android:maxHeight="220dp"
                android:id="@+id/iv_full"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:scaleType="fitCenter"/>

    </android.support.v7.widget.CardView>
</FrameLayout>

score 0 · Answer 24 · answered Jan 29 '19 at 20:16

You can scale image that will also reduce the size of your image. There is a library for it you can download and use it. https://github.com/niraj124124/Images-Files-scale-and-compress.git

How to use 1)Import the compressor-v1.0. jar to your project. 2)Add the below sample code to test. ResizeLimiter resize = ImageResizer.build(); resize.scale("inputImagePath", "outputImagePath",imageWidth, imageHeight); Many more methods are there according to your requirement

myworldbox · Answer 25 · 2020-03-01T17:39:37.877

Quick answer:

<ImageView
        android:id="@+id/imageView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:scaleType="center"
        android:src="@drawable/yourImage"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

score -5 · Answer 26 · edited Aug 24 '13 at 09:32

-5

imageView.setImageBitmap(Bitmap.createScaledBitmap(bitmap, 130, 110, false));

edited Aug 24 '13 at 09:32

kleopatra

51,061
28
99
211

answered Aug 24 '13 at 09:28

user2099162

31
3

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

26 Answers26

Linked

Related