Write Text on the Track in Switch Button in Android

Question

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.

Answer 1

Did you try Toggle Button? you can customize like a switch button. Im using like this. 1- Open xml in drawable folder

Your Drawable xml @switch_thumb

 <?xml version="1.0" encoding="utf-8"?>
 <selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="true" android:drawable="@drawable/on" />
    <item android:state_checked="false" android:drawable="@drawable/off" />
 </selector>

2-set background to togglebutton in layout

Your Layout xml

<ToggleButton
     android:layout_width="60dp"
     android:layout_height="30dp"
     android:textOn=""
     android:textOff=""
     android:background="@drawable/switch_thumb"
     android:id="@+id/toggle"
     />

3-main activity on off check and if you want to set checked

mToggle.setChecked(true);//mToggle.setChecked(prefs.getBoolean("toggle", false)

mToggle.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            //put in SharedPreferences 
            editor.putBoolean("toggle", mToggle.isChecked());
            editor.apply();
        }
    });

Answer 2

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>