How to style ToggleButton so that the background color is WHITE?

Question

I have tried the following

View view = (View) findViewById (id);
view.setBackgroundColor (Color.WHITE);

The above destroys the property of the ToggleButton. I can no longer make out if it is TextView or ToggleButton. Clicking the button produces onClick but the UI change to show the selected bar is absent.

ToggleButton btn = (ToggleButton) findViewById (id);
btn.setBackgroundColor (Color.WHITE);

This also produces the same error. Using XML styling also causes the same error. I am using Android Studio v1.0.2 and the target is a lollipop emulator. I tried the same thing in 4.4.4 mobile. I see the same behavior.

I don't want to use images. Kindly don't suggest that to me. I have gone through the threads that are available in stackoverflow - nothing works for me.

Can anyone help me?

Can you give more detail or a sketch of what you want the toggle button to look like in each state (on/off)? You will need to create a selector and probably drawables for each state. See: http://stackoverflow.com/a/1533412/2832027 — TTransmit, Jan 06 '15 at 12:16
Thanks for the link. The thread talks about using images for check/uncheck events. I dont want to do that. But just style the toggle button so that the button color is white. Everything else remains the same. Any idea if that is even possible? — user2731584, Jan 06 '15 at 12:27

score 2 · Accepted Answer · answered Jan 06 '15 at 12:44

It will be something like this as an xml file in drawables that you want as the background for the toggle button. You need to add the various colors to a color file in res/values. See: https://developer.android.com/samples/MediaRouter/res/values/colors.html

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <item android:state_checked="true" android:state_pressed="true">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
            <item android:top="2dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_pressed" />
                </shape>
            </item>
            <item android:top="2dp" android:left="10dp" android:right="10dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_checked" />
                </shape>
            </item>
            <item android:top="2dp" android:bottom="2dp" android:left="10dp" android:right="10dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_pressed" />
                </shape>
            </item>
        </layer-list>    
    </item>

    <item android:state_pressed="true">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
            <item android:top="2dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_pressed" />
                </shape>
            </item>
            <item android:top="2dp" android:left="10dp" android:right="10dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_unchecked" />
                </shape>
            </item>
            <item android:top="2dp" android:bottom="2dp" android:left="10dp" android:right="10dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_pressed" />
                </shape>
            </item>
        </layer-list>    
    </item>

    <item android:state_checked="true">
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
           <item>
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_shadow" />
                </shape>
            </item>
            <item android:bottom="2dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_unpressed" />
                </shape>
            </item>
            <item android:bottom="2dp" android:left="10dp" android:right="10dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_checked" />
                </shape>
            </item>
            <item android:bottom="4dp" android:left="10dp" android:right="10dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_unpressed" />
                </shape>
            </item>
        </layer-list>
    </item>

    <item>
        <layer-list xmlns:android="http://schemas.android.com/apk/res/android" >
           <item>
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_shadow" />
                </shape>
            </item>
            <item android:bottom="2dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_unpressed" />
                </shape>
            </item>
            <item android:bottom="2dp" android:left="10dp" android:right="10dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_unchecked" />
                </shape>
            </item>
            <item android:bottom="4dp" android:left="10dp" android:right="10dp">
                <shape android:shape="rectangle">
                    <solid android:color="@color/toggle_button_unpressed" />
                </shape>
            </item>
        </layer-list>
    </item>

</selector>

I haven't checked it so I don't know if it works. Please let me know if I made any errors.

Thank you very much for this! I can see that the xml works :) — user2731584, Jan 07 '15 at 17:25
Even if this worked, I must confess I don't understand what is happening. Can you please elaborate the way layer-list works? If for example, I want to put a stroke, how will I do that? — user2731584, Jan 08 '15 at 09:10
In the layer-list, the item furthest down the list shows on top. It shows several rectangles on top of each other. Android drawables are a little tricky as if you specify a `size` with height and width you are forced with the drawable only ever being that size. This is why I am offsetting the rectangle shapes by giving them offsets from the edge of the view like `android:bottom="4dp"`. To add a stroke either: (i) draw two rectangles on top of each other, the first of the stroke color and the second of the fill color, (ii) add a stroke property to a shape to draw a stroke all the way around it. — TTransmit, Jan 08 '15 at 10:18

How to style ToggleButton so that the background color is WHITE?

1 Answers1