Removing Image Button Padding (Android)

Question

I have Buttons that look like the top image for the landscape orientation:

I want it to look like the bottom image.

Here's my .xml code for these buttons.

<TableRow
    android:id="@+id/tableRow7"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:weightSum="1.0" >

    <ImageButton
        android:id="@+id/appHome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight=".5"
        android:background="@null"
        android:contentDescription="Home"
        android:cropToPadding="true"
        android:scaleType="fitEnd"
        android:src="@drawable/home_bar" />

    <ImageButton
        android:id="@+id/menuHome"
        android:layout_weight="0"
        android:background="@null"
        android:contentDescription="Menu"
        android:cropToPadding="true"
        android:scaleType="center"
        android:src="@drawable/menu_bar" />

    <ImageButton
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight=".5"
        android:background="@null"
        android:contentDescription="Back"
        android:cropToPadding="true"
        android:scaleType="fitStart"
        android:src="@drawable/back_bar" />

</TableRow>

check this ansewr https://stackoverflow.com/a/67302375/4797289 — Rasoul Miri, Apr 28 '21 at 14:41

Ahmad · Answer 1 · 2013-11-29T08:55:27.337

You cannot do that with the default buttons, the buttons 9 patches have a padding in them (both, holo and the pre holo buttons). You can see that here.

If you want buttons without padding then you'll have to modify the 9 patches and create your own theme:

<style name="myTheme" parent="....">
    <item name="imageButtonStyle">@style/myImageButton</item>
</style>

and your imageButtonStyle:

<style name="myImageButton" parent="Widget.ImageButton">
    <item name="android:background">@drawable/myCostomizedNinePatchSelectorWithoutPadding</item>
</style>

score 2 · Answer 2 · answered Jul 12 '13 at 10:13

An easier alternative to creating your own 9 patch image to remove the margin is to set the background to null.

For example, add the following to res/styles.xml:

<style name="MarginlessImageButton" parent="android:Widget.ImageButton">
    <item name="android:background">@null</item>
</style>

<style name="AppTheme" parent="AppBaseTheme">
    <item name="android:imageButtonStyle">@style/MarginlessImageButton</item>
</style>

You should now find that all ImageButtons have zero margin, regardless of whether defined in XML or created programatically.

score 1 · Accepted Answer · answered Jan 03 '13 at 19:57

I ended up fixing this by switching my TableLayout to a LinearLayout. Here's my code unless anyone else comes across this problem:

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:orientation="vertical">

<LinearLayout
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:layout_weight="1"
    android:gravity="center" >

    <ImageButton
        android:id="@+id/appHome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:contentDescription="Home"
        android:scaleType="fitEnd"
        android:src="@drawable/home_bar_grey" />

    <ImageButton
        android:id="@+id/menuHome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:contentDescription="Menu"
        android:onClick="menuhome"
        android:scaleType="fitCenter"
        android:src="@drawable/menu_bar" />

    <ImageButton
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@null"
        android:contentDescription="Back"
        android:scaleType="fitStart"
        android:src="@drawable/exit_bar" />
</LinearLayout>

the problem with setting background to null is that you lose the gray tint that comes with an ImageButton on click. — sudocoder, Jan 25 '15 at 20:21

score 1 · Answer 4 · answered Dec 09 '21 at 13:01

1

Use scaleType property , you can see icon with same size of ImageButton

answered Dec 09 '21 at 13:01

Prakash Reddy

944
10
20

score 0 · Answer 5 · answered Dec 31 '12 at 20:11

0

Use negative padding on the ImageButton in your xml to shrink the padding used.

android:paddingLeft="-5dip"
android:paddingRight="-5dip"

Note the above is just an example... you'll need to mess with the numbers to adjust for your specific case to make things look correct.

answered Dec 31 '12 at 20:11

Barak

16,318
9
52
84

No matter how high the numbers, I still am getting the same weird padding. – Eichhörnchen Dec 31 '12 at 20:26
It might be margin instead of padding... same trick applies, use negative numbers. – Barak Dec 31 '12 at 20:35
I just tried margin with the same result... I tried both for the hell of it too. There's still all the invisible space. – Eichhörnchen Dec 31 '12 at 20:39

score 0 · Answer 6 · answered Dec 31 '12 at 21:30

//remove the android:weightSum use width as match_parent

//give android:layout_weight="1" for all imageButton

//use android:scaleType="fitXY" for all

<TableRow
    android:id="@+id/tableRow7"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    >

    <ImageButton
        android:id="@+id/appHome"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_weight="1"
        android:background="@null"
        android:contentDescription="Home"
        android:cropToPadding="true"
        android:scaleType="fitXY"
        android:src="@drawable/home_bar" />

    <ImageButton
        android:id="@+id/menuHome"
        android:layout_weight="0"
        android:background="@null"
        android:contentDescription="Menu"
        android:layout_weight="1"
        android:cropToPadding="true"
        android:scaleType="fitXY"
        android:src="@drawable/menu_bar" />

    <ImageButton
        android:id="@+id/back"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
       android:layout_weight="1"
        android:background="@null"
        android:contentDescription="Back"
        android:cropToPadding="true"
       android:scaleType="fitXY"
        android:src="@drawable/back_bar" />

</TableRow>

This works, but it stretches out the images, which is what I don't want. — Eichhörnchen, Jan 01 '13 at 01:00
When I did this, I achieved the same result as before (with the padding space thing) — Eichhörnchen, Jan 01 '13 at 21:19

Removing Image Button Padding (Android)

6 Answers6

Linked