android ImageButton do not stretch image

Question

How can I prevent the ImageButton from stretching the image?

Using this snippet:

 <ImageButton
                android:src="@drawable/prediction"
                android:background="?android:attr/selectableItemBackground"
                android:gravity="center_horizontal"
                android:scaleType="centerInside"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:contentDescription="some description"
                android:text="@string/predict"
                local:MvxBind="Click ExecuteQueryCmd" />

I get the following effect:

enter image description here

Image is 64x64 png.

All I want is for the ImageButton to respect native width and length, hence resolution, of the image it is being assigned. Recommendations based on a similar post is to use a Button, set its background to an image then use custom selectors but this sounds like a hack. Or is this the proper way to do this?

you have set its height and weight to wrap-content and it still streches?? seems like a weird problem — Illegal Argument, Nov 19 '13 at 15:22
i have used image button a lot in my application. Seeing your problem I checked my app it is not present in mine. I am using png images with transparent background. — Illegal Argument, Nov 19 '13 at 15:28
With transparent png's i also didnt have problems. The background image gets stretched but the image used in src attribute stays the same. — JanBo, Nov 19 '13 at 15:30
@Subash, and your images are not being stretched? If so, what is the parent container hosting these ImageButtons? — Klaus Nji, Nov 19 '13 at 19:57
@JanBo, that is an interesting comment worth exploring further. My background is transparent so maybe my image in src is getting stretched if Google now decides to use this as my background. — Klaus Nji, Nov 19 '13 at 20:51
@KlausNji my container is relativelayout and the background is an image for the whole activity — Illegal Argument, Nov 20 '13 at 05:43

score 9 · Answer 1 · answered Nov 19 '13 at 15:30

9

It work for me with

  <ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:adjustViewBounds="true"
    android:background="@android:color/transparent"
    android:contentDescription="some description"
    android:scaleType="centerInside"
    android:src="@drawable/ci_icon"
    android:text="@string/predict"
    local:MvxBind="Click ExecuteQueryCmd" />

Put your image in android:src attribute

answered Nov 19 '13 at 15:30

azerto00

1,001
6
18

Just did and image still stretches. Frustrating really how difficult it is to do such simple things on Android. Also note that I cannot use @android:color/transparent" because button no longer changes color when clicked. – Klaus Nji Nov 19 '13 at 22:43

score 0 · Answer 2 · answered Dec 22 '14 at 12:12

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.

score 0 · Answer 3 · answered Jan 27 '15 at 10:14

Do this:

<ImageButton
                android:src="@drawable/prediction"
                android:background="?android:attr/selectableItemBackground"
                android:scaleType="fitXY"
                android:adjustViewBounds="true"
                android:layout_height="wrap_content"
                android:layout_width="wrap_content"
                android:contentDescription="some description"
                android:text="@string/predict"
                local:MvxBind="Click ExecuteQueryCmd" />

android ImageButton do not stretch image

3 Answers3