Image stretching

Question

API 7 (2.1)

I'm implementing high resolution images for the drawable-hdpi folder of my app.

Along the bottom of my screen I have a LinearLayout with a fill_parent width. Inside, I have 3 LinearLayouts with a weight of 1. Inside these, I have an ImageView. In effect, I have 3 equally sized spaces for 3 images.

    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal">   
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/image1"
                />
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center"
            android:padding="0dip">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/image2"
                />
        </LinearLayout>
        <LinearLayout
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center">
            <ImageView
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:src="@drawable/image3"
                />
        </LinearLayout>
    </LinearLayout>

When the phone is in landscape mode, everything looks fine.

When the phone is in portrait mode, the images are scaled down because their widths are too wide for their 1/3rd space on the screen. The images still look fine.

Here's my problem:

My images scale fine, but it appears the LinearLayouts wrapping each image do not scale their height.

In landscape mode, the top and bottom of the LinearLayouts wrapping the images share an edge. Meaning, the top of the ImageView is aligned with the top of the LinearLayout wrapping it, and the bottom of the ImageView is aligned with the bottom of the LinearLayout wrapping it. In other words, the height of the LinearLayout == the height of the ImageView.

In portrait mode, the top and bottom of the LinearLayouts wrapping the images have a bunch of space between them and the top and bottom of the images, almost like there is padding. In other words, the height of the LinearLayout > the height of the ImageView. This is not desirable.

Any ideas?

It's almost like it's sizing the LinearLayout and ImageView, then squishing the ImageView to fit, and then not resizing the LinearLayout...

Answer 1

I suppose that its better to have another layout designed for the portrait mode. Do not use the same layout for both portrait and landscape modes. It would be better to have different layouts for portrait and landscape modes so that the control of the design will be in our hands.

Answer 2

You can try to design separate layouts for both orientations. In your project's res folder make a subfolder named layout-land. There copy or create a new layout with the same name. In this way you would have a complete control over the layout in any orientation.

Since you are using android:layout_weight="1" shouldn't linearLayouts equaly split the space hence an extra space would appear?

EDIT: It seems that it is ImageView that expands its height when LinerLayout has weight set. Add this line to each of your ImageViews:

android:adjustViewBounds="true"

Answer 3

I know that this isn't answering the question you asked, but it seems like it would be better to avoid multiple problems by changing the orientation of your linear layout to vertical when the device orientation changes. I believe you can do that with an OrientationEventListener.