9

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,

user277827
  • 207
  • 1
  • 4
  • 5

3 Answers3

10

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.

Matt Swanson
  • 1,194
  • 2
  • 11
  • 28
  • 17
    There's no need to do this, just don't use android:background. Use android:src instead (ImageView), or android:drawableLeft/Right/Bottom/Top (Button or ImageView), or android:button (ImageButton). – Romain Guy Mar 09 '10 at 08:36
  • @Romain: Can't we use a 9-patch drawable as button background in which we mark the icon portion of our button as unstretchable and all the extra space around it(the padding around the icon) as stretchable? So that when the background is re-sized only the extra portion is stretched? – Samuh Mar 09 '10 at 10:20
  • 1
    Thanks Matt and Romain, the android:src was exactly what I was looking for. That did the trick :-) – user277827 Mar 09 '10 at 13:44
  • 2
    @Samuh: Yes you can do that but why bother? There's an attribute for that. – Romain Guy Mar 10 '10 at 06:13
  • 3
    Also, when setting your image using **android:src** it helps to set the background to be transparent using **android:background="@null"** – Error 454 Jan 15 '11 at 22:51
  • 1
    If you are doing this dynamically (in code as opposed to XML) use imageView.setImageResource(R.drawable._____); – cyber-monk May 06 '11 at 22:00
3

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.

Raymond Chenon
  • 11,482
  • 15
  • 77
  • 110
2

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

Romain Guy
  • 97,993
  • 18
  • 219
  • 200