Scaling an image to max available width, keeping aspect ratio and avoiding ImageView extra space

Question

I have this simple layout XML, and a green_square.png file which is 30X30 pixels

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <ImageView
        android:background="@color/red"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:adjustViewBounds="true"
        android:scaleType="fitStart"
        android:src="@drawable/green_square"/>

</LinearLayout>

What I'm trying to achieve is scaling the image to fill the parent width, keeping it's aspect ratio with no extra space of the ImageView.

I've added a red background to the ImageView just for reference of the extra space I want to avoid.

Here is my goal

It looks like this issue is bugging many users, check out this link http://groups.google.com/group/android-developers/browse_thread/thread/89d21a582ebc5b21 — Shlomi Schwartz, Jan 03 '12 at 13:18
try this one out, did the job for me: [http://stackoverflow.com/a/4688335/935075](http://stackoverflow.com/a/4688335/935075) — sebataz, Jan 03 '12 at 14:04
Excellent! that did the trick, however it is so strange there is no attribute to set this behavior on the original ImageView — Shlomi Schwartz, Jan 03 '12 at 15:31
It is still not perfect, the match_parent attribute on the new class does not work as accepted nor the weight:( — Shlomi Schwartz, Jan 03 '12 at 15:47
@sebataz : thank's...it work for me :)...I set attribute android:src in xml and for runtime i used "View.setImageResource(..)" — CoDe, Jan 16 '14 at 17:45

score 46 · Answer 1 · edited Nov 23 '21 at 05:49

46

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

this works for me. Full width of parent and center crop to keep aspect ratio

edited Nov 23 '21 at 05:49

Mangaldeep Pannu

3,738
2
26
45

answered Mar 24 '13 at 15:25

Blucreation

531
5
14

4

`centerCrop` stretches the image to the full width, but likely cropping off the top and bottom as the _view_ keeps the original height still, but the image aspect ratio is kept so it's not squashed or stretched. `adjustViewBounds` allows the height to grow to avoid the actual cropping and have the _view_ also keep the aspect ratio of the image. Used together, they do what is needed for the OP. – lilbyrdie Dec 15 '14 at 15:59
substituting `centerCrop` for `fitXY` I don't notice any difference. What difference is there? – Adam Johns Oct 17 '15 at 12:28

score 1 · Answer 2 · answered Oct 06 '16 at 05:31

It's so simple. Just make the width fill_parent and height wrap_content. Here is the I figured it out.

<ImageView
    android:id="@+id/game"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:scaleType="centerCrop"
    android:adjustViewBounds="true"
    android:src="@drawable/ic_game" 
    />

score 0 · Answer 3 · edited Oct 20 '12 at 01:01

In my view, this ImageView extra layout is a bug. I had the same thing happen. As a result, text that I wanted to follow the green_square followed the extra layout. So what I did was specify the text relative to the bottom of the screen. That way, the text would go over the extra layout. I admit, it wasn't the best solution, but it looks much better than having a huge space between the green_square and the text.

score 0 · Answer 4 · answered Nov 19 '19 at 20:21

There lots of great answers here which actually works. I just what to share the way I do this now with a more modern XML syntax, the constraint view. Trust me constraint view rooks!

<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#394BAB"
    tools:context="com.appdomain.app.apppro.ActivityName">

    <ImageView
        android:id="@+id/nice_img"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="0dp"
        android:src="@drawable/green_square"
        android:scaleType="centerCrop"
        android:adjustViewBounds="true"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent"/>

</android.support.constraint.ConstraintLayout>

of course the tools:context="com.collectsavings.collect.collectpro.LoginAndRegisterPrompt" and android:src="@drawable/green_square" Should all match your app activity context and drawabl resources respectively.

score -1 · Answer 5 · answered Jan 03 '12 at 10:12

-1

Use scale type "fitCenter" or "fitxy"

answered Jan 03 '12 at 10:12

loks

490
3
10

1

Thanks for the reply, however, fitCenter just centers the view leaving the margins on top and bottom instead of just bottom (if using fitStart) and fitXY makes the image lose it's ratio. – Shlomi Schwartz Jan 03 '12 at 11:00
you can set bitmap image in code rather then xml by creating through Bitmapfactory but you can't fit 30X30 pixels image in full screen without lossing it's aspect ratio. Use BitmapFactoey to create bitmap image and then create scale image from Bitmap Create function it will help you .. http://developer.android.com/reference/android/graphics/Bitmap.html and http://developer.android.com/reference/android/graphics/BitmapFactory.html – loks Jan 04 '12 at 05:04
Thank you for the reply, a code solution is an option but I still want to make sure (for the knowledge) if it is possible from within the XML – Shlomi Schwartz Jan 04 '12 at 09:35
i don't think it has been done with XML ,if any chance then it must be done with code part . – loks Jan 04 '12 at 09:46

score -4 · Answer 6 · answered Jan 03 '12 at 10:24

-4

Try this,

<?xml version="1.0" encoding="utf-8"?>

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

<ImageView
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:background="@color/red"
    android:scaleType="centerCrop"
    android:src="@drawable/green_square" />

</LinearLayout>

answered Jan 03 '12 at 10:24

King RV

3,760
1
15
16

Thanks for the suggestion, however this layout fills the entire view. Here is what I like to achieve https://lh6.googleusercontent.com/-0UaWzbAvVkA/TwLdxtHZx6I/AAAAAAAAByA/YQh5Ein-2Fs/w500-h423-k/screen-shot.jpg – Shlomi Schwartz Jan 03 '12 at 10:55
Down-voted due to lack of proper description. It is just a chunk of code, not an answer. – Octavian Helm Jan 03 '12 at 11:17

Scaling an image to max available width, keeping aspect ratio and avoiding ImageView extra space

6 Answers6

Linked