Custom Toggle Button: How to prevent text overlapping with icon

Question

I'm trying to make a custom toggle button, where the icon is considerably larger than the original built-in one. I'd like to achieve something like this:

    *-------------------*
    *  *------------*   *
    *  *            *   *
    *  *   Icon     *   *
    *  *            *   *
    *  *------------*   *
    *  *------------*   *
    *  *    Text    *   *
    *  *------------*   *
    *-------------------*

So this is my button:

    <ToggleButton
            android:id="@+id/tb"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_margin="18dp"
            android:background="@drawable/custom_toggle_layer"
            android:gravity="bottom | center_horizontal"
            android:textAppearance="@style/CustomTBText"
            android:textColor="@color/white"
            android:textOff="@string/tb_off"
            android:textOn="@string/tb_on" />

The custom background is defined in drawable/custom_toggle_layer.xml :

    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
        <item android:id="@+android:id/background"   
              android:drawable="@drawable/custom_toggle_bg" /> 
        <item android:id="@+android:id/toggle" 
              android:drawable="@drawable/custom_toggle_icon" /> 
    </layer-list>

Where custom_toggle_bg and custom_toggle_icon are both selectors and are working fine.

The problem is the text is overlapping with the bottom side of the icon. The text is aligned to the bottom, and if I make the icon larger the text sticks to the bottom of the button correctly.

I first tried to set a padding on the toggle button, but this just moves the text up inside the icon yet a bit more.

I'm trying to style the text independently of the button, so I've defined a custom style:

    <style name="CustomTBText">
        <item name="android:textSize">14sp</item><!-- This works -->
        <item name="android:textColor">@color/white</item><!-- This works -->

        <item name="android:paddingTop">15dp</item><!-- This does not work -->
    </style>

And tried to set a top padding to the text only, but that attribute does not work (the other attributes in the style work fine).

How can I fix this? I could do a hack setting the text of the button to empty and using an external TextView, but if possible I'd like to do everything using a customized ToggleButton.

Answer 1

What most tutorials on custom toggle buttons do is to set a layer list as a background to the whole button:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"> 
    <item android:id="@+android:id/background"   
          android:drawable="@drawable/custom_toggle_bg" /> 
    <item android:id="@+android:id/toggle" 
          android:drawable="@drawable/custom_toggle_icon" /> 
</layer-list>

This causes problems with the text (and that's also why most tutorials do not show text). So what I did is to set custom_toggle_bg as background and custom_toggle_icon as drawableTop, and now it works. This is the button fixed:

<ToggleButton
        android:id="@+id/tb"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_margin="18dp"
        android:background="@drawable/custom_toggle_bg"
        android:drawableTop="@drawable/custom_toggle_icon"
        android:gravity="bottom | center_horizontal"
        android:textAppearance="@style/CustomTBText"
        android:textColor="@color/white"
        android:textOff="@string/tb_off"
        android:textOn="@string/tb_on" />

Answer 2

You can use the drawable's position, like drawableLeft, drawableTop, drawabeRight, drawableBottom and drawableStart depending on were you want to see the icon.

Regards!