Centering ToggleButton Image - With No Text

Question

Here is my ToggleButton:

<ToggleButton
            android:id="@+id/bSmenuTopItems"
            android:layout_width="wrap_content"
            android:layout_height="48dp"
            android:background="@drawable/master_button_selector"
            android:drawableLeft="@drawable/flame_icon" />

I have no text in this image, I need a ToggleButton due to Active State.

EDIT: I think question was misunderstood. There is a drawable inside the Toggle Button (flame_icon) and it is set as background. I want it to be centered. There is no Text, just an image. I need a Toggle Button because I need to have an Active State when selected.

There is only drawableLeft, drawableRight, drawableTop, etc. I want a draweableMiddle that doesn't seem to exisit.

Answer 1

I revised the answer to answer your revised question.

The drawableLeft, drawableRight, and drawableTop button, as far as I can tell, control where the image is placed relative to the selector (a/k/a on/off) indicator. Top will place it above the indicator with left and right placing it to a specific side respectively. I do not believe you can remove the selector indicator as that would defeat the purpose of using a ToggleButton.

I was able to center 2 drawable in 2 ToggleButtons using the following layout. To center the images within the ToggleButton I used drawableTop so that the images appeared over the selection indicator. I then set both textOn and textOff to be an empty string. If you do not set this, then the default on/off text appears above the selector indicator and pushes the drawable to the side.

<LinearLayout 
    android:id="@+id/buttonContainer"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:gravity="center"
    android:orientation="horizontal"> 

   <ToggleButton
    android:id="@+id/bSmenuTopItems"
        android:layout_width="0"
        android:layout_weight="1"
        android:layout_height="75dp"
        android:checked="false"
        android:drawableTop="@drawable/flag"
        android:textOn=""
        android:textOff=""
        android:layout_gravity="center"
        android:textColor="#cecece" />

    <ToggleButton
        android:id="@+id/bSmenuTopItems2"
        android:layout_width="0"
        android:layout_height="75dp"
        android:layout_weight="1"
        android:checked="false"
        android:textOn=""
        android:textOff=""
        android:drawableTop="@drawable/chaticon"
        android:layout_gravity="center"
        android:textColor="#cecece" />

</LinearLayout>

All you should have to do is adjust the height of the button to position your icon relative to the selector icon where you want it. My only other suggestion would be to control the size of the image you are using. If you can just adjust the dimensions of the image relative to the button, placing it with drawableTop should center it automatically.

Answer 2

I didn't have any luck with the accepted answer but maybe my scenario is subtly different. The other solution I've seen is to use the drawablePadding attribute to push the topDrawable toward the center of the button. That works to an extent but it assumes that the button's dimensions are fixed and even then, it's difficult to center the icon perfectly.

This is what I came up with instead. Don't specify the icon on the button itself. Instead, set the button's background to a layer-list drawable that draws the icon you want over the selector you want, like so:

<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/master_button_selector" />
    <item>
        <bitmap android:src="@drawable/flame_icon" android:gravity="center" />
    </item>
</layer-list>