We previously customized progress bar with Android Custom Progress Bar Using XML Drawables tutorial. This time we will go with custom toggle button in android.
1. Toggle button Introduction
Toggle buttons are handy when you want to allow your users to switch between two states. When it comes to two states OR on/off OR selection, there are several things like you can use CheckBox, Switch, Toggle Button, Radio Button. But It’s probably up to the case where they are used.
2. What user experience has to say about toggle button?
- Toggle Button with effective customization shows current state much more visible. Using Toggle Button is makes more sense when there are number of buttons to select states between (not talking regarding single selection RadioButtons).
- CheckBoxes makes more sense for showing things which can be shown separately.
- While using Toggle Button it should be taken care that they show their activation states in a way user can understand easily.
3. Class & Api Availability
Toggle Button is direct subclass of CompoundButton and is available since API level 1.
Now let us dirty our hands. We are going to create 7 custom toggle buttons that shows weekdays like in alarm application to select days of week on which your alarms should ring.
4. Create a new android studio project with empty activity.
After creating project I have my launcher activity in manifest with name MainActivity and its layout file as activity_main.xml
5. Create drawable for custom toggle button’s on/activated state. (toggle_activated.xml)
|
1 2 3 4 5 6 7 |
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="oval"> <solid android:color="#e7d800"/> </shape> </item> </selector> |
6. Create drawable for custom toggle button’s off/deactivated state. (toggle_deactivated.xml)
|
1 2 3 4 5 6 7 |
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item> <shape android:shape="oval"> <solid android:color="#353535"/> </shape> </item> </selector> |
7. Further make one more drawable to be able to combine on and off state of custom toggle button. (toggle_drawable.xml)
|
1 2 3 4 5 6 |
<selector xmlns:android="http://schemas.android.com/apk/res/android"> <item android:drawable="@drawable/toggle_activated" android:state_checked="true" /> <item android:drawable="@drawable/toggle_deactivated" android:state_checked="false" /> </selector> |
8. Now we can make a style for our custom toggle button inside styles.xml.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<style name="CustomToggleButtonStyle"> <item name="android:layout_width">35dp</item> <item name="android:layout_height">35dp</item> <item name="android:background">@drawable/toggle_drawable</item> <item name="android:textAllCaps">true</item> <item name="android:layout_marginRight">12dp</item> <item name="android:layout_marginEnd">12dp</item> <item name="android:textSize">18sp</item> <item name="android:textStyle">bold</item> <item name="android:textColor">#a5860c</item> <item name="android:textOff"></item> </style> |
9. And we are ready to design layout to show custom toggle buttons. (activity_main.xml)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="#120fd3" android:orientation="vertical" tools:context="com.androidnovice.customtogglebutton.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="horizontal" android:layout_marginTop="10dp" android:gravity="center_horizontal"> <ToggleButton android:id="@+id/tog_sun" style="@style/CustomToggleButtonStyle" android:textOn="S" /> <ToggleButton android:id="@+id/tog_mon" style="@style/CustomToggleButtonStyle" android:textOn="M" /> <ToggleButton android:id="@+id/tog_tue" style="@style/CustomToggleButtonStyle" android:textOn="T" /> <ToggleButton android:id="@+id/tog_wed" style="@style/CustomToggleButtonStyle" android:textOn="W" /> <ToggleButton android:id="@+id/tog_thu" style="@style/CustomToggleButtonStyle" android:textOn="T" /> <ToggleButton android:id="@+id/tog_fri" style="@style/CustomToggleButtonStyle" android:textOn="F" /> <ToggleButton android:id="@+id/tog_sat" style="@style/CustomToggleButtonStyle" android:textOn="S" /> </LinearLayout> <LinearLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:orientation="vertical" android:paddingLeft="30dp" android:paddingStart="30dp" android:layout_centerInParent="true"> <TextView android:id="@+id/state_sun" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="16dp" android:textColor="#FFFFFF"/> <TextView android:id="@+id/state_mon" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="16dp" android:textColor="#FFFFFF"/> <TextView android:id="@+id/state_tue" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="16dp" android:textColor="#FFFFFF"/> <TextView android:id="@+id/state_wed" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="16dp" android:textColor="#FFFFFF"/> <TextView android:id="@+id/state_thu" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="16dp" android:textColor="#FFFFFF"/> <TextView android:id="@+id/state_fri" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="16dp" android:textColor="#FFFFFF"/> <TextView android:id="@+id/state_sat" android:layout_width="match_parent" android:layout_height="wrap_content" android:textSize="16dp" android:textColor="#FFFFFF"/> </LinearLayout> </RelativeLayout> |
10. Paste below code inside MainActivity.java.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
package com.androidnovice.customtogglebutton; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.widget.CompoundButton; import android.widget.TextView; import android.widget.ToggleButton; public class MainActivity extends AppCompatActivity implements CompoundButton.OnCheckedChangeListener { ToggleButton tog_sun, tog_mon, tog_tue, tog_wed, tog_thu, tog_fri, tog_sat; TextView state_sun, state_mon, state_tue, state_wed, state_thu, state_fri, state_sat; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); tog_sun = (ToggleButton) findViewById(R.id.tog_sun); tog_mon = (ToggleButton) findViewById(R.id.tog_mon); tog_tue = (ToggleButton) findViewById(R.id.tog_tue); tog_wed = (ToggleButton) findViewById(R.id.tog_wed); tog_thu = (ToggleButton) findViewById(R.id.tog_thu); tog_fri = (ToggleButton) findViewById(R.id.tog_fri); tog_sat = (ToggleButton) findViewById(R.id.tog_sat); state_sun = (TextView) findViewById(R.id.state_sun); state_mon = (TextView) findViewById(R.id.state_mon); state_tue = (TextView) findViewById(R.id.state_tue); state_wed = (TextView) findViewById(R.id.state_wed); state_thu = (TextView) findViewById(R.id.state_thu); state_fri = (TextView) findViewById(R.id.state_fri); state_sat = (TextView) findViewById(R.id.state_sat); tog_sun.setOnCheckedChangeListener(this); tog_mon.setOnCheckedChangeListener(this); tog_tue.setOnCheckedChangeListener(this); tog_wed.setOnCheckedChangeListener(this); tog_thu.setOnCheckedChangeListener(this); tog_fri.setOnCheckedChangeListener(this); tog_sat.setOnCheckedChangeListener(this); // Initial states of Toggle Buttons state_sun.setText("Sunday is " + (tog_sun.isChecked() ? "on" : "off")); state_mon.setText("Monday is " + (tog_mon.isChecked() ? "on" : "off")); state_tue.setText("Tuesday is " + (tog_tue.isChecked() ? "on" : "off")); state_wed.setText("Wednesday is " + (tog_wed.isChecked() ? "on" : "off")); state_thu.setText("Thursday is " + (tog_thu.isChecked() ? "on" : "off")); state_fri.setText("Friday is " + (tog_fri.isChecked() ? "on" : "off")); state_sat.setText("Satday is " + (tog_sat.isChecked() ? "on" : "off")); } @Override public void onCheckedChanged(CompoundButton compoundButton, boolean b) { String currentState = ((b) ? "on" : "off"); switch (compoundButton.getId()){ case R.id.tog_sun: state_sun.setText("Sunday is " + currentState); break; case R.id.tog_mon: state_mon.setText("Monday is " + currentState); break; case R.id.tog_tue: state_tue.setText("Tuesday is " + currentState); break; case R.id.tog_wed: state_wed.setText("Wednesday is " + currentState); break; case R.id.tog_thu: state_thu.setText("Thursday is " + currentState); break; case R.id.tog_fri: state_fri.setText("Friday is " + currentState); break; case R.id.tog_sat: state_sat.setText("Saturday is " + currentState); break; } } } |
Of course, instead of plain colors you can replace drawables with your custom images as well inside toggle_activated.xml and toggle_deactivated.xml.
Here is the that will be shown on your screen.
