CODEWITHSUNDEEP
androidimageviewwidthandroid-linearlayout
Jan Tacci
Jan Tacci

Reputation: 3211

LinearLayout ImageView Resize All Image Widths To Fit

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:

linear layout test screenshot

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:

updates

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

Upvotes: 7

Views: 19530

Answers (4)

Pragnani
Pragnani

Reputation: 20155

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

Upvotes: 15

blackjack
blackjack

Reputation: 101

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.

Upvotes: 7

Brian DuVerneay
Brian DuVerneay

Reputation: 31

@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"

Upvotes: 3

Guian
Guian

Reputation: 4689

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" />

Upvotes: 2

Related Questions