Kata05 NavigationDrawer - mitchwongho/GDS-Material-Kata GitHub Wiki
The NavigationDrawer slider in from the left. It is a common pattern found in Google apps and follows the keylines and metrics for lists. Reference
The goal of this kata is to add a navigation drawer, with navdrawer items. [Source reference]
Begin by creating the NavigationDrawer menu by defining it in res/menu/menu_navigation.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:checkableBehavior="single">
<item
android:title="@string/menu_nav_one"
android:icon="@android:drawable/ic_delete"/>
<item
android:title="@string/menu_nav_two"
android:icon="@android:drawable/ic_input_add"/>
<item
android:title="@string/menu_nav_three"
android:icon="@android:drawable/ic_input_get"/>
</group>
</menu>
Define the header section layout for the NavigationDrawer in res/layout/navdrawer_header.xml:
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="@dimens/navheader_height"
android:background="?attr/colorPrimaryDark"
android:padding="@dimen/normal_padding"
android:orientation="vertical"/>
Apply android.support.v4.widget.DrawerLayout as the parent ViewGroup in res/layout/activity_main.xml and introduce android.support.design.widget.NavigationView as it's child view:
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
tools:context=".MainActivity">
<!-- Navdrawer -->
<android.support.design.widget.NavigationView
android:id="@+id/nav_drawer"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:background="@android:color/white"
android:clickable="true"
app:headerLayout="@layout/navdrawer_header"
app:menu="@menu/menu_navigation"
app:itemBackground="?attr/selectableItemBackground"/>
<!-- Main Activity content-->
<RelativeLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
...
</RelativeLayout>
</android.support.v4.widget.DrawerLayout>
To conclude, download and apply the menu icon ic_menu_24dp to the header Toolbar and apply implement Toolbar.setNavigationOnClickListener() and NavigationDrawer.setNavigationItemSelectedListener() to handle menu-click and menuitem-click events:
protected void onCreate(Bundle savedInstanceState) {
// Define Header Toolbar
...
// Initialise RecyclerView and apply String-array
...
// Generate palette
...
// Apply navigation click-events
drawerLayout = (DrawerLayout)findViewById(R.id.drawer);
navdrawer = (NavigationView)findViewById(R.id.nav_drawer);
headerToolbar.setNavigationIcon(R.mipmap.ic_menu_24dp);
headerToolbar.setNavigationOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
// open drawer
drawerLayout.openDrawer(GravityCompat.START);
}
});
//
// onItemSelected
navdrawer.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
@Override
public boolean onNavigationItemSelected(final MenuItem menuItem) {
menuItem.setChecked(true);
// TODO handle navigation
drawerLayout.closeDrawers();
return true;
}
});
...
}