Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 

  • How to make Custom Switch in android

    @rajshekhar.tiwari
    Recommendations Offline Message

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 6.61k
    Comment on it

    In the below example I have created Customizing Switch button. Here I have added a Switch in activity_main.xml layout. In second step I have created backgraund.xml layout in drawable folder, here I have design switch backgraund shape. In third step I have created a new customtrack.xml layout in drawable folder.Now in next step I have added string name with in String.xml layout. In MainActivity I have used toast function. You can see below program it clearly describe you How to make Custom Switch in android.
    Step(1)activity_main.xml layout-

    1. <?xml version="1.0" encoding="utf-8"?>
    2.  
    3. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    4.     android:layout_width="match_parent"
    5.     android:layout_height="match_parent"
    6.     android:background="@drawable/backgraund"
    7.     android:orientation="vertical">
    8.  
    9.  
    10.     <Switch android:id="@+id/swtch"
    11.         android:layout_width="wrap_content"
    12.         android:layout_height="wrap_content"
    13.         android:textOn="@string/checkedstate"
    14.         android:textOff="@string/uncheckedstate"
    15.         android:minWidth="25dp"
    16.         android:layout_marginTop="29dp"
    17.         android:layout_marginLeft="40dp"
    18.         android:switchPadding="10dp"
    19.         android:onClick="togglestatehandler"
    20.         android:thumb="@drawable/backgraund"
    21.         android:track="@drawable/customtrack"
    22.         android:thumbTextPadding="15dp"
    23.         android:textStyle="bold|italic"
    24.         android:typeface="sans"/>
    25.  
    26. </LinearLayout>

    Step(2)-Created a new backgraund.xml layout in drawable folder-

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <selector xmlns:android="http://schemas.android.com/apk/res/android" >
    3.     <item android:state_checked="true">
    4.         <shape android:shape="rectangle"
    5.             android:visible="true"
    6.             android:dither="true"
    7.             android:useLevel="false">
    8.  
    9.             <gradient android:startColor="#66AAFF00"
    10.                 android:endColor="#6600FF00"
    11.                 android:angle="270"/>
    12.  
    13.             <corners android:radius="15dp"/>
    14.  
    15.             <size android:width="27dp"
    16.                 android:height="37dp" />
    17.         </shape>
    18.     </item>
    19.  
    20.     <item android:state_checked="false">
    21.         <shape android:shape="rectangle"
    22.             android:visible="true"
    23.             android:dither="true"
    24.             android:useLevel="false">
    25.  
    26.             <gradient android:startColor="#66e133b6"
    27.                 android:endColor="#6619e4d6"
    28.                 android:angle="270"/>
    29.  
    30.             <corners android:radius="15dp"/>
    31.  
    32.             <size android:width="27dp"
    33.                 android:height="37dp" />
    34.         </shape>
    35.     </item>
    36.  
    37.  
    38. </selector>


    Step(3)-Created a new customtrack.xml layout in drawable folder-

    1. <?xml version="1.0" encoding="utf-8"?>
    2. <shape xmlns:android="http://schemas.android.com/apk/res/android"
    3.     android:shape="rectangle"
    4.     android:visible="true"
    5.     android:dither="true"
    6.     android:useLevel="false">
    7.     <gradient android:startColor="#660000FF"
    8.         android:endColor="#6600CCFF"
    9.         android:angle="270"/>
    10.     <corners android:radius="15dp"/>
    11.     <size android:width="30dp"
    12.         android:height="40dp" />
    13. </shape>

    Step(4)-Add string in string.xml -
        

    1.   <resources>
    2.        <string name="checkedstate">START</string>
    3.         <string name="uncheckedstate">STOP</string>
    4.       </resources>

     Step(5)-MainActivity-
     
     

    1. public class MainActivity extends AppCompatActivity {
    2.  
    3.  
    4.     Switch switchbtn;
    5.  
    6.     private Context context = this;
    7.  
    8.     @Override
    9.     protected void onCreate(Bundle savedInstanceState) {
    10.         super.onCreate(savedInstanceState);
    11.         setContentView(R.layout.activity_main);
    12.         switchbtn = (Switch) findViewById(R.id.swtch);
    13.         applyStyle(switchbtn.getTextOn(), switchbtn.getTextOff());
    14.  
    15.     }
    16.  
    17.  
    18.     public void applyStyle(CharSequence switchTxtOn, CharSequence switchTxtOff) {
    19.  
    20.         Spannable styleText = new SpannableString(switchTxtOn);
    21.         StyleSpan style = new StyleSpan(Typeface.BOLD);
    22.         styleText.setSpan(style, 0, switchTxtOn.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    23.         styleText.setSpan(new ForegroundColorSpan(Color.GREEN), 0, switchTxtOn.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    24.         switchbtn.setTextOn(styleText);
    25.  
    26.         styleText = new SpannableString(switchTxtOff);
    27.         styleText.setSpan(style, 0, switchTxtOff.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    28.         styleText.setSpan(new ForegroundColorSpan(Color.RED), 0, switchTxtOff.length(), Spannable.SPAN_INCLUSIVE_EXCLUSIVE);
    29.         switchbtn.setTextOff(styleText);
    30.  
    31.     }
    32.  
    33.     public void togglestatehandler(View v) {
    34.         Switch switchbtn = (Switch) v;
    35.         boolean isChecked = switchbtn.isChecked();
    36.  
    37.         if (isChecked) {
    38.             Toast.makeText(context, "On......", Toast.LENGTH_SHORT).show();
    39.         } else {
    40.             Toast.makeText(context, "Off......", Toast.LENGTH_SHORT).show();
    41.         }
    42.  
    43.     }
    44. }

     

    Android Custom Switch
    Comment on it

 0 Comment(s)

Sign In
Forgot Password?
                           OR                           
Create an account !!
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Reset Password
Fill out the form below and reset your password: