Custom Switch Button in Android

Follow the steps to create a Custom Switch Button. 

1. First create the view : custom_switch_button_view.xml

 <?xml version="1.0" encoding="utf-8"?>  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   xmlns:tools="http://schemas.android.com/tools"  
   android:orientation="vertical"  
   android:layout_width="match_parent"  
   android:layout_height="wrap_content">  
   <RadioGroup  
     android:id="@+id/toggle"  
     android:layout_width="match_parent"  
     android:layout_height="wrap_content"  
     android:layout_margin="@dimen/general_margin"  
     android:orientation="horizontal">  
     <RadioButton  
       android:id="@+id/progect_btn"  
       android:layout_width="wrap_content"  
       android:layout_height="match_parent"  
       android:layout_marginBottom="1dp"  
       android:layout_marginStart="1dp"  
       android:layout_marginTop="1dp"  
       android:layout_weight="1"  
       android:background="@drawable/switch_left_selector"  
       android:button="@null"  
       android:checked="false"  
       android:gravity="center"  
       android:padding="@dimen/general_elevation"  
       tools:text="ButtonA"  
       android:textSize="@dimen/text_font_size_medium_more"  
       android:textColor="@color/blue_text" />  
     <RadioButton  
       android:id="@+id/budget_btn"  
       android:layout_width="wrap_content"  
       android:layout_height="match_parent"  
       android:layout_marginBottom="1dp"  
       android:layout_marginEnd="1dp"  
       android:layout_marginTop="1dp"  
       android:layout_weight="1"  
       android:checked="true"  
       android:background="@drawable/switch_right_selector"  
       android:button="@null"  
       android:gravity="center"  
       android:padding="@dimen/general_elevation"  
       tools:text="ButtonB"  
       android:textSize="@dimen/text_font_size_medium_more"  
       android:textColor="@color/blue_dark" />  
   </RadioGroup>  
 </LinearLayout>  

2. Create a background drawable file : switch_left_selector

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

2A. Create drawable switch_left_selected

 <?xml version="1.0" encoding="utf-8"?>  
 <shape xmlns:android="http://schemas.android.com/apk/res/android"    
 android:shape="rectangle">    
 <solid android:color="@color/blue_bg" />    
 <corners    android:bottomLeftRadius="@dimen/button_radius_corner"      
 android:topLeftRadius="@dimen/button_radius_corner" />  
 </shape>  

2B. Create drawable switch_left_unselected

<?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:bottomLeftRadius="@dimen/button_radius_corner" android:topLeftRadius="@dimen/button_radius_corner" /> <stroke android:width="1dp" android:color="@color/brownGrey" /> </shape>

3. Create a bacground drawable file : switch_right_selector

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

3A. Create drawable switch_right_selected

 <?xml version="1.0" encoding="utf-8"?>  
 <shape xmlns:android="http://schemas.android.com/apk/res/android"    
 android:shape="rectangle">    
 <solid android:color="@color/blue_bg" />  
   <corners    android:bottomRightRadius="@dimen/button_radius_corner"  
     android:topRightRadius="@dimen/button_radius_corner"    />  
 </shape> 

3B. Create drawable switch_right_unselected

 <?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:bottomRightRadius="@dimen/button_radius_corner"  
     android:topRightRadius="@dimen/button_radius_corner"    />  
   <stroke    android:width="1dp"  
     android:color="@color/brownGrey" />  
 </shape>  

Finally we will obtain the given design above.

Post From:

Niranjan Khatri