How to create a custom navigation drawer in android

Question

Hi I m trying to create a navigation drawer similar to gmail app navigation drawer  I follow the developer site but it only specify about basic implementation  But I need to customize the navigation  according to my specifications     I need to add a header to categorize the list item in Drawer I need a radio button to select some of my options   How can I do this

User · Accepted Answer

The tutorial Android Custom Navigation Drawer (via archive.org) contains a basic and a custom project. The latter shows how to setup a Navigation Drawer as shown in the screenshot:

NavigationDrawerCustom

The source code of the projects (via archive.org) is available for download.

The is also the Navigation Drawer - Live-O project ...

Navigation Drawer - Live-O

The source code of the project is available on GitHub.

The MaterialDrawer library aims to provide the easiest possible implementation of a navigation drawer for your application. It provides a great amount of out of the box customizations and also includes an easy to use header which can be used as AccountSwitcher.

MaterialDrawer library demo

Please note that Android Studio meanwhile has a template project to create a Navigation Drawer Activity as shown in the screenshot.

This repository keeps track of changes being made to the template.

User · Answer

I need to add a header to categorize the list item in Drawer   Customize the listView or use expandableListView     I need a radio button to select some of my options   You can do that without modifying the current implementation of NavigationDrawer  You just need to create a custom adapter for your listView  You can add a parent layout as Drawer then you can do any complex layouts within that as normal

User · Answer

Android Navigation Drawer using Activity I just followed the example  http   antonioleiva com navigation-view   You just need few Customization   public class MainActivity extends AppCompatActivity     public static final String AVATAR URL    http   lorempixel com 200 200 people 1      private DrawerLayout drawerLayout  private View content  private Toolbar toolbar  private NavigationView navigationView  private ActionBarDrawerToggle drawerToggle    Override protected void onCreate Bundle savedInstanceState        super onCreate savedInstanceState       setContentView R layout activity dashboard       toolbar    Toolbar  findViewById R id toolbar       drawerLayout    DrawerLayout  findViewById R id drawer layout       initToolbar        setupDrawerLayout         content   findViewById R id content       drawerToggle   setupDrawerToggle        final ImageView avatar    ImageView  navigationView getHeaderView 0  findViewById R id avatar       Picasso with this  load AVATAR URL  transform new CircleTransform    into avatar         private void initToolbar         final Toolbar toolbar    Toolbar  findViewById R id toolbar       setSupportActionBar toolbar       final ActionBar actionBar   getSupportActionBar         if  actionBar    null            actionBar setHomeAsUpIndicator R drawable ic menu black 24dp           actionBar setDisplayHomeAsUpEnabled true           private ActionBarDrawerToggle setupDrawerToggle         return new ActionBarDrawerToggle this  drawerLayout  toolbar  R string drawer open   R string drawer close          Override protected void onPostCreate Bundle savedInstanceState        super onPostCreate savedInstanceState          Sync the toggle state after onRestoreInstanceState has occurred      drawerToggle syncState        Override public void onConfigurationChanged Configuration newConfig        super onConfigurationChanged newConfig          Pass any configuration change to the drawer toggles     drawerToggle onConfigurationChanged newConfig      private void setupDrawerLayout          drawerLayout    DrawerLayout  findViewById R id drawer layout       navigationView    NavigationView  findViewById R id navigation view        navigationView setNavigationItemSelectedListener new NavigationView OnNavigationItemSelectedListener               Override         public boolean onNavigationItemSelected MenuItem menuItem                 int id   menuItem getItemId               switch  id                    case R id drawer home                      Intent i   new Intent getApplicationContext    MainActivity class                       startActivity i                       finish                        break                  case R id drawer favorite                      Intent j   new Intent getApplicationContext    SecondActivity class                       startActivity j                       finish                        break                           return true                Here is the xml Layout   lt android support v4 widget DrawerLayout android id    id drawer layout  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  android fitsSystemWindows  true  tools context   MainActivity  gt    lt FrameLayout     android id    id content      android layout width  match parent      android layout height  match parent  gt          lt android support design widget AppBarLayout         android id    id appBarLayout          android layout width  match parent          android layout height  wrap content          android theme   style ThemeOverlay AppCompat Dark ActionBar  gt            lt 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 ThemeOverlay AppCompat Light              app layout scrollFlags  scroll enterAlways snap    gt        lt  android support design widget AppBarLayout gt      lt  FrameLayout gt    lt android support design widget NavigationView     android id    id navigation view      android layout width  wrap content      android layout height  match parent      android layout gravity  start      app headerLayout   layout drawer header      app menu   menu drawer   gt      Add drawer xml in menu   lt menu xmlns android  http   schemas android com apk res android  gt    lt group     android checkableBehavior  single  gt        lt item         android id    id drawer home          android checked  true          android icon   drawable ic home black 24dp          android title   string home   gt        lt item         android id    id drawer favourite          android icon   drawable ic favorite black 24dp          android title   string favourite   gt                lt item         android id    id drawer settings          android icon   drawable ic settings black 24dp          android title   string settings   gt    lt  group gt      To open  and close drawer add this values in string xml   lt string name  drawer open  gt Open lt  string gt   lt string name  drawer close  gt Close lt  string gt    drawer xml  enter code here      lt ImageView     android id    id avatar      android layout width  64dp      android layout height  64dp      android layout margin   dimen spacing large      android elevation  4dp      tools src   drawable ic launcher   gt    lt TextView     android layout width  wrap content      android layout height  wrap content      android layout above    id email      android layout marginLeft   dimen spacing large      android layout marginStart   dimen spacing large      android text  Username      android textAppearance   style TextAppearance AppCompat Body2   gt   lt TextView     android id    id email      android layout width  wrap content      android layout height  wrap content      android layout alignParentBottom  true      android layout marginLeft   dimen spacing large      android layout marginStart   dimen spacing large      android layout marginBottom   dimen spacing large      android text  username mymail com      android textAppearance   style TextAppearance AppCompat Body1   gt

