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

您可以根据需要设计定制开关。

用于显示我的轨道设计的空间黑白轨道和拇指设计面临的问题

（空间黑白轨道和拇指设计面临的问题）我需要这个看起来像 iOS lib https://github.com/gmarm/BetterSegmentedControl

所以我确实喜欢我的方法非常简单，请参阅下面的代码。在RelativeLayout背景上添加了第一个轨道设计（您可以使用您喜欢的布局）。如果需要，轨道将是透明的或变成白色。只需设计您需要的拇指即可。

活动主文件

<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。

<?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。

<?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。

<?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))
            }
        }
    }
}
}


  

Answer 2

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);

        }
    });