Maintain circle image ratio for button on varying screen resolutions

Question

I have an image button with a background image .png of a circle. I am testing it on different resolution screens and it looks different on every one. Most of them distort the circle shape by stretching it on one dimension.

What is the correct way to handle this? I am familiar with the 3 density levels needed for the highest quality image, but I think the problem is with the layout type attributes on either the image button itself or the parent container.

Snippet from main.xml...

<LinearLayout
    android:id="@+id/buttonArea"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:layout_weight="1"
    android:orientation="vertical"
    android:padding="30dp">

    <ImageButton
        android:id="@+id/button1"
        android:background="@drawable/button_inactive"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_gravity="center"/>

</LinearLayout>

removing the layout_weight attribute from the ImageButton fixed most cases, but not all. It seems that the padding is still changing the ratio of the circle. Scale types have no effect. Is it because my image is set as the background and not the src?

Answer 1

I think android:layout_weight="1" in your ImageButton is the cause of this. It will make your ImageButton the same size of your screen, no matter what size the screen is.

Try to remove that attribute. If that doesn't fix your problem, have a look at android:scaleType attribute

<ImageButton
    android:id="@+id/button1"
    android:layout_height="fill_parent"
    android:layout_width="fill_parent"
    android:layout_gravity="center"
    android:background="@null"
    android:src="@drawable/button_inactive"
    android:scaleType="centerInside"/>

Answer 2

You can set the scaleType attribute of your ImageView, to one that keeps the aspect ratio of your image. They all behave slightly different, so you'll have to use one that suits your needs (CenterInside is a good one to start with).

If this doesn't work, you can always specify set heigh/widths of your image (e.g. layout_width="128dp).