User · Answer

You can easily customize the android Navigation drawer once you know how its implemented  here is a nice tutorial where you can set it up   This will be the structure of your mainXML    lt android support v4 widget DrawerLayout     xmlns android  http   schemas android com apk res android      android id    id drawer layout      android layout width  match parent      android layout height  match parent  gt        lt  -- Framelayout to display Fragments -- gt       lt FrameLayout         android id    id frame container          android layout width  match parent          android layout height  match parent    gt        lt  -- Listview to display slider menu -- gt       lt ListView         android id    id list slidermenu          android layout width  240dp          android layout height  match parent          android layout gravity  right          android choiceMode  singleChoice          android divider   color list divider          android dividerHeight  1dp                  android listSelector   drawable list selector          android background   color list background   gt   lt  android support v4 widget DrawerLayout gt    You can customize this listview to your liking by adding the header  And radiobuttons

User · Answer

The easier solution for me was   Considerations    This solution requires autogenerated Navigation Drawer Activity provided by Android Studio  Classes DrawerItem  CustomDrawerAdapter and layout custom drawer item xml were taken from this tutorial    1  Create this class for wrap the custom drawer item   public class DrawerItem      String ItemName    int imgResID     public DrawerItem String itemName  int imgResID            super            ItemName   itemName          this imgResID   imgResID         public String getItemName             return ItemName        public void setItemName String itemName            ItemName   itemName        public int getImgResID             return imgResID        public void setImgResID int imgResID            this imgResID   imgResID          2  Create custom layout  custom drawer item xml  for your drawer items    lt RelativeLayout xmlns android  http   schemas android com apk res android      android layout width  fill parent      android layout height  fill parent   gt    lt LinearLayout     android id    id itemLayout      android layout width  fill parent      android layout height  wrap content      android layout alignParentLeft  true      android orientation  vertical      android layout marginTop  0dp      android background   android attr activatedBackgroundIndicator  gt        lt LinearLayout         android layout width  fill parent          android layout height  wrap content          android minHeight  55dp  gt            lt ImageView             android id    id drawer icon              android layout width  wrap content              android layout height  wrap content   gt            lt TextView             android id    id drawer itemName              android layout width  wrap content              android layout height  wrap content              android textAppearance   android attr textAppearanceLarge   gt       lt  LinearLayout gt        lt View         android layout width  match parent          android layout height  1dp          android layout marginBottom  1dp          android layout marginTop  1dp          android layout marginLeft  10dp          android layout marginRight  10dp          android background   DADADC  gt       lt  View gt   lt  LinearLayout gt   lt  RelativeLayout gt    3  Create your custom adapter   import java util List  import android app Activity  import android content Context  import android view LayoutInflater  import android view View  import android view ViewGroup  import android widget ArrayAdapter  import android widget ImageView  import android widget TextView   public class CustomDrawerAdapter extends ArrayAdapter lt DrawerItem gt     Context context  List lt DrawerItem gt  drawerItemList  int layoutResID   public CustomDrawerAdapter Context context  int layoutResourceID  List lt DrawerItem gt  listItems        super context  layoutResourceID  listItems       this context   context      this drawerItemList   listItems      this layoutResID   layoutResourceID      Override public View getView int position  View convertView  ViewGroup parent           TODO Auto-generated method stub      DrawerItemHolder drawerHolder      View view   convertView       if  view    null            LayoutInflater inflater     Activity  context  getLayoutInflater            drawerHolder   new DrawerItemHolder             view   inflater inflate layoutResID  parent  false           drawerHolder ItemName    TextView view findViewById R id drawer itemName           drawerHolder icon    ImageView  view findViewById R id drawer icon            view setTag drawerHolder          else           drawerHolder    DrawerItemHolder  view getTag               DrawerItem dItem    DrawerItem  this drawerItemList get position        drawerHolder icon setImageDrawable view getResources   getDrawable              dItem getImgResID          drawerHolder ItemName setText dItem getItemName          return view     private static class DrawerItemHolder       TextView ItemName      ImageView icon        4  In autogenerated NavigationDrawerFragment class onCreateView method  replace the autogenerated adapter for this   ArrayList lt DrawerItem gt  dataList   new ArrayList lt DrawerItem gt     dataList add new DrawerItem getString R string title section1   R drawable ic action 1    dataList add new DrawerItem getString R string title section2   R drawable ic action 2    dataList add new DrawerItem getString R string title section3   R drawable ic action 3     mDrawerListView setAdapter new CustomDrawerAdapter          getActivity            R layout custom drawer item          dataList      Remember replace R string title sectionN and R drawable ic action N for your own resources

User · Answer

I used below layout and able to achieve custom layout in Navigation View    lt android support design widget NavigationView         android id    id navi view          android layout width  wrap content          android layout height  match parent          android layout gravity  start top          android background   color navigation view bg color          app theme   style NavDrawerTextStyle  gt            lt LinearLayout             android layout width  match parent              android layout height  match parent              android orientation  vertical  gt                lt include layout   layout drawer header    gt                lt include layout   layout navigation drawer menu    gt           lt  LinearLayout gt   lt  android support design widget NavigationView gt

[android] How to create a custom navigation drawer in android

Examples related to android

Examples related to android-listview

Examples related to navigation-drawer