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?

Was it the layout_weight or did you go for the scaleType? Just so I can edit the answer for other users... — Entreco, Dec 20 '11 at 21:07
@Entreco - one more thing that is happening - as i increase the padding on the container, it distorts the ratio again. Even with all different scaleTypes. Is the WYSIWYG editor not going to show it properly? or is there more to this one? — JT703, Dec 20 '11 at 21:41
could the scaleType not be doing anything because my image is set as the background and not the src? — JT703, Dec 20 '11 at 21:48
I always prefer to put a margin on the children vs a padding on the parent. Also, setting the image as background rather than src HAS effect. I just don't know what's the best one. Good luck — Entreco, Dec 20 '11 at 21:58
I modified the answer. If you set the background to @null, and the src to your drawable, you can appropriately use the scaleType="centerInside" attribute — Entreco, Dec 20 '11 at 22:09

Entreco · Accepted Answer · 2013-12-06T09:19:04.677

3

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"/>

edited Dec 06 '13 at 09:19

answered Dec 20 '11 at 20:31

Entreco

12,738
8
75
95

Sorry, I had to undo that check mark. The image is still distorting. The layout-weight fixed most of the cases, but not the padding in the parent container is messing it up. The scale types don't seem to be effecting it. Could it be because my image is set as the background and not the src? – JT703 Dec 20 '11 at 21:50
1

I modified the answer. If you set the background to @null, and the src to your drawable, you can appropriately use the scaleType="centerInside" attribute – Entreco Dec 20 '11 at 22:09

score 2 · Answer 2 · answered Dec 20 '11 at 20:33

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).

Maintain circle image ratio for button on varying screen resolutions

2 Answers2