What is Navigation Drawer in Android ?
Navigation drawer is a sliding menu and it’s an important UI component. Navigation Menu appears on the android screen with a hamburger menu icon in the ActionBar.
Navigation drawer is used to Drawer Layout in xml layout file. It is not visible by default you needs to opened sliding from left or clicking its icon in the ActionBar.
Navigation Drawer is an overlay panel. it is a replacement of an activity screen and it was specifically dedicated to show all the options and links in the application.
Navigation drawer is declared menus and this menu when you click menu to open fragments or activity to android screen and it is automatically close navigation drawer.
It is mostly used to header view below the menu section item. you can create custom navigation drawer in android.
Example of Navigation Drawer in Android
you can declared dependency in app level build.gradle File.
|
1 2 |
implementation 'com.android.support:appcompat-v7:28.0.0' implementation 'com.android.support:design:28.0.0' |
Create activity_main.xml File Follow this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
<?xml version="1.0" encoding="utf-8"?> <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_layout" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.bhaumik.MainActivity"> <LinearLayout android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include android:layout_height="wrap_content" android:layout_width="match_parent" layout="@layout/toolbar_layout" /> <FrameLayout android:layout_width="match_parent" android:layout_height="match_parent" android:id="@+id/fragment_container" /> </LinearLayout> <android.support.design.widget.NavigationView android:layout_width="match_parent" android:layout_height="wrap_content" android:id="@+id/navigation_view" android:layout_gravity="start" app:menu="@menu/drawer_menu" app:headerLayout="@layout/header_layout" ></android.support.design.widget.NavigationView> </android.support.v4.widget.DrawerLayout> |
Create toolbar_layout.xml layout XML File Follow this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?xml version="1.0" encoding="utf-8"?> <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="?attr/colorPrimaryDark" android:minHeight="?attr/actionBarSize" android:fitsSystemWindows="true" app:theme="@style/Base.ThemeOverlay.AppCompat.Dark.ActionBar" android:id="@+id/toolbar"> </android.support.v7.widget.Toolbar> |
Create header_layout.xml File Follow this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 |
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="180dp" android:background="@color/DarkGrays"> <ImageView android:layout_width="130dp" android:layout_height="80dp" android:layout_marginTop="20dp" android:src="@drawable/chrome" android:layout_centerHorizontal="true" android:id="@+id/iv_img" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_below="@+id/iv_img" android:textSize="22dp" android:text="Bhaumik Mevada" android:textColor="#FFF" android:layout_marginTop="10dp" android:layout_centerInParent="true" /> </RelativeLayout> |
Create fragment_home.xml File Follow this Code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.bhaumik.HomeFragment"> <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="Home Fragment" android:textSize="30dp" android:gravity="center" android:id="@+id/tv_shows"/> <Button android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Home Fragments" android:textAllCaps="false" /> </FrameLayout> |
Create Fragment fragment_message.xml File Follow this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.bhaumik.navigationdrawerdemo.MessageFragment"> <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:text="Message Fragment" android:textSize="30dp" android:gravity="center"/> </FrameLayout> |
Create fragment_setting.xml File Follow this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.example.bhaumik.SettingFragment"> <!-- TODO: Update blank fragment layout --> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:textSize="30dp" android:gravity="center" android:text="@string/hello_blank_fragment" /> </FrameLayout> |
Create Menu file From res/menu directory drawer_menu.xml File Follow this Code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
<?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/menu_home" android:title="Home" android:icon="@drawable/ic_home"></item> <item android:id="@+id/menu_message" android:title="Message" android:icon="@drawable/ic_message" ></item> <item android:id="@+id/menu_setting" android:title="Setting" android:icon="@drawable/ic_settings"></item> </group> <item android:title="Social"> <menu> <item android:id="@+id/menu_addGroup" android:title="Add to Group" android:icon="@drawable/ic_person"></item> <item android:id="@+id/menu_share" android:title="Share" android:icon="@drawable/ic_share"></item> </menu> </item> </menu> |
Add String Resource in res/values/strings.xml File.
|
1 2 3 |
<string name="open_drawer">Open Drawer</string> <string name="close_drawer">Close Drawer</string> |
Create MainActivity.java File Follow this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 |
package com.example.bhaumik; import android.support.annotation.Nullable; import android.support.design.widget.NavigationView; import android.support.v4.widget.DrawerLayout; import android.support.v7.app.ActionBarDrawerToggle; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.support.v7.widget.Toolbar; import android.view.MenuItem; public class MainActivity extends AppCompatActivity { Toolbar toolbar; DrawerLayout drawerLayout; ActionBarDrawerToggle actionBarDrawerToggle; NavigationView navigationView; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); drawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout); actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.open_drawer, R.string.close_drawer); drawerLayout.setDrawerListener(actionBarDrawerToggle); navigationView = (NavigationView) findViewById(R.id.navigation_view); navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(MenuItem item) { switch (item.getItemId()) { case R.id.menu_home : getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,new HomeFragment(),"tags").commit(); drawerLayout.closeDrawers(); break; case R.id.menu_message : getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,new MessageFragment(),"tag1").commit(); drawerLayout.closeDrawers(); break; case R.id.menu_setting : getSupportFragmentManager().beginTransaction().replace(R.id.fragment_container,new SettingFragment(),"tag2").commit(); drawerLayout.closeDrawers(); break; } return true; } }); } @Override protected void onPostCreate(@Nullable Bundle savedInstanceState) { super.onPostCreate(savedInstanceState); actionBarDrawerToggle.syncState(); } } |
Create HomeFragment.java File Follow this code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
package com.example.bhaumik; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * A simple {@link Fragment} subclass. */ public class HomeFragment extends Fragment { public HomeFragment() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_home, container, false); } } |
Create MessageFragment.java File Follow this Code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
package com.example.bhaumik; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * A simple {@link Fragment} subclass. */ public class MessageFragment extends Fragment { public MessageFragment() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_message, container, false); } } |
Create SettingFragment.java File Follow this Code.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
package com.example.bhaumik; import android.os.Bundle; import android.support.v4.app.Fragment; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; /** * A simple {@link Fragment} subclass. */ public class SettingFragment extends Fragment { public SettingFragment() { // Required empty public constructor } @Override public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) { // Inflate the layout for this fragment return inflater.inflate(R.layout.fragment_setting, container, false); } } |
In this Tutorial to Create Simple Navigation Drawer. In this example used to drawer layout in MainActivity xml file and create custom toolbar and this toolbar used to drawer layout file to include tag.
Create custom header layout file used to navigation define header and create three fragments and create drawer menu xml file. in this file used to drawer display menu item when you can click on menu item to open fragment in right side screen and close automatically drawer.
Now in this drawer is custom header to define your name and other view you can design in customization.