Android Switch - Change Background Of Switch At On / Off

does someone know how I can implement a switch like this in my application? or how I change the backgroundcolor of standard switch on switching on/off?

Solution 1:

Here is sample XML for you to start off with:

<Switch
    android:layout_width="75dp"
    android:layout_height="25dp"
    android:id="@+id/switch1"
    android:layout_centerVertical="true"
    android:layout_centerHorizontal="true"
    android:track="@drawable/switch_track_selector"
    android:switchMinWidth="75dp"
    android:thumb="@drawable/switch_thumb_selector" />

switch_track_selector.xml

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:drawable="@drawable/switch_track_on"android:state_checked="true"/><itemandroid:drawable="@drawable/switch_track_off"android:state_checked="false"/></selector>

switch_track_on.xml

<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle" ><cornersandroid:radius="15dp" /><sizeandroid:width="75dp"android:height="25dp" /><solidandroid:color="#3E98F3" /><strokeandroid:width="1dp"android:color="#000000" /></shape>

switch_track_off.xml

<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="rectangle" ><cornersandroid:radius="15dp" /><sizeandroid:width="75dp"android:height="25dp" /><solidandroid:color="#FFFFFF" /><strokeandroid:width="1dp"android:color="#000000" /></shape>

switch_thumb_selector.xml

<selectorxmlns:android="http://schemas.android.com/apk/res/android"><itemandroid:drawable="@drawable/switch_thumb"android:state_checked="true"/><itemandroid:drawable="@drawable/switch_thumb"android:state_checked="false"/></selector>

switch_thumb.xml

<shapexmlns:android="http://schemas.android.com/apk/res/android"android:shape="oval"><sizeandroid:width="25dp"android:height="25dp" /><solidandroid:color="#CCCCCC" /><strokeandroid:width="1dp"android:color="#000000" /></shape>