Custom switch control

Need to be in drawable Create four new directories xml file

switch_thumb_on.xml

1. <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle"
       >
   
       <solid
           android:color="@android:color/holo_green_dark">
       </solid>
       <size
           android:width="30dp"
           android:height="30dp">
       </size>
       <corners
           android:radius="32dp">
       </corners>
   
   
   </shape>

   switch_thumb_off.xml 

2. <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <solid
           android:color="#7c7c7c">
       </solid>
   
       <size
           android:width="30dp"
           android:height="30dp">
       </size>
       <corners
           android:radius="32dp">
       </corners>
   
   </shape>

   switch_track_off.xml

3. <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
       <solid
           android:color="@android:color/darker_gray">
       </solid>
       <stroke android:color="#00000000"
           android:width="20dp" />
   
       <corners
           android:radius="20dp">
       </corners>
   
   </shape>
   

   switch_teack_on.xml

4. <?xml version="1.0" encoding="utf-8"?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android"
       android:shape="rectangle">
   
       <solid
           android:color="@android:color/holo_green_light">
       </solid>
       <stroke android:color="#00000000"
           android:width="20dp"/>
   
       <corners
           android:radius="20dp">
       </corners>
   
   </shape>
   

   The first two are switches with movable sliders xml file , The last two are for the slider track xml file , Next, create another xml file switch_track.xml

<?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/switch_track_on" />
    <item android:state_checked="false"
        android:drawable="@drawable/switch_track_off"/>


</selector>

This xml The document specifies the corresponding parameters for different state references of the slider xml file , There are two ways ：

Method 1. stay value-->styles.xml Add

style name="My.TextAppearance" parent="@style/TextAppearance.AppCompat.Widget.Switch">
 
        <item name="android:textSize">20dp</item>
 
        <item name="android:textColor">#000</item>
 
    </style>

Then in your layout xml Add... To the file ：

<Switch
        android:layout_width="wrap_content"
        android:layout_height="0dp"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:layout_gravity="center_horizontal"
        android:layout_marginStart="348dp"
        android:layout_weight="1"
        android:checked="false"
        android:switchTextAppearance="@style/My.TextAppearance"
        tools:checked="true" />

Running simulator , You can see the custom switch.

Method 2. Let's create another one xml file ,switch_thumb.xml

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

</selector>

Then go to the layout file reference switch Control

<Switch
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center_horizontal"
        android:layout_marginStart="248dp"
        android:switchMinWidth="70dp"
        android:checked="false"
        android:showText="true"
        android:textOn=" open "
        android:textOff=" Turn off "
        android:thumb="@drawable/switch_thumb"
        android:track="@drawable/switch_track"
        tools:checked="true" />

Here's the moving track ahead xml in

<stroke android:color="#00000000"
    android:width="20dp" />

Represents using a transparent border to constrain the track inside, so as to achieve , The track is a thin line , I would like to thank my colleagues for their guidance ＠jerome