Android Studio navigation drawer like Gmail app
You should use NavigationView
It provides the framework for easy to implement material navigation drawer with the help of inflate navigation items through menu resource. Befor Navigation View, we have hard way to make material navigation drawer using listview or linearlayout with custom adapter, but now we just need to add Navigation View in DrawerLayout, everything else will be handled by Navigation View.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true">
<!-- Your contents -->
<android.support.design.widget.NavigationView
android:id="@+id/navigation"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:menu="@menu/my_navigation_items" />
</android.support.v4.widget.DrawerLayout>
For this requirement You can check sample
MaterialDrawer
How To Make Material Design Navigation Drawer
Playing with NavigationView
Hope this helps .
The effect you want can be achieved by using NavigationView
from the com.android.support:design
support lib.
You can find a full tutorial on that here. And you can download the full source code from that tutorial here.
And here's another nice tutorial that you could follow.
But long story short, that view is split between two main parts, a header and a menu part, and each one of those you'll have to define on XML.
As from that tutorial:
Header View
This View is basically the top part of the navigation drawer, which holds the profile picture, name and email etc. You need to define this in a separate layout file we would look into that in just a moment.
Menu
This is the menu you want to show below your header, we define menu in a menus folder, just like you define menu for your overflow menu. So basically NavigationView is a container for the Header View and Menu which you are going to use in your sliding drawer. So now that you understand the NavigationView we can start building our Navigation Drawer.
With that in mind, build your header as you would do with any other layout. And the Menu is defined somewhat like the Toolbar/ActionBar menu. e.g.:
navigation_menu.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group
android:checkableBehavior="single">
<item
android:id="@+id/drawer_home"
android:checked="true"
android:icon="@drawable/icon_home"
android:title="@string/title_home"/>
<item
android:id="@+id/drawer_content"
android:icon="@drawable/icon_content"
android:title="@string/title_content"/>
<item
android:id="@+id/drawer_about"
android:icon="@drawable/icon_about"
android:title="@string/title_about"/>
<item
android:id="@+id/drawer_exit"
android:icon="@drawable/icon_exit"
android:title="@string/title_exit"/>
</group>
</menu>
Then, on your Activity
you'll just have to make a layout like the one found in the tutorial, using the DrawerLayout
along with NavigationView
.
<android.support.v4.widget.DrawerLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:id="@+id/drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
tools:context=".MainActivity">
<LinearLayout
android:layout_height="match_parent"
android:layout_width="match_parent"
android:orientation="vertical"
>
<include
android:id="@+id/toolbar"
layout="@layout/tool_bar"/>
<FrameLayout
android:id="@+id/frame"
android:layout_width="match_parent"
android:layout_height="match_parent">
</FrameLayout>
</LinearLayout>
<android.support.design.widget.NavigationView
android:id="@+id/navigation_view"
android:layout_height="match_parent"
android:layout_width="wrap_content"
android:layout_gravity="start"
app:headerLayout="@layout/header"
app:menu="@menu/navigation_menu"/>
</android.support.v4.widget.DrawerLayout>
You'll also have to create some Fragments
for each screen you want to display with this NavigationView
. After you've done that, on your Activity
you can handle the selection events by implementing NavigationView.OnNavigationItemSelectedListener
, like this:
public class MainActivity extends AppCompatActivity implements NavigationView.OnNavigationItemSelectedListener {
// Your Activity
@Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
Fragment fragment = null;
switch(menuItem.getItemId()) {
case R.id.drawer_home:
fragment = new YourFragment();
break;
case R.id.drawer_content:
fragment = new AnotherFragment();
break;
case R.id.drawer_about:
fragment = new AboutFragment();
break;
case R.id.drawer_exit:
// TODO - Prompt to exit.
finish();
break;
}
if (fragment == null) {
fragment = new YourFragment();
}
drawerLayout.closeDrawers();
FragmentManager fragmentManager = getSupportFragmentManager();
fragmentManager.beginTransaction()
.replace(R.id.frame, fragment)
.commit();
return true;
}
}
As for your edit, the icons could be represented by an ImageView
. And to navigate between multiple profiles, it depends on how you've implemented that logic on your app, but as a "generic" answer, you could switch those profiles using something like a Spinner
.
Those tutorials will help you through that step:
- Android spinner (drop down list) example
- Android - Spinner
- Basic Spinner example (Stackoverflow question)
- Spinners (Android dev guide)
Once you've set that up on your header, handle the item selection and change the user profile accordingly. (This last part depends ENTIRELY on how you've implemented user profiles on your app). But just as a head start, you could check the android training site, more specifically, this part.
I think this MaterialDrawer is what you're looking for. This library has a lot of examples. You can either use this library directly or read the source code and implement your own drawer.