How can I stretch the image in imagebutton to the whole area of the imagebutton?

Question

Here is a picture that will help you understand my problem:

It's a "1"

I want to stretch the image shown inside ImageButton to the whole area of the ImageButton. As you can see, the picture with the number 1 only take about 95% of the ImageButton and you can also see the boundaries of the ImageButton.

I still want to maintain the image button style

Here's how I am using ImageView:

<ImageButton
    android:id="@+id/secondActivityBbuttonDownRight"
    android:layout_width="0dip"
    android:layout_height="match_parent"
    android:layout_weight="0.5"
    android:scaleType="fitStart"
    android:src="@drawable/111" />

I think I found out what is my problem. I need a custom component that can contain only an image and have a clicking effect.

add android:background="@android:color/transparent" to the ImageButton — Adrián Rodríguez, Feb 14 '13 at 13:19
I edited you post, see http://meta.stackexchange.com/questions/85516/ for how to add an image to your post. — lambda, Feb 14 '13 at 13:50
I simply added this within the ImageButton xml - android:background="@null" — SingleWave Games, Feb 14 '13 at 16:38
Replace this with android:src="@drawable/111" to android:background="@drawable/111" — Jitesh Dalsaniya, Sep 11 '13 at 12:02

score 66 · Answer 1 · edited Sep 11 '13 at 11:57

66

ImageButton is ImageView.
If you want your image to fill button
than set android:scaleType="fitXY", so the image you set in android:src will be stretched to fill whole image button.

ImageButton has a background under your image and padding.
If you do not want background
set android:background="@android:color/transparent".
If you do not want padding
set android:padding="0" or set background without padding.

edited Sep 11 '13 at 11:57

none

4,669
14
62
102

answered Feb 14 '13 at 13:51

Leonidos

10,482
2
28
37

1

Good answer thanks, but you need units on the padding: android:padding="0dip" – Deemoe Jun 15 '15 at 06:49
I think padding no longer is part of the ImageButton – Micro Feb 05 '16 at 05:08

score 7 · Answer 2 · edited Feb 07 '19 at 05:36

7

android:scaleType="fitXY" tested and works correctly.

edited Feb 07 '19 at 05:36

Pranav Karnik

3,318
3
35
47

answered Aug 08 '13 at 21:06

danny117

5,581
1
26
35

score 7 · Answer 3 · answered Dec 05 '14 at 21:04

7

You can also use

android:scaleType="centerCrop"
android:padding="0dp"

answered Dec 05 '14 at 21:04

zackygaurav

4,369
5
26
40

score 2 · Answer 4 · answered Feb 14 '13 at 13:19

2

Use below code :-

<ImageButton
        android:id="@+id/secondActivityBbuttonDownRight"
        android:layout_width="0dip"
        android:layout_height="match_parent"
        android:layout_weight="0.5"
        android:scaleType="fitStart"
        android:background="@drawable/111" />

answered Feb 14 '13 at 13:19

duggu

37,851
12
116
113

That doesn't solve my problem. I want to use the style of the image button & stretch the image – user2051993 Feb 14 '13 at 13:38
scaletype used with background (doesn't apply on background ...) – njzk2 Feb 14 '13 at 13:46

score 1 · Answer 5 · answered Feb 14 '13 at 15:04

You should consider creating a 9-patch image to make the image fit correctly on an ImageButton in case you need to stretch it, but you don't want the image to become distorted.

To have a button with an image that completely covers it, you can use something like this:

<ImageButton android:id="@+id/iconBtn"
  android:layout_width="64dip"
  android:layout_height="64dip"
  android:src="@drawable/icon_button"
  android:scaleType="fitCenter"
  android:background="#00000000"/>

For a full tutorial on creating buttons with custom skins and the use of selectors to manage their states, you can check a tutorial I've written some time ago here (Creating a custom Android button with a resizable skin).

score 0 · Answer 6 · answered Aug 27 '16 at 05:18

0

If your image "111" has no padding itself then simply use android:background"@drawable/111"

answered Aug 27 '16 at 05:18

Josh

2,122
1
21
28

score 0 · Answer 7 · answered Jan 17 '21 at 19:46

Just set this two attributes on the ImageButton:

android:background="?attr/selectableItemBackgroundBorderless"
android:scaleType="centerCrop"

With those, you will get the provided src to be stretched, and also if you put some specific width and height on that ImageButton you won't get a rectangle around it.

How can I stretch the image in imagebutton to the whole area of the imagebutton?

7 Answers7

Linked