Android: How to prevent image from being scaled in ImageView or ImageButton?

Question

How can I prevent my bitmap from being scaled automatically in an ImageView or ImageButton if the view or button is stretched using "fill_parent" or using "weight"?

This will be useful, for example, to create a 4-button toolbar at the top of the screen where the buttons are equally spaced, but the images inside the buttons keep getting streched even if I use scaleType="center", which should prevent scaling according to the doc, but it doesn't.

Any insight is appreciated!

Thanks,

Answer 1

I have found that when using android:background automatically scales the image you are using there to the size of the View.

I tried using the android:src to put the image in the view. The image did not scale, but I could not get the image to center relative to the size of the View.

So I tried making the whole Button it's own relative layout and this is what I used:

<RelativeLayout android:id="@+id/RelativeLayout01" 
                android:layout_height="fill_parent" 
                android:layout_width="fill_parent">
                <ImageButton android:id="@+id/ImageButton01"    
                             android:layout_height="fill_parent"
                             android:layout_width="fill_parent"></ImageButton>
                <ImageView android:id="@+id/ImageView01"
                           android:layout_width="wrap_content"
                           android:layout_height="wrap_content" 
                           android:background="@drawable/cardback1" 
                           android:layout_centerInParent="true"></ImageView>
</RelativeLayout>

The ImageButton is in the background and will always be the same size as the layout. The ImageView however will always stay centered in the RelativeLayout and will not scale. This way the RelativeLayout itself can grow and move and the Image on top of the button will always stay the same size, but the button will grow. The image will however shrink if the Layout becomes smaller than the image itself.

I think that's what you were looking for. There may be a better way to do this, but this is all I can come up with right now.

Answer 2

Simply modify your drawable, apply a larger transparent background. Say my drawable in hdpi is 41*48 px icon.png . I created a new image 60*60 px with a transparent background , copy-paste the previous icon.png and save under the same name. This way you don't need to touch your layouts .

Then you can check the button zone larger if you apply a non transparent android:background:

<ImageButton android:id="@+id/widget_open"
android:src="@drawable/icon_widget_arrow_up"
android:background="#ff777777"
android:layout_height="wrap_content"
android:layout_width="wrap_content"></ImageButton>

Apply the previous and new drawable to android:src , you should clearly see ImageButton area.

By the way, I am running the app in compatibility mode.

Answer 3

If the image is scaled, make sure you are not running your app in compatibility mode (for instance if you target Android 1.5/1.6 without supporting multiple densities and you run the app on Android 2.0.)