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.

Underexpose

(1) why weight 50? are there a ton of objectcs in this row that you can't use 1 for each to represent equal weight? (2) what kind of layout? have you tried layout_gravity instead of just gravity? or center_horizontal if its a relative layout? – Homiletic

@Homiletic It's a LinearLayout. But why would that affect what goes on inside the button? – Underexpose

I thought you were centering the button. You're trying to center the image in the button? – Homiletic

@Homiletic yes, that is exactly what I am trying. padding seems to be the only option for drawable – Underexpose

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.

Homiletic

Sorry, I think question was misunderstood. I have updated it. – Underexpose

Revised answer to match question – Homiletic

@Homiletic I'm trying to do the same thing atm, so there is no method to place the image in the center of the button without resizing the image? I'd be worried about how it would appear on multiple devices manually resizing it (is that a valid concern?). – Huambo

@DanielImms I was able to center the image in the buttons using what I described above. There is no drawableCenter XML attribute I believe because the positioning relates to toggle/selection indicator in the button. You could adjuste the image used based on the size of the screen if you were concerned about method 2. My third suggestion is just to use a regular button, change the background color or image onClick to indicate a highlighted state, and sort of create your own toggle button without using the built in form. – Homiletic

@Homiletic I ended up centering it using drawablePadding. – Huambo

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>

War

Works like a charm... not sure why I didn't think about this as a solution before. – Sandrocottus

I wonder how this would work when needing to show different states? – Ideational

@ClumsyHamster If you're actually curious, you could always try it instead of wondering aloud on StackOverflow. ;) It works great. Notice that the first <item> is a selector. The button's state changes propagate down to it. – War

Answer 3

I used the android:drawableTop as described by Rarw, but as my button was tall and wide, it just hung at the top. Not really centred...so I fiddled around with the paddingTop and it might work here what I got:

   <ToggleButton 
    android:id="@+id/togglebutton1"
    android:paddingTop="50dp"
    android:layout_width="150dp"
    android:layout_height="150dp"
    android:layout_gravity="center"
    android:layout_weight="1"
    android:drawableTop="@drawable/music_collection_small"
    android:textOn=""
    android:textOff=""

    />

I think it will work for my purposes

Octahedron

Answer 4

Maybe this will help you. Look at the bottom of the page for the solution from zapl. P.S didn't know how to link the specific answer, new here XD

Splitting

FYI, this isn't really an answer (at least not a quality one). Please post as a comment once you have enough rep to do so. – Terminable