automatically resize ImageButtons in LinearLayout

Question

Summary: I want a horizontal row of ImageButtons to scale down evenly to fit in the screen size.

I have a row of ImageButtons at the top of the screen. A left-aligned logo ImageButton and then right-aligned ImageButtons for various actions.

Yes, that does sound a lot like a Honeycomb/ICS Action Bar, but the code is targeted for Froyo, so I need to implement the design in 2.2-compatible layouts.

I programmatically detect when I'm on a 7" screen or larger and switch to larger images for the ImageButtons (as the drawable-xlarge directory only works for 10" and up, and drawable-large works for 4" and up).

This works great on a phone or on a 10" tablet. However, on a 7" tablet, the images are too large for the space in portrait mode (the app is locked to portrait mode).

I have tried many different approaches to making the images scale down, as I'd rather not use yet another set of images just for 7" tablets. But the images are not spaced properly, or scale at different levels, or only some of the images appear on the screen. I've used RelativeLayout, LinearLayout, android:weightSum, setting the images as background images, as src images, etc.

EDIT: Another quirk I noticed in my experimentation was that if I set the same layout_weight, the layout worked, forcing each item to have the same width. If I want some items to have different widths--which is necessary in this case, as the first button needs to be substantially wider--then the layout breaks when I set a layout_weight that doesn't match the others. Only one or two of the items appear on screen, the rest presumable being pushed off.

Here's the layout I'm using. This is my best so far--it works great on 10" tablets and phones, and is almost tolerable on 7" tablets. But the logo--which should be the same height as the buttons and about 2.5 times wider--is noticeably taller than the other buttons. Any suggestions on improving the layout?

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/actionBarLayout"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0"
    android:padding="5dip"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="@drawable/action_bar_bg"
     >

    <ImageButton
         android:id="@+id/logoButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/save_logo_03"
         android:padding="2dip"
         android:adjustViewBounds="true"
         android:scaleType="centerInside"
          />
     <View
         android:id="@+id/spacer"
         android:layout_width="50dip"
         android:layout_height="1dip"
         android:layout_weight="1"
         android:visibility="invisible"
         />
     <ImageButton
         android:id="@+id/listButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:src="@drawable/list_button"
         android:background="@null"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

     <ImageButton
         android:id="@+id/mapButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/map_button2"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

     <ImageButton
         android:id="@+id/ltoButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/lto_button"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

     <ImageButton
         android:id="@+id/searchButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="1"
         android:background="@null"
         android:src="@drawable/search_button"
         android:adjustViewBounds="true"
         android:padding="2dip"
         android:scaleType="centerInside"
          />

</LinearLayout>

Answer 1

Unfortunately, in the end I did have to programmatically change the button sizes depending on the size of the screen.

My final layout looked like this (sanitized):

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_weight="0"
    android:padding="5dip"
    android:gravity="center_vertical"
    android:orientation="horizontal"
    android:background="@drawable/action_bar_bg"
     >
     <ImageButton
         android:id="@+id/logoButton"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:adjustViewBounds="true"
         android:src="@drawable/logo"
         android:scaleType="centerInside"
          />

     <View
         android:layout_width="0dp"
         android:layout_height="0dp"
         android:layout_weight="1"/>

     <ImageButton
         android:id="@+id/button1"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button1"
         android:scaleType="centerInside"
         android:adjustViewBounds="true"
         />

     <ImageButton
         android:id="@+id/button2"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button2"
         android:scaleType="centerInside"
         android:adjustViewBounds="true"
          />

     <ImageButton
         android:id="@+id/button3"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button3"
         android:scaleType="centerInside"
         android:adjustViewBounds="true"
          />

     <ImageButton
         android:id="@+id/button4"
         android:layout_width="wrap_content"
         android:layout_height="wrap_content"
         android:layout_weight="0"
         android:background="@null"
         android:padding="2dip"
         android:src="@drawable/button4"
         android:adjustViewBounds="true"
         android:scaleType="centerInside"
          />

</LinearLayout>

Notice the empty View that fills up available space, pushing the other buttons over to the right side of the screen.

In the code, I check the screen size. If it seems to be >= 7", then I switch to larger images. If it seems to be >=7" but < 9", then I programmatically change the size of the images--and that I had to experiment with to come up with just the right number for it to work. If I had more images or they changed, I would have to repeat it. I'm not proud of such an inflexible solution, but I couldn't find anything else that worked.

Answer 2

This is what I've got:

In your specific case, we can say that your app layout and buttons size are under dependecy of:

• The mobile device screensize/resolution;
• The number of buttons in the row;

I recommend 2 approaches to you:

• Implementing your layout with RelativeLayout and weight tags. Flexible layouts can be made very easy with these ones;
• Programatically define your button sizes using DisplayMetrics class, something like the snippet in the end of this post, and use an extra .xml file (say integer.xml) where you can define a constant value for your number of buttons ;

In this snippet, dm is a structure that holds your device resolutions.

 DisplayMetrics dm = new DisplayMetrics(); context.getWindowManager().getDefaultDisplay().getMetrics(dm); 

Hope it helped you! :)