How can I create custom switches in android with text on both side of switch's track an in thumb?

Question

How can I design custom switch in android as like in below image:

When it's turned on, it needs to look like this

I also need to show toggle animation effects while switching between two categories. How Can I achieve it? Is there any 3rd party SDK or libraries available? Currently I have designed it with a custom linear layout as like this:

my_layout.xml:

 <LinearLayout
                android:id="@+id/customSliderLayout"
                android:layout_width="@dimen/_200sdp"
                android:layout_height="@dimen/_39sdp"
                android:layout_centerInParent="true"
                android:orientation="horizontal"
                android:weightSum="2"
                android:background="@drawable/oval_layout_bg"
                android:layout_centerHorizontal="true">

                <Button
                    android:id="@+id/userBtn"
                    android:layout_width="0dp"
                    android:layout_height="match_parent"
                    android:layout_weight="1"
                    android:textAllCaps="false"
                    android:text="@string/toggle_user"
                    android:textSize="@dimen/_18sdp"
                    android:textColor="@color/black_textcolor"
                    android:background="@drawable/back"/>

          <TextView
                    android:layout_width="0dp"
                    android:layout_height="wrap_content"
                    android:layout_weight="1"
                    android:textAllCaps="false"
                    android:textColor="@color/textcolor_white"
                    android:textSize="@dimen/_16sdp"
                    android:gravity="center"
                    android:text="@string/toggle_doctor"/>

            </LinearLayout>

But I need to design a toggle switch.

I have also checked out this libray:

https://github.com/gmarm/BetterSegmentedControl

But this is only available for iOS not for Android. I need exactly like the second switch which is in the link.

Answer 1

its a bit tricky as you cant write anything on track so you need a textview for your text on track and simply change its location when needed. make your shapes or images ready then a switch and text view in a Constraint Layout... match them on same spot you need them then go for code and when switch turned on/off move the text view to other side... lol its work perfectly... and for thumb text:

    cSwitch.setTextOn("doctor");
    cSwitch.setTextOff("user");

i know its have a lot of room to improve but this is how i did it and you can change the width and height for shapes to ...

this is my code i didnt make what you need lol you have to do it yourself haha

i hope this do any help.. cheers

enter image description here

enter image description here

switch track shape

 <?xml version="1.0" encoding="utf-8"?>
 <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
     <item
         android:width="11mm"
         android:height="4.2mm">
         <shape android:shape="rectangle">
             <corners android:radius="3.7mm" />
             <stroke
                 android:width="0.3mm"
                 android:color="@color/white" />
             <solid android:color="@color/green" />
         </shape>
     </item>
 </layer-list>

switch thumb shape

 <?xml version="1.0" encoding="utf-8"?>
  <shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
     <size
        android:width="4.2mm"
        android:height="4.2mm" />
    <corners android:radius="2mm" />
    <solid android:color="@color/white" />
    <stroke
        android:width="1dp"
        android:color="#bdf7b8" />
</shape>

Layout XML code

 <android.support.constraint.ConstraintLayout
    android:id="@+id/signInLayout"
    style="@style/LayoutStyle"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_gravity="center_vertical"
    android:layout_marginTop="16dp">

 <Switch
        android:id="@+id/cSwitch"
        android:layout_width="wrap_content"
        android:layout_height="4mm"
        android:switchMinWidth="11mm"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/cSwitch_textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginEnd="2mm"
        android:layout_marginStart="2mm"
        android:text="ON"
        android:textColor="@color/white"
        app:layout_constraintBottom_toBottomOf="@id/cSwitch"
        app:layout_constraintLeft_toLeftOf="@+id/cSwitch"
        app:layout_constraintTop_toTopOf="@id/cSwitch" />
</android.support.constraint.ConstraintLayout>

