How to open sub menu after click on menu-item in Navigation drawer?

Question

I implemented a navigation drawer, with navigation view. and i am adding value in navigation view through a menu.xml file.

<android.support.design.widget.NavigationView
android:id="@+id/nvView"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
app:itemTextColor="@android:color/white"
android:background="?attr/colorAccent"
app:menu="@menu/drawer_view"
app:headerLayout="@layout/nav_header"
>
</android.support.design.widget.NavigationView>

every thing is working fine, but i am facing a problem, I want to display submenu's , after click on menu.

I tried many thing's like:-

I add submenu in menu.xml, inside item. somthing like this..

<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="single">

<item
    android:id="@+id/nav_ChangeOutlet_fragment"
    android:icon="@drawable/home_icon"
    android:title="@string/changeOutlet"
    android:checked="true">
    <menu>
        <group>
            <item
                android:title="one"></item>
            <item
                android:title="two"></item>
            <item
                android:title="three"></item>

        </group>
    </menu>

then it return me output like this.

Output: click on this link to see output

https://drive.google.com/file/d/0B0B9-WZYydK7RG1yY0tRdkhOSW8/view?usp=sharing

Now problem is that, in this way i am not able to click on menu , only sub menu are clickable here.

I want here to show sub menu , only after click on menu, otherwise sub menu does shown to other or say it is in invisible state

Solution 1

You can create it using a ExpandableListview.

look at this

Solution 2

The best solution is to have an expandable list view in navigation view.See the code below activity_navigation_view.xml

     <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_height="match_parent"
        android:layout_width="match_parent"
        android:fitsSystemWindows="true">    
    <include layout="@layout/navigation_view_fragment_container"/>
    <android.support.design.widget.NavigationView
        android:id="@+id/nav_view"
        android:layout_height="match_parent"
        android:layout_width="wrap_content"
        android:layout_gravity="start"
        android:fitsSystemWindows="true"
        app:headerLayout="@layout/navigation_view_header">
    <ExpandableListView
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:background="@android:color/white"
        android:layout_marginTop="192dp"
        android:id="@+id/navigationmenu">
   </ExpandableListView>
   </android.support.design.widget.NavigationView>
   </android.support.v4.widget.DrawerLayout>

The layout navigation header is as below navigation_view_header.xml

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
       android:layout_width="match_parent"
       android:layout_height="192dp"
       android:background="#ff5722"
       android:padding="16dp"
       android:theme="@style/ThemeOverlay.AppCompat.Dark"
       android:orientation="vertical"
       android:gravity="bottom">
  <TextView
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:text="Username"
      android:textAppearance="@style/TextAppearance.AppCompat.Body1"/>
  </LinearLayout>

In your navigation view activity, set the adapter for the expandable list view. NavigationViewActivity.java

  public class NavigationViewActivity extends AppCompatActivity {
        private DrawerLayout mDrawerLayout;
        ExpandableListAdapter mMenuAdapter;
        ExpandableListView expandableList;
        List<ExpandedMenuModel> listDataHeader;
        HashMap<ExpandedMenuModel, List<String>> listDataChild;

   @Override
   protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_navigation_view);
    final ActionBar ab = getSupportActionBar();
    /* to set the menu icon image*/
    ab.setHomeAsUpIndicator(R.drawable.ic_menu);
    ab.setDisplayHomeAsUpEnabled(true);
    mDrawerLayout = (DrawerLayout) findViewById(R.id.drawer_layout);
    expandableList= (ExpandableListView) findViewById(R.id.navigationmenu);
    NavigationView navigationView = (NavigationView)    findViewById(R.id.nav_view);

    if (navigationView != null) {
        setupDrawerContent(navigationView);
    }

    prepareListData();
    mMenuAdapter = new ExpandableListAdapter(this, listDataHeader,   listDataChild, expandableList);

    // setting list adapter
    expandableList.setAdapter(mMenuAdapter);
   }

    private void prepareListData() {
    listDataHeader = new ArrayList<String>();
    listDataChild = new HashMap<String, List<String>>();

    // Adding data header
    listDataHeader.add("heading1");
    listDataHeader.add("heading2");
    listDataHeader.add("heading3");

    // Adding child data
    List<String> heading1= new ArrayList<String>();
    heading1.add("Submenu of item 1");


    List<String> heading2= new ArrayList<String>();
    heading2.add("Submenu of item 2");
    heading2.add("Submenu of item 2");
    heading2.add("Submenu of item 2");


    listDataChild.put(listDataHeader.get(0), heading1);// Header, Child data
    listDataChild.put(listDataHeader.get(1), heading2);

   }
@Override
public boolean onCreateOptionsMenu(Menu menu) {
    getMenuInflater().inflate(R.menu.menu, menu);
    return true;
}

@Override
public boolean onOptionsItemSelected(MenuItem item) {
    switch (item.getItemId()) {
        case android.R.id.home:
            mDrawerLayout.openDrawer(GravityCompat.START);
            return true;
    }
    return super.onOptionsItemSelected(item);
}



private void setupDrawerContent(NavigationView navigationView) {
    navigationView.setNavigationItemSelectedListener(
            new NavigationView.OnNavigationItemSelectedListener() {
                @Override
                public boolean onNavigationItemSelected(MenuItem menuItem) {
                    menuItem.setChecked(true);
                    mDrawerLayout.closeDrawers();
                    return true;
                }
            });
}


