Intro
This is part three of the Navigation drawer in Android post and it will be a demonstration on how to add drop-down items on a navigation drawer without using ExpandableListView.
The Exercise
We will continue working on the same project that we created for part one and part two of this post. First, in the drawermenu.xml file, we will add a new item called “members”.
|
1 2 3 4 5 |
<item android:id="@+id/members" android:title="Members" android:icon="@drawable/ic_account_box_black_24dp" android:visible="true" /> |
From the previous project, we already know how to add an icon for the item. After this, we will create a new group of items:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<group android:id="@+id/members_group" android:checkableBehavior="single" android:visible="false"> <menu> <item android:id="@+id/memberone" android:title="Member one" /> <item android:id="@+id/membertwo" android:title="Member Two" /> <item android:id="@+id/memberthree" android:title="Member Three" /> </menu> </group> |
If the logout item is not showing after you added this group, put the logout item in its own group like this:
|
1 2 3 4 5 6 7 8 |
<group android:id="@+id/logoutGroup" > <item android:id="@+id/logout" android:icon="@drawable/ic_cancel_black_24dp" android:title="Logout" /> </group> |
This is how the drawermenu.xml file will look like after all that we added in it:
|
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 |
<?xml version="1.0" encoding="utf-8"?> <menu xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto"> <item android:id="@+id/home" android:icon="@drawable/ic_home_black_24dp" android:title="Home" /> <item android:id="@+id/profile" android:icon="@drawable/ic_account_box_black_24dp" android:title="Profile" /> <item android:id="@+id/switchToggleButton" android:icon="@drawable/ic_switch_camera_black_24dp" android:title="Switch" app:actionLayout="@layout/layout_switch"/> <item android:id="@+id/members" android:title="Members" android:icon="@drawable/ic_account_box_black_24dp" android:visible="true" /> <group android:id="@+id/members_group" android:checkableBehavior="single" android:visible="false"> <menu> <item android:id="@+id/memberone" android:title="Member one" /> <item android:id="@+id/membertwo" android:title="Member Two" /> <item android:id="@+id/memberthree" android:title="Member Three" /> </menu> </group> <group android:id="@+id/logoutGroup" > <item android:id="@+id/logout" android:icon="@drawable/ic_cancel_black_24dp" android:title="Logout" /> </group> </menu> |
Now that our drawer menu is ready, we go to the Home activity class, to add the new items. First, we will declare a private boolean named isMembersVisible and initialize it with the value false.
|
1 |
private boolean isMembersVisible = false; |
Then in the setupUI method, we will set the visibility of the members’ group to false.
|
1 |
navigationView.getMenu().setGroupVisible(R.id.members_group, false); |
Next, we add the new items in the switchSreen(int id) method. Here we will use the private boolean variable that we created. We create an if/else statement, so when we click on “Members” from the navigation drawer, first we check if the group is visible (and we know that it is not, because we set its visibility to false in the setupUI method), and we say that if it is not visible, when you click on it, set it to be visible, and also set the value to the boolean variable to true. So now we know that the group is visible and that the boolean value is true, so when we click on it again, it will not enter the if part, it will go in the else part, where we set it to false again, and we also set the boolean value to false also.
|
1 2 3 4 5 6 7 8 9 |
case R.id.members: if (!isMembersVisible) { navigationView.getMenu().setGroupVisible(R.id.members_group, true); isMembersVisible = true; } else { navigationView.getMenu().setGroupVisible(R.id.members_group, false); isMembersVisible = false; } break; |
For the items in the group, we will just add toast messages to test if they are working.
|
1 2 3 4 5 6 7 8 9 |
case R.id.memberone: Toast.makeText(HomeActivity.this, "Member one selected", Toast.LENGTH_SHORT).show(); break; case R.id.membertwo: Toast.makeText(HomeActivity.this, "Member two selected", Toast.LENGTH_SHORT).show(); break; case R.id.memberthree: Toast.makeText(HomeActivity.this, "Member three selected", Toast.LENGTH_SHORT).show(); break; |
This is how the Home Activity class will look like after all that:
|
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 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 |
public class HomeActivity extends AppCompatActivity { private DrawerLayout mDrawerLayout; private ActionBarDrawerToggle mToggle; private boolean isMembersVisible = false; @BindView(R.id.mDrawerLayout) NavigationView navigationView; @BindView(R.id.container) FrameLayout container; @BindView(R.id.toolbar) Toolbar myToolbar; @BindView(R.id.toolbarTitle) TextView toolbarTitle; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_home); ButterKnife.bind(this); setupUi(); } private void setupUi() { mDrawerLayout = findViewById(R.id.drawer); mToggle = new ActionBarDrawerToggle(this, mDrawerLayout, myToolbar, R.string.open, R.string.close); mDrawerLayout.addDrawerListener(mToggle); mDrawerLayout.setClickable(true); setSupportActionBar(myToolbar); setupNavigationView(); mToggle.setDrawerIndicatorEnabled(true); mToggle.syncState(); toolbarTitle.setText("Home"); navigationView.getMenu().setGroupVisible(R.id.members_group, false); } @Override public boolean onOptionsItemSelected(MenuItem item) { navigationView.setCheckedItem(R.id.switchToggleButton); navigationView.getMenu().performIdentifierAction(R.id.switchToggleButton, 0); if (mToggle.onOptionsItemSelected(item)) { return true; } else { return super.onOptionsItemSelected(item); } } private void setupNavigationView() { navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() { @Override public boolean onNavigationItemSelected(@NonNull MenuItem item) { switchScreen(item.getItemId()); return true; } }); } private void switchScreen(int id) { switch (id) { case R.id.home: container.removeAllViews(); startActivity(new Intent(this, HomeActivity.class)); mDrawerLayout.closeDrawers(); break; case R.id.profile: container.removeAllViews(); container.addView(new Profile(this)); toolbarTitle.setText("Profile"); mDrawerLayout.closeDrawers(); break; case R.id.switchToggleButton: MenuItem menuItem = navigationView.getMenu().findItem(R.id.switchToggleButton); // This is the menu item that contains your switch Switch drawerSwitch = (Switch) menuItem.getActionView().findViewById(R.id.drawer_switch); drawerSwitch.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked) { Toast.makeText(HomeActivity.this, "Switch turned on", Toast.LENGTH_SHORT).show(); } else { Toast.makeText(HomeActivity.this, "Switch turned off", Toast.LENGTH_SHORT).show(); } } }); break; case R.id.members: if (!isMembersVisible) { navigationView.getMenu().setGroupVisible(R.id.members_group, true); isMembersVisible = true; } else { navigationView.getMenu().setGroupVisible(R.id.members_group, false); isMembersVisible = false; } break; case R.id.memberone: Toast.makeText(HomeActivity.this, "Member one selected", Toast.LENGTH_SHORT).show(); break; case R.id.membertwo: Toast.makeText(HomeActivity.this, "Member two selected", Toast.LENGTH_SHORT).show(); break; case R.id.memberthree: Toast.makeText(HomeActivity.this, "Member three selected", Toast.LENGTH_SHORT).show(); break; case R.id.logout: finish(); break; } } } |
You can find the whole post here: https://github.com/AleksandarGulevski/NavigationDrawerExercise/tree/masterThree
Happy coding!