How to resize an ImageView within a given Layout in Android?

Question

I have a problem to make a proper layout for a special case. I experimented on that already for a while both in the designer and in code, but I couldn't find a solution, that's why I need your help.

I have to create a layout which should have a structure like pictured in the images below. It is mainly a combination of several linearLayouts. The problem I have is, that the picture can only be added within the code, because this layout is a detail view that displays information about items from a list.

• On the top is the layout without an image place holder (no loaded picture - indicated in black), here the width of "linearLayout_BigLeft" is given by the width of the two buttons and the textView (which all have content) in the "linearLayout_BelowImage".
• In the middle you see the layout after the picture has been loaded (image indictated in orange) in code. Depending on the aspect ratio of the android device the black colored gaps differ. I can't get the image to resize to the whole available height and adjusting its width accordingly. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).
• On the bottom is the layout which shows the ideal state. The image always should use the whole available space in height and resize accordingly in width. The "linearLayout_BelowImage" adjusts itself to the image size (the textView in it is getting wider).

Question: How can I get a layout (after the image is loaded in code) that looks like the bottom picture? The image, after loaded in code, has to resize itself, so it uses the whole available height and resizes its width accordingly. The "relativeLayout_Top" and the "linearLayout_BelowImage" have both fixed heights. The "scrollView_BigRight" adjusts itself based on the space that the "imageView_OrangeImage" doesn't need for itself.

I can deal with solutions that adjust the layout in code, after the image has been added, or solutions that makes the layout.xml itself flexilbe enough to deal with this situation.

Any help is highly appreciated. If you need any more information please let me know.

Below is the main content of my layout.xml, that is needed for this problem.

<?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"
    android:background="@color/white">

    <RelativeLayout
        android:id="@+id/relativeLayout_Top"
        android:layout_width="match_parent"
        android:layout_height="40dp"
        android:background="@color/blue" >
    </RelativeLayout>

    <LinearLayout
        android:id="@+id/linearLayout_Big"
        android:layout_width="match_parent"
        android:layout_height="0dp"
        android:layout_weight="1"
        android:orientation="horizontal"
        android:background="@color/transparent" >

        <LinearLayout
            android:id="@+id/LinearLayout_BigLeft"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:orientation="vertical"
            android:background="@color/transparent" >

            <ImageView
                android:id="@+id/imageView_OrangeImage"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                android:layout_weight="1"
                android:background="@color/black" />

            <LinearLayout
                android:id="@+id/linearLayout_BelowImage"
                android:layout_width="match_parent"
                android:layout_height="50dp"
                android:background="@color/blue_white_blue" >

                <Button
                    android:id="@+id/btn1"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:background="@color/blue" />

                <TextView
                    android:id="@+id/textView_BelowImageMiddle"
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:background="@color/white" />

                <Button
                    android:id="@+id/btn2"
                    android:layout_width="wrap_content"
                    android:layout_height="match_parent"
                    android:background="@color/blue" />
            </LinearLayout>
        </LinearLayout>

        <ScrollView
            android:id="@+id/scrollView_BigRight"
            android:layout_width="0dp"
            android:layout_height="match_parent"
            android:layout_weight="1"
            android:background="@color/grey" >
        </ScrollView>
    </LinearLayout>
</LinearLayout>

Answer 1

android:adjustViewBounds="true"

This one’s a manual fix for “optimized” code in scaleType="fitCenter". Basically when Android adds an image resource to the ImageView it tends to get the width & height from the resource instead of the layout. This can cause layouts to reposition around the full size of the image instead of the actual viewable size.

AdjustViewBounds forces Android to resize the ImageView to match the resized image prior to laying everything else out. There are times where this calculation won’t work, such as when the ImageView is set to layout_width="0dip". If it’s not working, wrap the ImageView in a RelativeLayout or FrameLayout which handles the 0dip flexible size instead

get it from this site

OR

Mode android:scaleType="centerCrop" uniformly stretches the image to fill the entire container and trims unnecessary.

You can change the way it default scales images using the android:scaleType parameter. By the way, the easiest way to discover how this works would simply have been to experiment a bit yourself!

get it here