-1

I have a question regarding the Android Switch button. Does anyone know how to customise it so looks something like :

enter image description here

I have found out how I can replace the circle with a custom image using android:thumb= but still not sure how to increase the width of the entire button so it fills up most of the screen width and also add a text on top of it. Also need to add some offset for the thumb just like on the image. Can I achieve this by using the Switch or I have to implement the whole thing myself ?

Shabbir Dhangot
  • 8,954
  • 10
  • 58
  • 80

1 Answers1

1

Use following to achieve

<Switch
                    android:id="@+id/th"
                    android:layout_width="match_parent"
                    android:layout_height="wrap_content"
                    app:thumb="@drawable/apptheme_switch_inner_holo_light"
                    app:track="@drawable/apptheme_switch_track_holo_light"
                    app:textOn="@string/switch_yes"
                    app:textOff="@string/switch_no"
                    android:textColor="#000000"
                    />

Create a xml named colors.xml in res/values folder:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="red">#ff0000</color>
    <color name="green">#00ff00</color>
</resources>

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 defining your toggle button add:

android:background="@drawable/my_btn_toggle

to change the color of textOn and textOffuse

android:switchTextAppearance="@style/Switch"
Chirag.T
  • 746
  • 1
  • 6
  • 18