Add a Navigation Drawer
suggest changeNavigation Drawers are used to navigate to top-level destinations in an app.
Make sure that you have added design support library in your build.gradle
file under dependencies:
dependencies { // ... compile 'com.android.support:design:25.3.1' }
Next, add the DrawerLayout
and NavigationView
in your XML layout resource file.
The DrawerLayout
is just a fancy container that allows the NavigationView
, the actual navigation drawer, to slide out from the left or right of the screen. Note: for mobile devices, the standard drawer size is 320dp.
<!-- res/layout/activity_main.xml --> <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:id="@+id/navigation_drawer_layout" android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true" tools:openDrawer="start"> <! -- You can use "end" to open drawer from the right side --> <android.support.design.widget.CoordinatorLayout android:layout_width="match_parent" android:layout_height="match_parent" android:fitsSystemWindows="true"> <android.support.design.widget.AppBarLayout android:layout_width="match_parent" android:layout_height="wrap_content" android:theme="@style/AppTheme.AppBarOverlay"> <android.support.v7.widget.Toolbar android:id="@+id/toolbar" android:layout_width="match_parent" android:layout_height="?attr/actionBarSize" android:background="?attr/colorPrimary" app:popupTheme="@style/AppTheme.PopupOverlay" /> </android.support.design.widget.AppBarLayout> </android.support.design.widget.CoordinatorLayout> <android.support.design.widget.NavigationView android:id="@+id/navigation_drawer" android:layout_width="320dp" android:layout_height="match_parent" android:layout_gravity="start" android:fitsSystemWindows="true" app:headerLayout="@layout/drawer_header" app:menu="@menu/navigation_menu" /> </android.support.v4.widget.DrawerLayout>
Now, if you wish, create a header file that will serve as the top of your navigation drawer. This is used to give a much more elegant look to the drawer.
<!-- res/layout/drawer_header.xml --> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="190dp"> <ImageView android:id="@+id/header_image" android:layout_width="140dp" android:layout_height="120dp" android:layout_centerInParent="true" android:scaleType="centerCrop" android:src="@drawable/image" /> <TextView android:id="@+id/header_text_view" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/header_image" android:text="User name" android:textSize="20sp" /> </RelativeLayout>
It is referenced in the NavigationView
tag in the app:headerLayout="@layout/drawer_header"
attribute.
This app:headerLayout
inflates the specified layout into the header automatically. This can alternatively be done at runtime with:
// Lookup navigation view NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_drawer); // Inflate the header view at runtime View headerLayout = navigationView.inflateHeaderView(R.layout.drawer_header);
To automatically populate your navigation drawer with material design-compliant navigation items, create a menu file and add items as needed. Note: while icons for items aren’t required, they are suggested in the Material Design specification.
It is referenced in the NavigationView
tag in the app:menu="@menu/navigation_menu" attribute
.
<!-- res/menu/menu_drawer.xml --> <menu xmlns:android="http://schemas.android.com/apk/res/android"> <item android:id="@+id/nav_item_1" android:title="Item #1" android:icon="@drawable/ic_nav_1" /> <item android:id="@+id/nav_item_2" android:title="Item #2" android:icon="@drawable/ic_nav_2" /> <item android:id="@+id/nav_item_3" android:title="Item #3" android:icon="@drawable/ic_nav_3" /> <item android:id="@+id/nav_item_4" android:title="Item #4" android:icon="@drawable/ic_nav_4" /> </menu>
To separate items into groups, put them into a <menu>
nested in another <item>
with an android:title
attribute or wrap them with the <group>
tag.
Now that the layout is done, move on to the Activity
code:
// Find the navigation view NavigationView navigationView = (NavigationView) findViewById(R.id.navigation_drawer); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { // Get item ID to determine what to do on user click int itemId = item.getItemId(); // Respond to Navigation Drawer selections with a new Intent startActivity(new Intent(this, OtherActivity.class)); return true; } }); DrawerLayout drawer = (DrawerLayout) findViewById(R.id.navigation_drawer_layout); // Necessary for automatically animated navigation drawer upon open and close ActionBarDrawerToggle toggle = new ActionBarDrawerToggle(this, drawer, "Open navigation drawer", "Close navigation drawer"); // The two Strings are not displayed to the user, but be sure to put them into a separate strings.xml file. drawer.addDrawerListener(toggle); toogle.syncState();
You can now do whatever you want in the header view of the NavigationView
View headerView = navigationView.getHeaderView(); TextView headerTextView = (TextView) headerview.findViewById(R.id.header_text_view); ImageView headerImageView = (ImageView) headerview.findViewById(R.id.header_image); // Set navigation header text headerTextView.setText("User name"); // Set navigation header image headerImageView.setImageResource(R.drawable.header_image);
The header view behaves like any other View
, so once you use findViewById()
and add some other View
s to your layout file, you can set the properties of anything in it.
You can find more details and examples in the dedicated topic.