@Override
public void onFragmentInteraction(Boolean isDataSaved) {

}
}

The adapter for expandable list view is as follows

   public class ExpandableListAdapter extends BaseExpandableListAdapter {
       private Context mContext;
       private List<String> mListDataHeader; // header titles

       // child data in format of header title, child title
       private HashMap<String, List<String>> mListDataChild;
       ExpandableListView  expandList;
   public ExpandableListAdapter(Context context, List<String> listDataHeader,HashMap<String, List<String>> listChildData,ExpandableListView mView) 
       {
         this.mContext = context;
         this.mListDataHeader = listDataHeader;
         this.mListDataChild = listChildData;
         this.expandList=mView;
       }

    @Override
     public int getGroupCount() {
       int i= mListDataHeader.size();
       Log.d("GROUPCOUNT",String.valueOf(i));
       return this.mListDataHeader.size();
      }

    @Override
     public int getChildrenCount(int groupPosition) {
     int childCount=0;
     if(groupPosition!=2) 
       {
 childCount=this.mListDataChild.get(this.mListDataHeader.get(groupPosition))
                .size();
       }
      return childCount;
       }

     @Override
      public Object getGroup(int groupPosition) {

      return this.mListDataHeader.get(groupPosition);
     }

    @Override
     public Object getChild(int groupPosition, int childPosition) {
   Log.d("CHILD",mListDataChild.get(this.mListDataHeader.get(groupPosition))
            .get(childPosition).toString());
    return this.mListDataChild.get(this.mListDataHeader.get(groupPosition))
            .get(childPosition);
    }

   @Override
      public long getGroupId(int groupPosition) {
       return groupPosition;
    }

   @Override
       public long getChildId(int groupPosition, int childPosition) {
        return childPosition;
    }

   @Override
        public boolean hasStableIds() {
        return false;
     }

    @Override
     public View getGroupView(int groupPosition, boolean isExpanded, View   convertView, ViewGroup parent) {
       ExpandedMenuModel headerTitle = (ExpandedMenuModel) getGroup(groupPosition);
        if (convertView == null) {
        LayoutInflater infalInflater = (LayoutInflater) this.mContext
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = infalInflater.inflate(R.layout.listheader, null);
      }
       TextView lblListHeader = (TextView) convertView
            .findViewById(R.id.submenu);
       ImageView headerIcon=    (ImageView)convertView.findViewById(R.id.iconimage);
         lblListHeader.setTypeface(null, Typeface.BOLD);
         lblListHeader.setText(headerTitle.getIconName());
         headerIcon.setImageDrawable(headerTitle.getIconImg());
         return convertView;
     }

       @Override
        public View getChildView(int groupPosition, int childPosition,  boolean isLastChild, View convertView, ViewGroup parent) {
          final String childText = (String) getChild(groupPosition, childPosition);

         if (convertView == null) {
        LayoutInflater infalInflater = (LayoutInflater) this.mContext
                .getSystemService(Context.LAYOUT_INFLATER_SERVICE);
        convertView = infalInflater.inflate(R.layout.list_submenu, null);
        }

      TextView txtListChild = (TextView) convertView
            .findViewById(R.id.submenu);

      txtListChild.setText(childText);

      return convertView;
       }

      @Override
       public boolean isChildSelectable(int groupPosition, int childPosition) {
       return true;
          }

      }

list_submenu.xml is as follows

    <?xml version="1.0" encoding="utf-8"?>
     <LinearLayout   xmlns:android="http://schemas.android.com/apk/res/android"
      android:orientation="vertical" android:layout_width="match_parent"
      android:layout_height="match_parent">
   <TextView
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:padding="10dp"
      android:textColor="#000000"
      android:layout_marginLeft="20dp"
      android:textSize="18sp"
      android:id="@+id/submenu"/>
  </LinearLayout>

listheader.xml is as follows

    <?xml version="1.0" encoding="utf-8"?>
 <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="2dp"
     android:orientation="vertical"
     xmlns:android="http://schemas.android.com/apk/res/android" >

 <LinearLayout
     android:layout_width="match_parent"
     android:layout_height="match_parent">
<ImageView
    android:layout_width="50dp"
    android:layout_height="50dp"
    android:paddingBottom="10dp"
    android:paddingLeft="10dp"
    android:paddingTop="10dp"
    android:id="@+id/iconimage"/>
<TextView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:padding="10dp"
    android:textColor="#000000"
    android:textSize="20sp"
    android:id="@+id/submenu"/>
</LinearLayout>

</LinearLayout>

I have posted whole code for clarity. Hope this helps.......

Solution 3

I prefer you should go with custom layout in side navigation drawer.

Here is sample link - how to implement custom layout in navigation drawer.

You also need to implement expandable listview in side navigation drawer for your scenario, here is sample of expandable list view.

You need to combine both things to achive navigation drawer with expandable list.

Comments

[Prashanth Debbadwar]

thanks you have posted all the code. It would be helpful if you can post ExpandedMenuModel class too

[MaHDi]

this answer is copied from stackoverflow.com/a/32664433/6617280 the one above is not complete and misses some classes like ExpandedMenuModel, and even in activity it has conflicts when building adapter because list is defined as List<ExpandedMenuModel> listDataHeader; but used as listDataHeader = new ArrayList<String>(); .