Navigation drawer in Android part 3: А simple way to add drop-down items on a navigation drawer with

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”.

<item android:id="@+id/members" android:title="Members" android:icon="@drawable/ic_account_box_black_24dp" android:visible="true" />

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:

<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>

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:

<group android:id="@+id/logoutGroup" > <item android:id="@+id/logout" android:icon="@drawable/ic_cancel_black_24dp" android:title="Logout" /> </group>

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:

<?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>

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.

private boolean isMembersVisible = false;

1

private boolean isMembersVisible = false;

Then in the setupUI method, we will set the visibility of the members’ group to false.

navigationView.getMenu().setGroupVisible(R.id.members_group, 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.

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;

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.

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;

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:

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; } } }

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!

#androidstudio #tutorial #navigationdrawer #beginner #basic #android