An example illustrating a Navigation Drawer in Android, which is an user interface panel that shows your app's main navigation menu.
A Navigation Drawer is an excellent way to displaying your app's navigation options, as well as other options, to the user. Usually hidden when not in use, it saves valuable screen space and declutters your app's user interface.
This article will show you how to do the following:
- Implement a simple Navigation Drawer as per standard Navigation Drawer Design
- Handle navigation click events to navigate to other fragments
- Add custom switch button to the Navigation Drawer and handle the click events
There is comprehensive documentation on how to implement a simple Navigation Drawer in Android here, so I won't repeat it here. Instead, I will show how to add other features not covered in the documentation.
To handle menu item click events, read this part of the documentation under Handle navigation click events.
In order to show another fragment on screen, first check the id of the menu item clicked using getItemId()
, then use getSupportFragmentManager()
to switch to another fragment:
@Override
public boolean onNavigationItemSelected(@NonNull MenuItem menuItem) {
switch (menuItem.getItemId()){
case R.id.first_menu_id:
getSupportFragmentManager().beginTransaction().replace(R.id.layout_container_id, new InstanceOfNewFragment())
.commit();
// To close the drawer
drawerLayout.closeDrawer(GravityCompat.START)
break;
When a menu item clicked is not part of a group of single-selectable menu items, the previously selected item will remain highlighted even when its fragment is not displayed on screen. To deselect it, iterate through all the menu items and set their checked state to false:
int noOfItems = navigationView.getMenu().size();
for (int i=0; i<noOfItems;i++){
navigationView.getMenu().getItem(i).setChecked(false);
}
If you want to have menu items grouped together and have a header on top, in your menu item xml file:
<item android:title="Communicate">
<menu>
<item
android:id="@+id/nav_send_id"
android:icon="@drawable/ic_send_black_24dp"
android:title="Send" />
<item
android:id="@+id/nav_share_id"
android:icon="@drawable/ic_publish_black_24dp"
android:title="Share" />
<item
android:id="@+id/nav_photos_id"
android:title="Photos"
android:icon="@drawable/ic_photo_black_24dp"
/>
<item
android:id="@+id/nav_trash_id"
android:title="Trash"
android:icon="@drawable/ic_delete_black_24dp"
/>
</menu>
Note that this removes the ability to make them single-selectable.
If you want the navigation drawer to close when the back button is pressed, override onBackPressed()
:
@Override
public void onBackPressed() {
//Checks if the navigation drawer is open -- If so, close it
if (drawerLayout.isDrawerOpen(GravityCompat.START)) {
drawerLayout.closeDrawer(GravityCompat.START);
}
// If drawer is already close -- Do not override original functionality
else {
super.onBackPressed();
}
}
onCreate()
is called when the activity is initialized. By default, no fragment is displayed before the user selects a menu item in the drawer and hence the screen will be blank.
In order to show a default fragment when the app is first runned, check if the savedInstanceState
passed to onCreate()
is null
by implementing to following lines of code in onCreate()
:
if (savedInstanceState == null){
// Get the menu item at the itemIndex position
MenuItem menuItem = navigationView.getMenu().getItem(itemIndex).setChecked(true);
// Override
onNavigationItemSelected(menuItem);
}
To add a switch button as a menu item in the navigation drawer, first create a seperate xml file for it with android.support.v7.widget.SwitchCompat
. You do not necessarily need to give it an id.
<android.support.v7.widget.SwitchCompat
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"/>
In the drawer menu xml file, use app:actionLayout
to include it as part of a menu item:
<item
android:id="@+id/nav_darkmode_id"
android:title="Dark Mode"
android:icon="@drawable/ic_brightness_3_black_24dp"
app:actionLayout="@layout/nav_drawer_darkmode_switch"
/>
In java code, instantiate the switch button and attach a setOnCheckedChangeListener
to it:
private SwitchCompat darkModeSwitch;
@Override
protected void onCreate(Bundle savedInstanceState) {
darkModeSwitch = (SwitchCompat)navigationView.getMenu().findItem(R.id.nav_darkmode_id).getActionView();
// Attach listener
darkModeSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() {
@Override
public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) {
if (!isChecked){
// Switch is unchecked - Do something
}
else {
// Switch is checked - Do something
}
}
}
- Design Support Library - The Design package provides APIs to support adding material design components and patterns to your apps
- CircleImageView by hdodenhof - A circular ImageView for Android
dependencies {
// Design Support Library
implementation 'com.android.support:design:28.0.0'
//CircleImageView
implementation 'de.hdodenhof:circleimageview:2.2.0'
}
MIT License
Copyright (c) 2018 Nicholas Gan
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.