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>

Answer 1

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>

Answer 2

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>