Change on Color of toggle button

Question

Is there a way to programmatically change the Toggle on color of a toggle button, not the background color.

I don't see a reference to it in the documentation.

https://developer.android.com/reference/android/widget/ToggleButton.html#setBackgroundDrawable(android.graphics.drawable.Drawable)

https://stackoverflow.com/questions/11978880/how-to-change-color-of-the-toggle-button — ADM, Dec 05 '19 at 04:09

hio · Answer 1 · 2019-12-05T04:35:46.923

1

ToggleButton Btn=new ToggleButton(this);// or get it from the layout by ToggleButton Btn=(ToggleButton) findViewById(R.id.IDofButton);
    Btn.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            // TODO Auto-generated method stub
            if(isChecked)
                buttonView.setBackgroundColor(Color.GREEN);
            else buttonView.setBackgroundColor(Color.RED);
        }
    });

In drawable folder, create a xml file my_btn_toggle.xml:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false" android:drawable="@color/red"  />
<item android:state_checked="true" android:drawable="@color/green"  />
</selector>

and in xml section define your toggle button:

<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="New ToggleButton"
android:id="@+id/toggleButton"
android:background="@drawable/my_btn_toggle"/>

last but not least :)

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

edited Dec 05 '19 at 04:35

answered Dec 05 '19 at 04:16

hio

915
8
26

I'm may have not been clear, I'm not looking to change the background color, I want to change the color of the bar on the bottom of the toggle button. – Shawn Dec 05 '19 at 04:19
I've tested out your recommendation, it changes the background of the button. I'm looking to change the color of the bar at the bottom of the toggle button. I've included a picture in my question to help describe what I'm looking to change. – Shawn Dec 05 '19 at 04:33
@Shawn i got your point now finally:) i again edit my answer and this will defiantly solve your problem – hio Dec 05 '19 at 04:36
Should I include the last code block in the my_btn_toggle XML file? – Shawn Dec 05 '19 at 04:40
all the drawable's error out, What is supposed to be included in those drawable files? – Shawn Dec 05 '19 at 04:51
it's common bro if you want to use drawable files then you have to insert drawable in you project – hio Dec 05 '19 at 04:53

score 1 · Accepted Answer · answered Dec 05 '19 at 05:22

1

What about changing style?

styles.xml

<style name="ToggleButton" parent="Base.Widget.AppCompat.Button">
    <item name="colorAccent">select your color</item>
<style>

Now set the style on the Toggle button in the layout.

<ToggleButton
    android:id="@+id/toggle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:theme="@style/ToggleButton"/>

answered Dec 05 '19 at 05:22

Shawn

1,222
1
18
41

thank you, sir! I came here because I wanted to change the color(s) of the indicator. The item's names I had to change were `android:colorControlActivated` (or `colorAccent` without "android:") and `android:colorControlNormal` ! – floh.mueller Jan 30 '22 at 12:35

score 0 · Answer 3 · answered Feb 10 '20 at 12:21

[Change the color of toggle button][1]

<ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New ToggleButton"
        android:id="@+id/toggleButton"
        android:textColor="#f26e08"
        android:textSize="30dp"
        android:padding="20dp"
        android:background="@drawable/selector"
        android:layout_gravity="center_horizontal" />
    <ToggleButton
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="New ToggleButton"
        android:id="@+id/toggleButton2"
        android:textColor="#f26e08"
        android:background="@drawable/selector"
        android:textSize="30dp"
        android:padding="20dp"
        android:layout_gravity="center_horizontal" />
selector.xml:
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item
    android:drawable="@drawable/toggleon"
    android:state_checked="true"/>
    <item
        android:drawable="@drawable/toggleoff"
        android:state_checked="false"/>
</selector>
toggleon.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
    <shape android:shape="rectangle">
        <stroke android:color="#0a8e9b"
            android:width="6dp"/>
    </shape>
</item>
    <item  android:bottom="6dp">
        <shape android:shape="rectangle">
            <solid
                android:color="#b5f4f2"/>
        </shape>
    </item>
</layer-list>
toggleoff.xml
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape android:shape="rectangle">
            <stroke android:color="#f26e08"
                    android:width="6dp"/>
        </shape>
    </item>
    <item android:bottom="6dp">
        <shape android:shape="rectangle">
            <solid android:color="#56fd58"/>
        </shape>
    </item>