and java code

    final Switch cSwitch = rootView.findViewById(R.id.cSwitch);
    final TextView cSwitchText = rootView.findViewById(R.id.cSwitch_textView);
    cSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            ConstraintLayout constraintLayout = rootView.findViewById(R.id.signInLayout);
            ConstraintSet constraintSet = new ConstraintSet();
            constraintSet.clone(constraintLayout);
            constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.TOP, R.id.cSwitch, ConstraintSet.TOP, 0);
            constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.BOTTOM, R.id.cSwitch, ConstraintSet.BOTTOM, 0);
            cSwitch.setThumbDrawable(rootView.getResources().getDrawable(R.drawable.switch_thumb_green));

            if (isChecked) {
                cSwitchText.setText("ON");
                constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.LEFT, R.id.cSwitch, ConstraintSet.LEFT, 0);
                constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.RIGHT, ConstraintSet.UNSET, ConstraintSet.RIGHT, 0);
                cSwitch.setTrackDrawable(ContextCompat.getDrawable(rootView.getContext(), R.drawable.switch_track_green));
            } else {
                cSwitchText.setText("OFF");
                constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.RIGHT, R.id.cSwitch, ConstraintSet.RIGHT, 0);
                constraintSet.connect(R.id.cSwitch_textView, ConstraintSet.LEFT, ConstraintSet.UNSET, ConstraintSet.LEFT, 0);
                cSwitch.setTrackDrawable(ContextCompat.getDrawable(rootView.getContext(), R.drawable.switch_track_red));
                cSwitch.setThumbDrawable(rootView.getResources().getDrawable(R.drawable.switch_thumb_red));
            }
            constraintSet.applyTo(constraintLayout);

        }
    });

Answer 2

Custom Switch you can design as your need.

Issue facing for space b/w track and thumb design to display my track design

(Issue facing for space b/w track and thumb design) I need this look like iOS lib https://github.com/gmarm/BetterSegmentedControl

So I do like that My approach is so simple, see below the code. First track design added on the RelativeLayout background(you can use as you like Layout). Track will be transparent or make white color if you need it. Just design your thumb that kind you needed.

activity_main.xml

<RelativeLayout
    android:layout_width="wrap_content"
    android:layout_height="33dp"
    android:layout_centerHorizontal="true"
    android:layout_marginHorizontal="10dp"
    android:layout_marginVertical="80dp"
    android:background="@drawable/bg_switch"
    android:padding="2.5dp">

    <androidx.appcompat.widget.SwitchCompat
        android:id="@+id/switchOnOff"
        android:layout_width="wrap_content"
        android:layout_height="30dp"
        android:layout_centerVertical="true"
        android:checked="true"
        android:textColor="@color/white"
        android:thumb="@drawable/thumb_selector"
        app:switchMinWidth="140dp"
        app:track="@drawable/track_selector" />

    <LinearLayout
        android:layout_width="140dp"
        android:layout_height="match_parent"
        android:orientation="horizontal"
        android:weightSum="2">

        <TextView
            android:id="@+id/tvSwitchYes"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="Yes"
            android:textColor="#4282DC"
            android:textSize="12sp" />

        <TextView
            android:id="@+id/tvSwitchNo"
            android:layout_width="0dp"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:layout_weight="1"
            android:gravity="center"
            android:text="No"
            android:textColor="@color/white"
            android:textSize="12sp" />


    </LinearLayout>


</RelativeLayout>

bg_switch.xml in the drawable file.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
android:shape="rectangle">
<solid android:color="@color/white" />
<corners android:radius="6dp" />
<stroke
    android:width="1dp"
    android:color="#4282DC" />
</shape>

thumb_selector.xml in the drawable file.

<?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="#4282DC" />
        <corners android:radius="6dp" />
        <size
            android:width="70dp"
            android:height="30dp" />
    </shape>

</item>

</selector>

track_selector.xml in the drawable file.

<?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/white" />
        <corners android:radius="6dp" />
        <size android:width="100dp"
            android:height="30dp" />
    </shape>
</item>
<item android:state_checked="false">
    <shape android:dither="true" android:shape="rectangle"
        android:useLevel="false" android:visible="true" >
        <corners android:radius="6dp" />
        <size
            android:width="100dp"
            android:height="30dp" />
        <solid android:color="@color/white" />
    </shape>
</item>
</selector>

MainActivity.kt

class MainActivity : AppCompatActivity() {

private lateinit var switchOnOff: SwitchCompat
private lateinit var tvSwitchYes: TextView
private lateinit var tvSwitchNo: TextView

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)
    switchOnOff = findViewById<SwitchCompat>(R.id.switchOnOff)
    tvSwitchYes = findViewById<TextView>(R.id.tvSwitchYes)
    tvSwitchNo = findViewById<TextView>(R.id.tvSwitchNo)
    switchOnOff.setOnCheckedChangeListener { _, checked ->
        when {
            checked -> {        
       tvSwitchYes.setTextColor(ContextCompat.getColor(this,R.color.blue_color))
       tvSwitchNo.setTextColor(ContextCompat.getColor(this,R.color.white))
            }
            else -> {         
       tvSwitchYes.setTextColor(ContextCompat.getColor(this,R.color.white))
       tvSwitchNo.setTextColor(ContextCompat.getColor(this,R.color.blue_color))
            }
        }
    }
}
}