How to change the background color of the toggle button on Android

Question

I tried to change the background color of the toggle button using XML file as white color, but the toggle button is totally damaged. It looks like all the button was covered with white.

There is no indication of ON or OFF on the toggle button when I have changed the color of the toggle button to white. Is there is another way to change the background which will not damage the indication of the toggle button?

<ToggleButton android:id="@+id/togglebutton"
              android:layout_width="100px"
              android:layout_height="46px"
              android:background="#ffffff"
              android:layout_above ="@+id/save"
              android:textOn="DAY"
              android:textOff="NIGHT" />

This is how my XML code look for the toggle button.

Answer 1

Yes, there is a way to change the background as you wish, but you have to use a selector like this as background:

<selector
    xmlns:android="http://schemas.android.com/apk/res/android"
>
<item
    android:state_focused="true"
    android:state_pressed="false"
    android:drawable="@drawable/some_image" />
<item
    android:state_focused="true"
    android:state_pressed="true"
    android:drawable="@drawable/some_other_image" />
<item
    android:state_focused="false"
    android:state_pressed="false"
    android:drawable="@drawable/some_image1" />
<item
    android:state_focused="false"
    android:state_pressed="true"
    android:drawable="@drawable/other_image" />
</selector>

For @Drawable, etc. (you can use a color or make a gradient. Check this for more information about gradients.

Answer 2

Follow this way to make your ToogleButton have background color red when On and green when OFF

First, create tooglebutton_selector.xml in drawable folder

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

Second, create togglebutton_on.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#ff0000" /> // red color
</shape>

Third, create togglebutton_off.xml in drawable folder

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <solid
        android:color="#00FF00" /> // green color
</shape>

Finally, in your ToggleButton

 <ToggleButton
            android:id="@+id/btnMon"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/tooglebutton_selector" //set background of ToggleButton to tooglebutton_selector
            />

Answer 3

When you decompile your SystemUI.apk, you should go to the following file: SystemUI/res/values/colors.xml

Then change the following line:

#ff000000 #ffffffff #80000000 #ffadc1d6 #ffffffff #ffe6e6e6