Remove padding of ImageButton

Question

How can I get an ImageButton that has a fixed height and is only as wide as it needs according to the ratio of its source image?

I tried the following:

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="8pt"
    android:minWidth="0pt"
    android:scaleType="fitCenter"
    android:adjustViewBounds="true"
    android:src="@drawable/list_download"
    android:background="@android:color/black"
    android:padding="0pt"/>

I set background to black just to see the boundaries of it exactly, and here is the outcome.

I have seen some solutions that suggest to use negative paddings but it is not an elegant solution. There should be a better one.

I tried similar configurations on an ImageView too, but it also had extra padding. So it's not an ImageButton specific problem (i.e. it is not related to this nine-patch issue).

EDIT: If I change scaleType from fitCenter to fitStart, then the outcome is like this. So there is somehow a minimum width.

@Rod_Algonquin yes. For `fitCenter`, left and right. For `fitStart`, only right. — ram, Jan 30 '17 at 21:25
This is fixable by using a vector xml image instead, where you can specify the width/height of the image within the xml(so easy), also you wont need to scale it since vector is scalable already. — Rod_Algonquin, Jan 30 '17 at 21:27
@Rod_Algonquin What I want to achieve is, I don't want to set the width and height together. I just want to set only one dimension, and have the other dimension appropriately according the the ratio of the image. — ram, Jan 30 '17 at 21:32

larseknu · Answer 1 · 2017-01-31T15:57:57.267

2

It's because you've set a limited height. That limits the image height, but when Android calculates the width of the content (the original unrezised image), it's wider.

You'll get the image without the black "padding" on the side if you use wrap_content for the height as well.

<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:minWidth="0pt"
android:scaleType="fitCenter"
android:adjustViewBounds="true"
android:src="@drawable/list_download"
android:background="@android:color/black"
android:padding="0pt"/>

So, if you want the picture to be a specific size, you could resize it in your drawable folder to the size you want.

edited Jan 31 '17 at 15:57

answered Jan 30 '17 at 21:32

larseknu

21
5

As I written in comments of the question, I want to set only one dimension (width or height) and let android calculate the other one appropriately. As you said, button is wider than image. Why? Its width is `wrap_content`, so why is it wider than image? This is my problem. – ram Jan 30 '17 at 21:36
I didn't see the comment before a posted, sorry. The imagebutton gets wider than the image that's displayed on the screen, but it has the _exact width_ of the _original drawable/image_. Theres your problem. I don't know of a way to scale the image the way you want when you just specify a static height or width. But I'm sure it's possible. You could always do it in your code (instead of layout). – larseknu Jan 31 '17 at 09:29
"... but it has the exact width of the original drawable/image." Unfortunately this is wrong, although that was what I expected. It is wider than what `wrap_content` implies. (Just as a side note, the image itself does not contain extra padding, as seen in `fitStart` case.) – ram Jan 31 '17 at 09:35
That's at least what when I try it. It stays the same width after I set a static height. [wrap_content](http://i.imgur.com/f11Y0f0.png) and [static height](http://i.imgur.com/vM7ikU9.png). But, it might be something else that's causing it on your part? – larseknu Jan 31 '17 at 14:52

score 1 · Answer 2 · answered Apr 28 '21 at 14:40

1

you just need use android:scaleType="fitXY" and set padding 0dp.

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:scaleType="fitXY"
    android:padding="0dp"/>

answered Apr 28 '21 at 14:40

Rasoul Miri

11,234
1
68
78

score 0 · Answer 3 · answered Jan 30 '17 at 21:23

0

you can put it in a Frame like so :

<FrameLayout 
   android:layout_width="wrap_content"
   android:background="@android:color/black"
   android:layout_height="wrap_content">

   <ImageView 
      android:src="@drawable/list_download"
      android:scaleType="fitCenter"
      android:layout_height="wrap_content"
      android:layout_gravity="center"
      android:layout_width="8dp"/>  
</FrameLayout>

it will be much easier to play with it like so

answered Jan 30 '17 at 21:23

yanivtwin

617
8
32

This doesn't solve the extra padding problem. Even if I set padding to zero on both `FrameLayout` and `ImageView`, I still have padding. – ram Jan 30 '17 at 21:38

Remove padding of ImageButton

3 Answers3

Linked