</layer-list>````


  [1]: https://i.stack.imgur.com/R2oOV.png

score -1 · Answer 4 · answered Dec 05 '19 at 04:42

    <ToggleButton
                android:background="@drawable/toggle_button"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>

use the below drawable in the above toggle button


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

    <!-- Drop Shadow Stack -->
    <item>
        <selector>
            <item android:state_pressed="true">
                <shape>
                    <corners android:radius="3dp" />

                    <padding
                        android:bottom="1dp"
                        android:left="1dp"
                        android:right="1dp"
                        android:top="1dp" />

                    <solid android:color="@color/transparent" />
                </shape>
            </item>
            <item>
                <shape>
                    <corners android:radius="3dp" />

                    <padding
                        android:bottom="1dp"
                        android:left="1dp"
                        android:right="1dp"
                        android:top="1dp" />

                    <solid android:color="#00CCCCCC" />
                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item android:state_pressed="true">
                <shape>
                    <corners android:radius="3dp" />

                    <padding
                        android:bottom="1dp"
                        android:left="1dp"
                        android:right="1dp"
                        android:top="1dp" />

                    <solid android:color="@color/transparent" />
                </shape>
            </item>
            <item>
                <shape>
                    <corners android:radius="3dp" />

                    <padding
                        android:bottom="1dp"
                        android:left="1dp"
                        android:right="1dp"
                        android:top="1dp" />

                    <solid android:color="#10CCCCCC" />
                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item android:state_pressed="true">
                <shape>
                    <corners android:radius="3dp" />

                    <padding
                        android:bottom="1dp"
                        android:left="1dp"
                        android:right="1dp"
                        android:top="1dp" />

                    <solid android:color="@color/transparent" />
                </shape>
            </item>
            <item>
                <shape>
                    <corners android:radius="3dp" />

                    <padding
                        android:bottom="1dp"
                        android:left="1dp"
                        android:right="1dp"
                        android:top="1dp" />

                    <solid android:color="#20CCCCCC" />
                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item android:state_pressed="true">
                <shape>
                    <corners android:radius="3dp" />

                    <padding
                        android:bottom="1dp"
                        android:left="1dp"
                        android:right="1dp"
                        android:top="1dp" />

                    <solid android:color="@color/transparent" />
                </shape>
            </item>
            <item>
                <shape>
                    <corners android:radius="3dp" />

                    <padding
                        android:bottom="1dp"
                        android:left="1dp"
                        android:right="1dp"
                        android:top="1dp" />

                    <solid android:color="#30CCCCCC" />
                </shape>
            </item>
        </selector>
    </item>
    <item>
        <selector>
            <item android:state_pressed="true">
                <shape>
                    <corners android:radius="3dp" />

                    <padding
                        android:bottom="1dp"
                        android:left="1dp"
                        android:right="1dp"
                        android:top="1dp" />

                    <solid android:color="@color/transparent" />
                </shape>
            </item>
            <item>
                <shape>
                    <corners android:radius="3dp" />

                    <padding
                        android:bottom="1dp"
                        android:left="1dp"
                        android:right="1dp"
                        android:top="1dp" />

                    <solid android:color="#50CCCCCC" />
                </shape>
            </item>
        </selector>
    </item>


    <item>
        <selector>
            <item android:state_checked="false">
                <shape>
                    <corners android:radius="3dp" />
                    <padding android:bottom="5dp" />

                    <solid android:color="@android:color/black" />
                </shape>
            </item>
            <item android:state_checked="true">
                <shape>
                    <corners android:radius="3dp" />
                    <padding android:bottom="5dp" />

                    <solid android:color="@android:color/white" />
                </shape>
            </item>
        </selector>
    </item>


    <!-- Background -->
    <item android:id="@+id/toggle_background">
        <shape>
            <corners
                android:topLeftRadius="3dp"
                android:topRightRadius="3dp" />
            <padding android:bottom="5dp" />

            <solid android:color="@android:color/holo_orange_dark" />
        </shape>
    </item>

</layer-list>

this code is to change the bottom bar of toggle button, as we cant change the colour of bottom bar because it is made through code and not the xml. — Ankit Jain, Dec 05 '19 at 04:57

Change on Color of toggle button

4 Answers4