Write Text on the Track in Switch Button in Android

Viewed 2485

I am trying to customize Switch button in Android. I have a problem that I want to show ON-OFF text on the Track not on the Thumb as Default by Android. Can we customize this.

2 Answers

Custom Switch / Modify Switch / Write on Track / Thumb same in both case

    <RelativeLayout
        android:layout_width="118dp"
        android:layout_height="45dp"
        android:orientation="horizontal">
        <androidx.appcompat.widget.SwitchCompat
            android:id="@+id/switch_room_availability"
            android:layout_width="wrap_content"
            android:layout_height="45dp"
            android:checked="true"
            android:textOff="Taken"
            android:textOn="Available"
            android:thumb="@drawable/thumb_selector"
            app:switchMinWidth="118dp"
            app:track="@drawable/track_selector" />

        <TextView
            android:id="@+id/tv_text"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fontFamily="@font/circular_std_medium"
            android:gravity="center|left"
            android:paddingStart="12dp"
            android:text="@string/available"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:visibility="visible" />

        <TextView
            android:id="@+id/tv_text_taken"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:fontFamily="@font/circular_std_medium"
            android:gravity="center|right"
            android:paddingEnd="23dp"
            android:text="Taken"
            android:textColor="@color/white"
            android:textSize="15sp"
            android:visibility="gone" />

    </RelativeLayout>

    thumb_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<item android:state_checked="false">
    <shape
        android:dither="true" android:shape="rectangle"
        android:useLevel="false" android:visible="true">
        <solid android:color="#ffffff" />
        <corners android:radius="100dp" />
        <padding android:top="4dp" android:bottom="4dp"/>
        <size android:width="45dp" android:height="25dp" />
        <stroke android:width="15dp" android:color="#0000ffff" />
    </shape>
   </item>
   </selector>

  track_selector.xml
 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
 <item android:state_checked="true">
    <shape android:dither="true" android:shape="rectangle"
        android:useLevel="false" android:visible="true">
        <solid android:color="@color/green_toggle" />
        <corners android:radius="50dp" />
        <size android:width="200dp" android:height="40dp" />
    </shape>
 </item>
 <item android:state_checked="false">
    <shape android:dither="true" android:shape="rectangle"
        android:useLevel="false" android:visible="true" >

        <corners android:radius="50dp" />

        <size android:width="200dp" android:height="40dp" />
        <solid android:color="@color/red_toggle" />

    </shape>
  </item>
  </selector>

enter image description hereenter image description here

Related