Toggle button image is not centered

Question

That's how it looks: http://i.imgur.com/navAYXk.jpg

And here's the code responsible for the layout: (togglebutton in question is the last one)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
            android:id="@+id/controls"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            android:background="@drawable/border" >

            <ImageButton
                android:id="@+id/playpause"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:background="@null"
                android:src="@drawable/player_play"
                android:text="play/pause" />

            <ImageButton
                android:id="@+id/prev"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:background="@null"
                android:src="@drawable/player_prev"
                android:text="prev" />

            <ImageButton
                android:id="@+id/next"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:background="@null"
                android:src="@drawable/player_next"
                android:text="next" />

            <ToggleButton
                android:id="@+id/shuffleButton"
                android:layout_width="0dp"
                android:layout_height="wrap_content"
                android:layout_weight="0.25"
                android:background="@null"
                android:button="@drawable/toggle_check"
                android:layout_gravity="center"
                android:textOff=""
                android:textOn="" />

        </LinearLayout>

</LinearLayout>

And here is the file toggle_check.xml:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/player_shuffle_on"
          android:state_checked="true" />
    <item android:drawable="@drawable/player_shuffle_off"
        android:state_checked="false"/>
 </selector>

I have no idea why that togglebutton image is not centered, can anybody help me with that?

Answer 1

Your layout seems ok to me. I'd try replacing the ToggleButton for another ImageButton , just to make sure android does not add some padding automatically as it does with CheckBoxes . Also, double check that neither player_shuffle_on nor player_shuffle_off pngs have been accidentally saved with a transparent padding.

By the way, there's no need for two LinearLayouts , you can have just one horizontal LinearLayout as your root view.

Answer 2

Add Gravity-Center to your second Linear Layout:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/LinearLayout01"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <LinearLayout
            android:id="@+id/controls"
            android:layout_width="match_parent"
            android:layout_height="35dp"
            *android:gravity="center"*
            android:background="@drawable/border" >

            <ImageButton
                ...