LinearLayout ImageView Resize All Image Widths To Fit

Question

I have a horizontal linear layout that contains 3 image views. Each image view contains the same image which is 200x200 pixels. Here is my layout xml:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    tools:context=".MainActivity" >

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true" >

        <ImageView
            android:id="@+id/imageView1"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/image200" />

        <ImageView
            android:id="@+id/imageView2"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/image200" />

        <ImageView
            android:id="@+id/imageView3"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:src="@drawable/image200" />

    </LinearLayout>

</RelativeLayout>

And here is what it looks like:

Notice how the third image from the left is resized I assume because there is not enough real estate to contain 3x 200 pixel wide images.

What I would rather happen is instead of shrinking only the last image, all three images are resized evenly so that they all fit across the screen. How do I setup my layout to evenly fit all three images?

Thank you

UPDATE - after changing my settings here is what things look like:

Notice that the border around the image view is still 200 px high. Why is this happening?

Handgun

Answer 1

Set Width and height to match_parent for imageviews and set layout_weight=1 for all imageviews. Also set Attribute android:scaleType="fitXY"

Hankhanke

android:scaleType="fitXY" is useless since the layoutHeight is in wrap content mode – Sommers

it worked as i stated above but the problem is it was scaling the width of the images but not the height thus making the image aspect ratio all messed up. removing fitXY cause it to resize both dimensions. thanks! – Handgun

@JanTacci I thought you want to stretch your image height also, so I have suggested to use scaleType – Hankhanke

i did want to stretch height as well (to maintain aspect ratio) but fitXY didn't seem to work. it worked when I removed fitXY but kept the rest of your suggestions – Handgun

I have updated my original post with a screenshot of what things look like after applying the suggestions. Note, however, that even though the image has been shrunk the actual layout height is still 200 px. Why is this happening? – Handgun

Try setting height to wrap content – Hankhanke

I have one size for an image in my drawable folder but can I stretch it both X and Y proportionally to fit the screen? – Differentiable

Answer 2

This worked perfectly for me:

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

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

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

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

</LinearLayout>

Layout width when set to 0dp, layout width is what came into picture. And here layout width of the LinearLayout is match parent. So it will take the whole width, and as per the layout width of the images, they take space in the ratio of there weight.

Barathea

Please explain your answer! – Nympha

@Mazz: added a short explanation. Let me know if something is still confusing. – Barathea

Answer 3

@JanTacci Regarding your follow up question "Note, however, that even though the image has been shrunk the actual layout height is still 200 px. Why is this happening?"

I just had the same issue and fixed it by adding this property to each ImageView:

android:adjustViewBounds="true"

Fig

Answer 4

make your three images a width of 0dp

and add them a layout_weight of 1

;)

<ImageView
            android:id="@+id/imageView1"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:src="@drawable/image200" />

Sommers