How to Keep the Aspect Ratio on Image Buttons in Android

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

   <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);
    }
}

How to keep fixed aspect ratio for a button in android

I'm giving an improvement to your XML. I have not tested it, but it should work. The suggested changes are, instead of setting the image as background, set it as src for ImageButtons. Also, if you insists the Button, you can wrap each of the buttons with another layout and set its gravity property to "center". Take a look at the following XML.

<?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:background="@drawable/main_background"
    android:baselineAligned="false"
    android:orientation="vertical" >
    <LinearLayout
        android:id="@+id/linearLayout1"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@drawable/answer_bg"
        android:padding="10dip" >
<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center" >
            <Button
                android:id="@+id/b2"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" /></LinearLayout>
<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center" >
            <Button
                android:id="@+id/b3"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" /></LinearLayout>
<LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:gravity="center" >
            <Button
                android:id="@+id/b4"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:background="@drawable/img_background"
                android:height="50dip"
                android:text="@string/x"
                android:textStyle="bold" /></LinearLayout>
    </LinearLayout>
</LinearLayout>

Feel free to ask if it doesn't work.

android ImageButton scale and maintain aspect ratio

Set the width of the ImageButtons to fill_parent and use scaletype fitStart for the images that hug the left margin, and fitEnd for the ones on the right. Should do the trick, at least as far as your example image goes. You may have some spacing issues if the proportional width of the images exceed the screen width, but it should work for you.

Align ImageButton to fill width and maintain aspect ratio

I found an appropriate way by myself:

I decided to add the controls programmatically, and used the following to resize the image.

Display display = getWindowManager().getDefaultDisplay();
Point size = new Point();
display.getSize(size);
int width = size.x;
int height = size.y;

If you don't want the images to cover the whole width, reduce the width and height for example to 90%.
Also center the image for a good look.

---

Related Topics