ImageView fills parent's width OR height, but maintains aspect ratio

Question

I have a square image (though this problem also applies to rectangular images). I want to display the image as large as possible, stretching them if necessary, to fill their parents, while still maintaining the aspect ratio. The image is smaller than the ImageView. The problem is, I can't stretch the image and "match" the height and width of the ImageView.

This is my XML layout file:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="wrap_content"
                android:padding="10dp">

    <ImageView android:id="@+id/image"
               android:layout_width="fill_parent"
               android:layout_height="fill_parent"
               android:adjustViewBounds="true"
               android:scaleType="fitCenter"
               android:layout_marginTop="10dp"/>

    <TextView android:id="@+id/name"
              android:layout_below="@id/image"
              android:layout_alignLeft="@id/image"
              android:layout_marginTop="20dp"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:textSize="18dp"/>

    <TextView android:id="@+id/name2"
              android:layout_below="@id/name"
              android:layout_width="fill_parent"
              android:layout_height="wrap_content"
              android:textSize="14dp"/>


</RelativeLayout>

I have used many combinations of fill_parent, wrap_content with multiple scaleTypes: fitCenter, fitStart, fitEnd, centerInside, and they all draw the images in the right aspect ratio, but none of them actually scale the images up and the ImageView itself, resulting in either the TextViews get pushed all the way down off the screen, blank spaces inside the ImageView, image not scaled, or image cropped.

I can't quite figure the right combination for this.

Solution 1

These:

android:layout_height="wrap_content"
android:scaleType="fitStart"
android:adjustViewBounds="true"

should resize the image and change the size of the bounds to fit the new image size. If it does not do that on your device post the image you are using and what device you are testing on.

Solution 2

Use this code : android:scaleType="fitXY"

For more details about image scaling, look what's motioned in this article here

Summary:

• center

Center the image in the view, but perform no scaling

• centerCrop

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or larger than the corresponding dimension of the view (minus padding). The image is then centered in the view

• centerInside

Scale the image uniformly (maintain the image's aspect ratio) so that both dimensions (width and height) of the image will be equal to or less than the corresponding dimension of the view (minus padding)

• fitCenter

• fitEnd

• fitStart

• fitXY

• matrix

Scale using the image matrix when drawing

more details here new article

Solution 3

This xml code will work!. If you are specifying that your apps width is always same as the window, then the android:adjustViewBounds="true" will set the height respective to the ration of the image.

        <ImageView
        android:adjustViewBounds="true"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/screen"/>

Solution 4

Use this code with view layout parameters as wrapcontent

android:adjustViewBounds="true"

Hope this it will work.

Solution 5

I had the same issue, android:adjustViewBounds not doing its job and having a padding at the top of the image. Into a relative layout that had match_parent values for the width and the height, I had:

   <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
   android:orientation="vertical" android:layout_width="match_parent"
   android:layout_height="match_parent"
   android:background="@color/transparent">

   <ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitStart"
    android:adjustViewBounds="true" ...

I changed the Relative layout to a Linear layout with wrap_content values for width and height and now it is ok:

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"

View more solutions

Comments

[garbagecollector]

Does not work. I cannot post the images because they are proprietary, but they are just standard 128x128 PNGs. This also occuring on the emulator. So it's not device specific issues. These images are smaller than the ImageView. I think that's where the problem is.

[aleb]

adjustViewBounds is not enough, it "will not increase the size of the ImageView beyond the natural dimensions of the drawable": stackoverflow.com/a/7732684/804479

[aleb]

adjustViewBounds is not enough, it "will not increase the size of the ImageView beyond the natural dimensions of the drawable": stackoverflow.com/a/7732684/804479

[Nari Kim Shin]

Why this answer doesn't have any vote? Only this one works for me!

[Stephen Niedzielski]

Because it doesn't maintain the aspect ratio of the source image. See here.

[Christophe Fondacci]

I think the solution is to use scaleType="centerCrop", if you can accept the image to be cropped...

[Hristova]

Worked perfectly for me. Thanks!

[Erum]

@Foam Guy will this work if i m getting images from server ?

[FoamyGuy]

@Erum shouldn't matter where the image came from.

[Matt]

Showing all cases with each image was very helpful to me. Thanks!

[CoolMind]

After many hours of searching I also changed RelativeLayout to LinearLayout. But in my case an ImageView hadn't been shown.

[Steve]

first time when I used this solution in recyclerview images it is working.Then I have uploaded new image and checked all images in recyclerview it is now working.Anyone know why it is happening?

[Marcos Vasconcelos]

If ImageView.background=#000000 you see that ImageView occupy the space of parent layout;

[Jona]

I know we aren't supposed to add these kind of comments but... You rock!

[Shady Mohamed Sherif]

best answer now I can understand all of them

[Иво Недев]

May the stackoverflow god bless your soul. I spent a whole day on this, gave up with either a narrow image or one with white sides. Came back this morning and figured "Hey let me google it" @garbagecollector should really accept this answer!!

[Matan Koby]

My ImageView: "<ImageView android:id="@+id/IV_InformationPic" android:layout_width="wrap_content" android:layout_height="300dp" android:adjustViewBounds="true"/>" Was inside a Relative layout, the ImageView would deal with it's height correctly but it had extra padding on the left and the right somewhy. After reading this answer and @CoolMind's comment, I tried and changed it into a LinearLayout and poof, the ImageView has no more side padding. I would love to understand this voodoo.

[CoolMind]

@MatanKoby, happy coding! Android has many secrets and dungeons.

[flankechen]

@ИвоНедев stackoverflow god is not blessing me somehow, it's not working. image aspect ratio is not keep.