Android ImageView: Fit Width

Question

I download image and set it as a screen background dynamically using Imageview. I have tried ScaleType, to scale the image.

If image height is larger than width then ScaleTypes fitStart, fitEnd and fitCenter don't work. Android scale down the photo and fit it based on the height, but I see some extra blank space as part of the width.

I want to scale down the photo based on the width so that it fits the width and I don't care if there's some extra blank space as part of the height or if height is too long it is fine if it's going out of the view(if that's possible?).

ScaleType.XY scale the photo and fit everything in the ImageView and doesn't care about image height/weight ratio.

<ImageView 
                android:id="@+id/background"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="fitStart"
            />

Sharjeel · Accepted Answer · 2015-02-19T19:11:57.563

210

I ended up using this code:

<ImageView 
                android:id="@+id/background"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:adjustViewBounds="true"
                android:scaleType="centerCrop"
                android:src="@drawable/name"
            />

Make sure you set the image using src instead of background.

edited Feb 19 '15 at 19:11

answered Apr 03 '13 at 12:06

Sharjeel

15,588
14
58
89

2

This isn't proportional though, it just crops the image to fit... How can I fix this? – Ruchir Baronia Nov 07 '15 at 21:34
Oh, okay. THanks for the response. So it's impossible to fit an image proportionally on a screen? – Ruchir Baronia Nov 07 '15 at 22:21
What do you suggest I do? I want to have an image (full screen) in my app. The image appears stretched out. Is there any way to fix this? Thanks so much! – Ruchir Baronia Nov 07 '15 at 23:02
3

@Sharj From what I can tell, it's `"fitCenter"` instead of `"centerFit"`. – Jacksonkr Jun 08 '16 at 18:25
@sharj.Thanks its hepled me – Vision Coderz Nov 05 '16 at 16:16
short and simple. Thanks – Raj Bedi May 09 '19 at 12:17
Stack overflow should contain love emoji. <3 :) – Tom May 10 '21 at 09:32
adjustViewBounds solve my problem, thx – ahmfarisi Aug 09 '22 at 15:31

score 82 · Answer 2 · answered Sep 08 '14 at 15:01

82

android:adjustViewBounds="true" does the job!

answered Sep 08 '14 at 15:01

ViliusK

11,345
4
67
71

1

it's best answer – Md Manna Oct 07 '21 at 15:43

score 14 · Answer 3 · edited May 23 '17 at 12:10

14

This elegant solution found here will work like a charm for you.

Basically you just have to create a small class that extends ImageView and simply override the onMeasure method to adjust the width and height as you want. Here it scales to fit width by using:

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
    int width = MeasureSpec.getSize(widthMeasureSpec);
    int height = width * getDrawable().getIntrinsicHeight() / getDrawable().getIntrinsicWidth();
    setMeasuredDimension(width, height);
}

You would use this special ImageView like this:

<your.activity.package.AspectRatioImageView 
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_gravity="center_vertical"
    android:src="@drawable/test" />

edited May 23 '17 at 12:10

Community

1
1

answered Aug 22 '12 at 20:10

Michel-F. Portzert

1,785
13
16

I have a ListView containing images downloaded on the fly. So adapter returns a layout with ImageView which size can change dynamically. This was the only approach that worked for me. Thanks. – Dennis K Mar 19 '14 at 06:03
this isn't elegant at all, this is pretty hacky. look at the accepted answer. – mpellegr Nov 16 '18 at 21:14

score 9 · Answer 4 · edited Apr 01 '15 at 16:44

There is a simple method if you simply want to fill the width of screen and have height proportional (and know the ratio of the image) you can do this in OnCreate():

setContentView(R.layout.truppview_activity);
trupImage = (ImageView) findViewById(R.id.trupImage);

Display display = getWindowManager().getDefaultDisplay();
DisplayMetrics outMetrics = new DisplayMetrics();
display.getMetrics(outMetrics);
float scWidth = outMetrics.widthPixels;
trupImage.getLayoutParams().width = (int) scWidth;
trupImage.getLayoutParams().height = (int) (scWidth * 0.6f);

Where 0.6 is the ratio adjustment (you could also calc automatically of course if you know the w & h of image).

PS:
Here is the XML side:

  <ImageView
        android:id="@+id/trupImage"
        android:layout_width="match_parent"
        android:background="@color/orange"
        android:layout_height="match_parent" 
        android:adjustViewBounds="true" 
        android:scaleType="fitCenter" />

score 8 · Answer 5 · answered Oct 30 '19 at 18:57

if you want to fit the image whole parent block
it will stretch the image

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scaleType="fitXY"

And if you want to fit image whole parent with original ratio of image
it will crop out some part of image

        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:adjustViewBounds="true"
        android:scaleType="centerCrop"

score 6 · Answer 6 · edited Mar 09 '16 at 13:42

This works for me.

Create a class extends ImageView

    package com.yourdomain.utils;

    import android.content.Context;
    import android.graphics.drawable.Drawable;
    import android.util.AttributeSet;
    import android.widget.ImageView;

    public class ResizableImageView extends ImageView {

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

        @Override 
        protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {
            Drawable d = getDrawable();

            if (d != null) {
                int width = MeasureSpec.getSize(widthMeasureSpec);
                int height = (int) Math.ceil((float) width * (float) d.getIntrinsicHeight() / (float) d.getIntrinsicWidth());
                setMeasuredDimension(width, height);
            } else {
                super.onMeasure(widthMeasureSpec, heightMeasureSpec);
            }
        }
    }

In xml use the following instead of ImageView

    <com.yourdomain.utils.ResizableImageView
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/test" />

score 1 · Answer 7 · answered Aug 21 '12 at 16:56

I think you cant do it only with XML, you need to resize yourself, the bitmap

Display display = getWindowManager().getDefaultDisplay();
int width = display.getWidth();

        try {
            ((ImageView) findViewById(R.id.background))
                    .setImageBitmap(ShrinkBitmap(width));
        } catch (FileNotFoundException e) {
            e.printStackTrace();
        }

then

private Bitmap ShrinkBitmap(int width)
        throws FileNotFoundException {

    BitmapFactory.Options bmpFactoryOptions = new BitmapFactory.Options();
    bmpFactoryOptions.inJustDecodeBounds = true;
    Bitmap bitmap = BitmapFactory.decodeResource(getResources(),
            R.drawable.img, bmpFactoryOptions);
    int widthRatio = (int) android.util.FloatMath
            .ceil(bmpFactoryOptions.outWidth / (float) width);


    bmpFactoryOptions.inSampleSize = widthRatio;



    if (bmpFactoryOptions.inSampleSize <= 0)
        bmpFactoryOptions.inSampleSize = 0;
    bmpFactoryOptions.inPreferredConfig = Bitmap.Config.ARGB_8888;
    bmpFactoryOptions.inJustDecodeBounds = false;
    bitmap = BitmapFactory.decodeResource(getResources(),
            R.drawable.img, bmpFactoryOptions);
    return bitmap;

}

And the layout

 <ImageView
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/background"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
  />

Android ImageView: Fit Width

7 Answers7

Linked