How do I keep the aspect ratio on image buttons in android?

Question

I have 5 square ImageButtons that I want to have lined up side by side on the bottom of the screen. I have each one set (different id's) as:

        <ImageButton          android:id="@+id/box1"           android:layout_width="fill_parent"          android:layout_height="wrap_content"           android:layout_gravity="center"          android:adjustViewBounds="true"          android:scaleType="fitXY"          android:layout_weight="1"          android:layout_margin="1dp"          />  

and I have the background assigned in main java like this:

    int[] imageIds = new int[] {R.id.box1,R.id.box2,R.id.box3,R.id.box4,R.id.box5};     for(int i = 0; i<5; i++){         imageButtons[i] = (ImageButton) findViewById(imageIds[i]);         imageButtons[i].setBackgroundResource(R.drawable.blank);     } 

What I would like to have it do is scale the width to fit neatly side-by-side at the bottom of the screen (which it does now ok), but have the height automatically scale to match the width as well. is this possible? I don't want to use setImageSource because then it puts a border around the imagebutton.

Answer 1

   <LinearLayout      android:layout_width="fill_parent"      android:layout_height="wrap_content"      android:id="@+id/layoutButtons">       <com.package.SquareButton                  android:layout_height="fill_parent"         android:layout_width="0dip"                   android:layout_weight="1"          <ImageView         android:id="@+id/box1"         android:layout_gravity="center"         android:adjustViewBounds="true"         android:scaleType="centerInside"         android:layout_height="wrap_content"         android:layout_width="0dp"                   android:layout_weight="1"          android:layout_marginLeft="5dp"          android:layout_marginRight="5dp"/>        </com.package.SquareButton>        <com.package.SquareButton                  android:layout_height="fill_parent"         android:layout_width="0dip"                   android:layout_weight="1"          <ImageView         android:id="@+id/box2"         android:layout_gravity="center"         android:adjustViewBounds="true"         android:scaleType="centerInside"         android:layout_height="fill_parent"         android:layout_width="fill_parent"                   android:layout_marginLeft="5dp"          android:layout_marginRight="5dp"/>  </com.package.SquareButton>     .........            </LinearLayout> 

And then add this custom button class:

public class SquareButton extends LinearLayout {      public SquareButton(Context context) {         super(context);     }      public SquareButton(Context context, AttributeSet attrs) {         super(context, attrs);     }      // This is used to make square buttons.     @Override     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {         super.onMeasure(widthMeasureSpec, widthMeasureSpec);     } } 

Answer 2

I have had a similar headache in trying to get my buttons in a row. The solution I found was to use ImageButton and the android:src property (setImageSource in code) in combination with android:background="@null"

As I understand it the background of an image button doesn't get affected by the adjustViewBounds, it is only the imageView which you set in android:src.

The default behavior is then to give you a square button with the imageView in the middle of it. You can override that by setting the background to @null, which leaves you with only the image.

You can then use either a LinearLayout or a table to layout your buttons. I did everything in XML and used the following layout to create a row of two buttons at the bottom of the screen that scale up or down maintaining the aspect ratio with different device screens sizes. Hope this helps.

<TableLayout         android:id="@+id/tableLayout2"     android:layout_width="fill_parent"      android:layout_height="wrap_content"     android:layout_alignParentBottom="true"     android:layout_marginBottom="20dip"     android:stretchColumns="*">      <TableRow>       <ImageButton         android:id="@+id/button_one"         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:layout_gravity="center"         android:layout_weight="0.5"         android:adjustViewBounds="true"         android:scaleType="fitCenter"           android:onClick="clickOne"         android:background="@null"         android:src="@drawable/button_one_drawable" />      <ImageButton         android:id="@+id/button_two"         android:layout_width="fill_parent"         android:layout_height="fill_parent"         android:layout_gravity="center"         android:layout_weight="0.5"         android:adjustViewBounds="true"         android:scaleType="centerInside"           android:onClick="clickTwo"         android:background="@null"         android:src="@drawable/button_two_drawable" />      </TableRow>       </TableLayout>