Laying out ImageButtons in Android that shrink if too large

Question

I am developing an Android application's home screen and I am trying to lay out 4 ImageButtons in android in the following orientation:

a | b
_____

c | d

For example A is centered in the top left of the screen, b is centered in the top right of the screen, c is centered in the bottom left of the screen, and d is centered in the bottom right of the screen. All of the images are 512x512 pixels and therefore, since they are very big, should be automatically shrunk if the screen size is small. I am not concerned with stretching them.

I have tried essentially all the different kinds of layouts in Android and I'm having a terrible time trying to figure this out, after 2.5 hours of experimentation and research I am reaching out for help. Does anyone know how to do this or of a sample open source app that does this?

Answer 1

Edit: seems the trend is to have some sort of explanation before or after posting code. The solution below is made up of an unhealthy amount of LinearLayouts and nested weights. I divided the screen first into top and bottom halves, then divide each again by left and right halves (notice the alternating orientation) - giving us a quarter. I assumed you wanted your image to go somewhere in the center of that quarter, so we further divided that into 9, 3x3 rectangles by nesting weightSum=3 LinearLayouts. The final step is to place the ImageButton (I had ImageView, but that shouldn't matter) at the middle LinearLayout of the 3x3 grid, and give it a scaleType of centerInside - This scaleType is perfect if you have a large enough Image and wouldn't worry about stretching it to fill your layout. Plus, it doesn't distort the aspect ratio. Also, an important factor is using android:src instead of android:background so the ImageView would respect the scaleType.

<?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:weightSum="2">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:weightSum="2"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:weightSum="3"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1">
            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:weightSum="3">
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                    <ImageView
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:src="@drawable/ic_launcher"
                        android:scaleType="centerInside">
                    </ImageView>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                </LinearLayout>
            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1">
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:weightSum="3"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1">
            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:weightSum="3">
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                    <ImageView
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:src="@drawable/ic_launcher"
                        android:scaleType="centerInside">
                    </ImageView>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                </LinearLayout>
            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1">
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dip"
        android:layout_weight="1"
        android:weightSum="2"
        android:orientation="horizontal">
        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:weightSum="3"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1">
            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:weightSum="3">
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                    <ImageView
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:src="@drawable/ic_launcher"
                        android:scaleType="centerInside">
                    </ImageView>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                </LinearLayout>
            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1">
            </LinearLayout>
        </LinearLayout>
        <LinearLayout
            android:layout_width="0dip"
            android:layout_height="fill_parent"
            android:layout_weight="1"
            android:weightSum="3"
            android:orientation="vertical">
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1">
            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1"
                android:orientation="horizontal"
                android:weightSum="3">
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                    <ImageView
                        android:layout_width="fill_parent"
                        android:layout_height="fill_parent"
                        android:src="@drawable/ic_launcher"
                        android:scaleType="centerInside">
                    </ImageView>
                </LinearLayout>
                <LinearLayout
                    android:layout_width="0dip"
                    android:layout_height="fill_parent"
                    android:layout_weight="1">
                </LinearLayout>
            </LinearLayout>
            <LinearLayout
                android:layout_width="fill_parent"
                android:layout_height="0dip"
                android:layout_weight="1">
            </LinearLayout>
        </LinearLayout>
    </LinearLayout>
</LinearLayout>

Answer 2

You should set weights on your LinearLayouts and ImageButtons and the ImageButton ScaleTypes to fitXY like so

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">
    <LinearLayout
        android:layout_width="fill_parent"
        android:layout_height="0dp"
        android:layout_weight="1.0"
        android:orientation="horizontal>
        <ImageButton
            android:src="@drawable/myimage1"
            android:layout_height="fill_parent"
            android:layout_width="0dp"
            android:layout_weight="1.0"
            android:scaleType="fitXY"/>
        <ImageButton
            android:src="@drawable/myimage2"
            anroid:layout_height="fill_parent"
            android:layout_width="0dp"
            android:layout_weight="1.0"
            android:scaleType="fitXY"/>
    </LinearLayout>
    <LinearLayout
         //same as above horizontal layout with same children for buttons 3 and 4
    </LinearLayout>
</LinearLayout>

Weights divide up the space according to percentage of total weights of children. So if two children each have weight 1.0, they get 50% of the space. In order for weights to act on that view, you should specify the dimension you would like weight calculated to 0dp. ScaleType fitXY just fits the image into the space available to the ImageButton.