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

Answer 1

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" />

Answer 2

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" />

Answer 3

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>

Answer 4

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>