How to change indicator color in Toggle Button ( Android)

Question

Hi every body I want to use toggle button but with different indicator color (like green or red), How to change the color of indicator .

See default indicator on imgur

score 5 · Accepted Answer · edited May 02 '19 at 15:33

I think you are going to have to create 2 custom images of the button and then use a drawable xml as the background.

For Example:

<ToggleButton
    android:id="@+id/toggleButton1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="@drawable/btntoggle_selector"
    android:textColor="@android:color/white"
    android:textOff="Toggle Button OFF"
    android:textOn="Toggle Button ON "
    android:onClick="onToggleButtonClick" />

Then the btntoggle_selector xml

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

bg_selected and bg_normal are just images like 9-patch.

See the Android developer guide on 9-patch images

score 5 · Answer 2 · edited Mar 17 '18 at 08:34

I think you could use theme if changes are not big.

<style name="AppTheme.ToggleButton" parent="Base.Widget.AppCompat.Button">
    <item name="colorButtonNormal">@color/colorPrimary</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="colorAccent">@android:color/white</item>
</style>

And here you can use this new theme on ToggleButton.

<ToggleButton
    android:id="@+id/keyboard_caps_lock_btn"
    android:layout_width="0dp"
    android:layout_height="wrap_content"
    android:layout_weight="2"
    android:minWidth="0dp"
    android:textOff="@string/keyboard_caps_lock"
    android:textOn="@string/keyboard_caps_lock"
    android:textAllCaps="false"
    android:theme="@style/AppTheme.ToggleButton" />

how do you change the background color as well, without changing the bar on the bottom? — Jitin, Apr 30 '20 at 12:04

score 0 · Answer 3 · edited Mar 17 '18 at 08:18

A similar question was marked a duplicate though Switch is not the same things a ToggleButton, in Android. How to change color of the toggle button? Both do inherit from CompoundButton; but have some different methods and customization support. The setBackground posted elsewhere does not work to change the thumb or the border. Below is an example to change the color of the border based on How set background drawable programmatically in Android

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<corners android:radius="3dp" />
<stroke android:width="2px" android:color="#000000" /> </shape>

and then in code:

if(!isChecked) {
    buttonView.setBackgroundResource(R.drawable.border_for_toggle_button);
}

So, by setting the background then one can change the appearance. To change the entire color of the interior then one could add more the drawable XML above; such as adding this to make the inside turn green:

<gradient android:startColor="#FFFFFF"
    android:endColor="#00FF00"
    android:angle="270" />

score 0 · Answer 4 · edited Mar 17 '18 at 09:15

It is a XML file

<Toggle Button
    android:id="@+id/my_location"
    android:textColor="#000"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:textAllCaps="false"
    android:theme="@style/ToggleButton"
    android:layout_alignParentEnd="true"
    android:layout_alignParentRight="true" />

Set this style in your value-> style file

<style name="ToggleButton" parent="Base.Widget.AppCompat.Button">
    <item name="colorButtonNormal">@color/colorPrimary</item>
    <item name="android:textColor">@android:color/white</item>
    <item name="colorAccent">@android:color/white</item>
</style>

How do you change the background color as well ? – Jitin Apr 30 '20 at 12:02 — Jitin, Apr 30 '20 at 12:02

score 0 · Answer 5 · answered Feb 07 '22 at 02:01

When I used this answer above like:

<style name="AppTheme.ToggleButton" parent="Base.Widget.AppCompat.Button">
<item name="colorButtonNormal">@color/red</item>
<item name="colorAccent">@color/green</item>
</style>

my entire toggle button background become red.

If you want to change only bottom border colors you may use instead:

<style name="AppTheme.ToggleButton" parent="Base.Widget.AppCompat.Button">
    <item name="colorControlNormal">@color/red</item>
    <item name="colorAccent">@color/green</item>
</style>

How to change indicator color in Toggle Button ( Android)

5 Answers5