Navigation drawer in Android part 2: How to add a toggle button on the navigation drawer and add listeners

Intro

This is part two of the Navigation drawer in Android post and it will be a demonstration on how to create a toggle button on the navigation drawer menu and add listeners to track on toggle switch events.

The Exercise

We will continue working on the same project that we created for part one of this post. The first thing we will do is to create a switch item in the drawer menu. We go in the drawermenu.xml file and under the profile item we add a new item:

&lt;item
    android:id="@+id/switchToogleButton"
    android:icon="@drawable/ic_switch_camera_black_24dp"
    android:title="Switch"
    app:actionLayout="@layout/layout_switch"/&gt;

<item

android:id="@+id/switchToogleButton"

android:icon="@drawable/ic_switch_camera_black_24dp"

android:title="Switch"

app:actionLayout="@layout/layout_switch"/>

From the previous project we already know how to add icon for the item. Also you will notice that the last line is turning red, because we don’t have a layout_switch file yet. Click on this line and press Alt+Enter and select – Create layout resource file’layout_switch.xml’.

We will be using linear layout for this layout_switch.xml file and the code will look like this:

&lt;?xml version="1.0" encoding="utf-8"?&gt;
&lt;LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="horizontal" android:layout_width="match_parent"
    android:layout_height="match_parent"&gt;

    &lt;Switch
        android:id="@+id/drawer_switch"
        android:layout_width="fill_parent"
        android:layout_height="match_parent"
        android:text=""/&gt;

&lt;/LinearLayout&gt;

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

android:orientation="horizontal" android:layout_width="match_parent"

android:layout_height="match_parent">

<Switch

android:id="@+id/drawer_switch"

android:layout_width="fill_parent"

android:layout_height="match_parent"

android:text=""/>

</LinearLayout>

Now if you run the application you will see a toggle button on the navigation drawer that you can turn on and off, but it does nothing at this point.

Next we will add a listener for the toggle button and add the case for this item in the switchScreen(int id) method, make it display toast message when the switch is turned on or off.

The code for this case will look like this:

case R.id.switchToggleButton:
    MenuItem menuItem = navigationView.getMenu().findItem(R.id.switchToggleButton); // This is the menu item that contains your switch
    Switch drawerSwitch = (Switch) menuItem.getActionView().findViewById(R.id.drawer_switch);
    drawerSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
        @Override
        public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
            if (isChecked) {
                Toast.makeText(HomeActivity.this, "Switch turned on", Toast.LENGTH_SHORT).show();
            } else {
                Toast.makeText(HomeActivity.this, "Switch turned off", Toast.LENGTH_SHORT).show();
            }
        }
    });
    break;

case R.id.switchToggleButton:

MenuItem menuItem = navigationView.getMenu().findItem(R.id.switchToggleButton); // This is the menu item that contains your switch

Switch drawerSwitch = (Switch) menuItem.getActionView().findViewById(R.id.drawer_switch);

drawerSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {

@Override

public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {

if (isChecked) {

Toast.makeText(HomeActivity.this, "Switch turned on", Toast.LENGTH_SHORT).show();

} else {

Toast.makeText(HomeActivity.this, "Switch turned off", Toast.LENGTH_SHORT).show();

}

});

break;

Auto import the missing classes. If you run the app now, you will see that in order for the toggle button to work first we must select the Switch item in the menu. To make the Switch item selected when we click the burger menu icon and the toggle button to work without being obligated to click on the Switch item first, we need to add two more lines of code in the onOptionsItemSelected method:

navigationView.setCheckedItem(R.id.switchToggleButton);
navigationView.getMenu().performIdentifierAction(R.id.switchToggleButton, 0);

This method will now look like this:

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    navigationView.setCheckedItem(R.id.switchToggleButton);
    navigationView.getMenu().performIdentifierAction(R.id.switchToggleButton, 0);
    if (mToggle.onOptionsItemSelected(item)) {
        return true;
    } else {
        return super.onOptionsItemSelected(item);
    }
}