How to stretch three images across the screen preserving aspect ratio?

Question

I need to display three same size images (200 X 100) side by side (no gaps) on top of the screen. They should occupy entire width of the screen and preserve aspect ratio. Is it possible to accomplish that using only layout xml file, or I need to use java code?
Solution shoud be resolution independant... Can anybody post a solution or link for this (or similar) problem? Thanks!

I am currently trying to solve the same problem! Did not find a solution yet :(. might work of we wrote our own ImageView that automatically adjusts its height? But would be nicer to use the original ImageView. — Patrick Boos, Jan 14 '11 at 05:36
Here is a **simple magic formula** that will solve the problem in some cases: http://stackoverflow.com/a/23777047/294884 — Fattie, May 21 '14 at 07:44

score 145 · Answer 1 · edited May 23 '17 at 11:54

145

Got it working! But as I said above, you need to create your own class. But it is pretty small. I created it with the help of this Bob Lee's answer in this post: Android: How to stretch an image to the screen width while maintaining aspect ratio?

package com.yourpackage.widgets;

import android.content.Context;
import android.util.AttributeSet;
import android.widget.ImageView;

public class AspectRatioImageView extends ImageView {

    public AspectRatioImageView(Context context) {
        super(context);
    }

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

    public AspectRatioImageView(Context context, AttributeSet attrs, int defStyle) {
        super(context, attrs, defStyle);
    }

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

Now to use it in the XML:

<com.yourpackage.widgets.AspectRatioImageView 
    android:id="@+id/image"
    android:src="@drawable/yourdrawable" 
    android:layout_width="match_parent" 
    android:layout_height="wrap_content"
    android:layout_alignParentTop="true" 
    android:layout_centerHorizontal="true" 
    android:adjustViewBounds="true" />

Have fun!

=====================================

Found another way to do the same only in XML by using android:adjustViewBounds="true". Here an example:

<LinearLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content" >

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:src="@drawable/image1" />

    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:src="@drawable/image2" />


    <ImageView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:adjustViewBounds="true"
        android:src="@drawable/image2" />

</LinearLayout>

edited May 23 '17 at 11:54

Community

1
1

answered Jan 14 '11 at 05:52

Patrick Boos

6,789
3
35
36

7

Watch out for when your drawable is null (e.g. you're downloading content off the Internet). Otherwise, works like a charm. – Artem Russakovskii Nov 15 '11 at 02:12
1

Just ran into 2 more problems in certain cases - getIntrinsicWidth() was returning 0 (division by 0), so you want to check for that. Also, once I put a check for whether getDrawable() is null, Android would crash if it is because I forgot to return super.onMeasure otherwise. – Artem Russakovskii Nov 16 '11 at 00:19
1

thank you for the information. I am wondering when it would return 0. Can you tell me more? Documentation says: "Return the intrinsic width of the underlying drawable object. Returns -1 if it has no intrinsic width, such as with a solid color." In -1 cases we would have to give a "default height" I guess. All depends on the exact problem that is tried to be solved. In my case it was photos that always had a width and height. The null problem makes sense, but i did not solve it, since in my code i never run into that problem. – Patrick Boos Nov 16 '11 at 03:04
I would like to scroll the image. How is this possible? Or have I added the `AspectRatioImageView` in the wrong layout? – Jan-Terje Sørensen Mar 21 '12 at 09:04
1

I managed to solve the scrolling issue modifying this [example](http://stackoverflow.com/questions/3058164/android-scrolling-an-imageview) – Jan-Terje Sørensen Mar 21 '12 at 12:05
You could add +1 to the computed height to account for the loss of precision due to the division. I've noticed that on certain occasions, there is a small number of empty space on each side of the image. Adding +1 fixed this. – Pascal Dimassimo Feb 28 '13 at 20:03
this guy deserves one of those fancy green checkmarks. i also made another class verbatim for imagebuttons and that works as well. – MrTristan Jun 04 '13 at 16:40
Check if `getDrawable()` is null and than call `setMeasuredDimension(widthMeasureSpec, heightMeasureSpec)` – Konstantin Konopko Sep 07 '13 at 00:53
Awesome! I used the one below with 'null'-check and let it extend from NetworkImageView from Volley library – Boy Jul 11 '14 at 09:45
It has a kind of padding in its left and right sides... How can I solve it? – Sonhja Jun 03 '15 at 10:40
how to attach the AspectRatioImageView class to the imageView in the activity? – stanley santoso Sep 10 '15 at 18:27

score 30 · Answer 2 · edited Jun 24 '12 at 06:25

Only a minor upgrade to take into account what could possible go wrong: null Drawable or 0 width.

package com.yourpackage.yourapp;

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

public class AspectRatioImageView extends ImageView {

public AspectRatioImageView(Context context)
{
    super(context);
}

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

public AspectRatioImageView(Context context, AttributeSet attrs,
        int defStyle)
{
    super(context, attrs, defStyle);
}

@Override
protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec)
{
    Drawable drawable = getDrawable();
    if (drawable != null)
    {
        int width =  MeasureSpec.getSize(widthMeasureSpec);
        int diw = drawable.getIntrinsicWidth();
        if (diw > 0)
        {
            int height = width * drawable.getIntrinsicHeight() / diw;
            setMeasuredDimension(width, height);
        }
        else
            super.onMeasure(widthMeasureSpec, heightMeasureSpec);
    }
    else
        super.onMeasure(widthMeasureSpec, heightMeasureSpec);
}
}

Thanks for this! Works much better when downloading images off the net :) — wasatz, May 10 '13 at 11:56
doesnt work with imageloader! when i am trying to download image from internet. — Manoj, Jun 19 '13 at 09:57

score 6 · Answer 3 · answered Jul 11 '13 at 07:38

6

Jake Wharton improves AspectRatioImageView class, you can set dominantMeasurement and aspectRatio via xml. You can find it in the link below.

https://gist.github.com/JakeWharton/2856179

answered Jul 11 '13 at 07:38

Yekmer Simsek

4,102
3
21
19

Ed S. · Answer 4 · 2011-01-13T06:26:17.853

1

I don't know about XML layouts and the android API, but the math is simple; find the width of the screen and divide by three. That's the width of each image. Now multiply the width by the original image's ratio of Height to Width. That's the height of each image.

int imageWidth = screenWidth / 3;
float ratio = originalImage.Height / (float)originalImage.Width;
int imageHeight = (int)(imageWidth * ratio);

edited Jan 13 '11 at 06:26

answered Jan 13 '11 at 06:07

Ed S.

122,712
22
185
265

in code of course possible. But how about doing it only in XML? – Patrick Boos Jan 14 '11 at 05:35

How to stretch three images across the screen preserving aspect ratio?

4 Answers4

Linked