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:

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.

Ludwig

use this android:background="@drawable/111" – Clap

add android:background="@android:color/transparent" to the ImageButton – Erring

I edited you post, see meta.stackexchange.com/questions/85516 for how to add an image to your post. – Olio

I didn't have enough reputation points in order to do so – Ludwig

I simply added this within the ImageButton xml - android:background="@null" – Habitue

Replace this with android:src="@drawable/111" to android:background="@drawable/111" – Knobloch

Answer 1

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.

Basil

Good answer thanks, but you need units on the padding: android:padding="0dip" – Adebayo

I think padding no longer is part of the ImageButton – Dollie

Answer 2

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

Janycejanyte

Answer 3

You can also use

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

Melany

Answer 4

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

Clap

That doesn't solve my problem. I want to use the style of the image button & stretch the image – Ludwig

scaletype used with background (doesn't apply on background ...) – Photodisintegration

Answer 5

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

Shedd

Answer 6

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

Sag

Answer 7

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.

Addia