Develop Reference

How is Android Studio Navigation Drawer navigating different Fragments?

I've been trying to figure out how the default Navigation Drawer Activity template came with Android Studio navigates between different fragments. I understand that this menu is an implementation using AndroidX navigation component and navigation graph, but I just cannot understand how each menu item is mapped to its corresponding fragment. I don't see any listener or onNavigationItemSelected() etc. Can someone explain how the mapping between menuItem and corresponding fragment was achieved?
MainActivity.java:
public class MainActivity extends AppCompatActivity {
private AppBarConfiguration mAppBarConfiguration;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
FloatingActionButton fab = findViewById(R.id.fab);
DrawerLayout drawer = findViewById(R.id.drawer_layout);
NavigationView navigationView = findViewById(R.id.nav_view);
// Passing each menu ID as a set of Ids because each
// menu should be considered as top level destinations.
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
mAppBarConfiguration = new AppBarConfiguration.Builder(
navController.getGraph())
.setDrawerLayout(drawer)
.build();
NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);
NavigationUI.setupWithNavController(navigationView, navController);
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.main, menu);
return true;
}
#Override
public boolean onSupportNavigateUp() {
NavController navController = Navigation.findNavController(this, R.id.nav_host_fragment);
return NavigationUI.navigateUp(navController, mAppBarConfiguration)
|| super.onSupportNavigateUp();
}
}
menu.xml:
<?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/nav_home"
android:icon="#drawable/ic_menu_camera"
android:title="#string/menu_home" />
<item
android:id="#+id/nav_gallery"
android:icon="#drawable/ic_menu_gallery"
android:title="#string/menu_gallery" />
<item
android:id="#+id/nav_slideshow"
android:icon="#drawable/ic_menu_slideshow"
android:title="#string/menu_slideshow" />
</group>
</menu>
nav_graph.xml
<?xml version="1.0" encoding="utf-8"?>
<navigation 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:id="#+id/mobile_navigation"
app:startDestination="#+id/nav_home">
<fragment
android:id="#+id/nav_home"
android:name="com.buzzz.myapplication.ui.home.HomeFragment"
android:label="#string/menu_home"
tools:layout="#layout/fragment_home">
<action
android:id="#+id/action_HomeFragment_to_HomeSecondFragment"
app:destination="#id/nav_home_second" />
</fragment>
<fragment
android:id="#+id/nav_home_second"
android:name="com.buzzz.myapplication.ui.home.HomeSecondFragment"
android:label="#string/home_second"
tools:layout="#layout/fragment_home_second">
<action
android:id="#+id/action_HomeSecondFragment_to_HomeFragment"
app:destination="#id/nav_home" />
<argument
android:name="myArg"
app:argType="string" />
</fragment>
<fragment
android:id="#+id/nav_gallery"
android:name="com.buzzz.myapplication.ui.gallery.GalleryFragment"
android:label="#string/menu_gallery"
tools:layout="#layout/fragment_gallery" />
<fragment
android:id="#+id/nav_slideshow"
android:name="com.buzzz.myapplication.ui.slideshow.SlideshowFragment"
android:label="#string/menu_slideshow"
tools:layout="#layout/fragment_slideshow" />
</navigation>
Thank you very much.

As per the Update UI components with NavigationUI documentation, the setupWithNavController() methods hook up UI elements (such as your NavigationView) with the NavController.
Looking at the setupWithNavController() Javadoc:
Sets up a NavigationView for use with a NavController. This will call onNavDestinationSelected when a menu item is selected. The selected item in the NavigationView will automatically be updated when the destination changes.
So internally, this is setting up the appropriate listeners - both on the NavigationView to handle menu selections and on the NavController to update the selected item when the current destination changes.
Looking at the onNavDestinationSelected() Javadoc, it becomes clear how the menu items and navigation graph destinations are matched:
Importantly, it assumes the menu item id matches a valid action id or destination id to be navigated to.
So clicking on a menu item with android:id="#+id/nav_home" will navigate to the destination with android:id="#+id/nav_home".

Navigation Drawer item click

I have DrawerLayout and NavigationView. There are two fragments which are changed when I click on item in navigation drawer and that works well:
<fragment
android:id="#+id/nav_settings"
android:label="#string/menu_settings"
tools:layout="#layout/fragment_settings" />
<fragment
android:id="#+id/nav_themes"
android:label="#string/menu_themes"
tools:layout="#layout/fragment_themes" />
The problem is that I have several other items in the drawer menu that are not Fragments and I can not make them clickable:
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group
android:id="#+id/group_1"
android:checkableBehavior="single">
<item
android:id="#+id/nav_settings"
android:icon="#drawable/ic_keyboard_settings"
android:title="#string/menu_settings" />
<item
android:id="#+id/nav_themes"
android:icon="#drawable/ic_theme"
android:title="#string/menu_themes" />
</group>
<group android:id="#+id/group_2">
<item
android:id="#+id/nav_developer_page"
android:icon="#drawable/ic_developer_page"
android:title="#string/menu_developer_page" />
<item
android:id="#+id/nav_privacy_policy"
android:icon="#drawable/ic_privacy_policy"
android:title="#string/menu_privacy_policy" />
</group>
</menu>
Here is the code:
setSupportActionBar(toolbar)
toggle = object : ActionBarDrawerToggle(this, drawer_layout, toolbar, 0, 0) {
override fun onDrawerClosed(drawerView: View) {
super.onDrawerClosed(drawerView)
syncState()
}
override fun onDrawerOpened(drawerView: View) {
super.onDrawerOpened(drawerView)
syncState()
}
}
toggle.syncState()
drawer_layout.addDrawerListener(toggle)
val navController = findNavController(R.id.nav_host_fragment)
appBarConfiguration = AppBarConfiguration(setOf(
R.id.nav_settings, R.id.nav_themes, R.id.nav_developer_page), drawer_layout)
nav_view.setupWithNavController(navController)
toggle.syncState()
When I set NavigationItemSelectedListener it breaks navigation for Fragments.
How can I make those two items clickable and call a function?

The solution is to get the menu item from the navigation view and set a click listener:
val signoutMenuItem = binding.nvNavigationDrawerNavigationView.menu.findItem(id.navigation_drawer_menu_sign_out)
signoutMenuItem.setOnMenuItemClickListener {
navigationDrawerMainActivityViewModel.signOut()
true
}
and do not include non-fragment items in AppBarConfiguration:
appBarConfiguration = AppBarConfiguration(
setOf(
id.drawerFragmentX,
id.drawerFragmentY,
//id.navigation_drawer_menu_sign_out <- Do NOT include
), drawerLayout
)
setupActionBarWithNavController(navController, appBarConfiguration)
navView.setupWithNavController(navController)
This solution is identical to https://stackoverflow.com/a/59451345/5189200.
Xavi

DropDown menu in Nav Bar android

I am busy trying to create a dropdown menu from the default navigation bar option that i used in android studio. I have read many places that you need to use expandable List view but i am not sure how to implement it because i am use to coding. So here is my menudrawer.xml
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
tools:showIn="navigation_view">
<group android:checkableBehavior="single">
<item
android:id="#+id/nav_add"
android:icon="#drawable/ic_playlist_add_black_24dp"
android:title="Add Products" />
<item
android:id="#+id/nav_up"
android:icon="#drawable/ic_create_black_24dp"
android:title="Update or delete Products" />
<item
android:id="#+id/nav_cus"
android:icon="#drawable/ic_local_library_black_24dp"
android:title="Customers" />
<item android:id="#+id/calc"
android:icon="#drawable/baseline_tablet_black_18dp"
android:title="Calculator"/>
--This part under the title Calculator i want a drop down which has different calculator options
</group>
<item android:title="Other Functions">
<menu>
<item
android:id="#+id/nav_send"
android:icon="#drawable/ic_menu_send"
android:title="Logout" />
</menu>
</item>
</menu>
And here is my main.xml
<?xml version="1.0" encoding="utf-8"?>
<android.support.v4.widget.DrawerLayout 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:id="#+id/drawer_layout"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:fitsSystemWindows="true"
android:background="#drawable/background"
tools:openDrawer="start">
<include
layout="#layout/app_bar_emily"
android:layout_width="match_parent"
android:layout_height="match_parent"
/>
<android.support.design.widget.NavigationView
android:id="#+id/nav_view"
android:layout_width="wrap_content"
android:layout_height="match_parent"
android:layout_gravity="start"
android:fitsSystemWindows="true"
app:headerLayout="#layout/nav_header_emily"
app:menu="#menu/activity_emily_drawer" />
</android.support.v4.widget.DrawerLayout>
and here is my .java file:
#SuppressWarnings("StatementWithEmptyBody")
#Override
public boolean onNavigationItemSelected(MenuItem item) {
// Handle navigation view item clicks here.
int id = item.getItemId();
if (id == R.id.nav_add) {
Intent i = new Intent(this,Products.class);
startActivity(i);
// Handle the camera action
} else if (id == R.id.nav_send) {
Intent jj = new Intent(this,login.class);
startActivity(jj);
}
else if (id == R.id.nav_up) {
Intent jj = new Intent(this,updelProducts.class);
startActivity(jj);
}
else if (id == R.id.nav_cus) {
Intent z = new Intent(this,Customer.class);
startActivity(z);
}
else if (id == R.id.calc) {
Intent jj = new Intent(this, Calc_140_plain.class);
startActivity(jj);
}
DrawerLayout drawer = (DrawerLayout) findViewById(R.id.drawer_layout);
drawer.closeDrawer(GravityCompat.START);
return true;
}
Now i would like to add a drop down menu under the calculator tab where i have different calculators that the takes the user to an appropriate page

If I understood you correctly, you want to show different items inside your menu item. You can do this easily by using <menu> inside the <item>.
<menu 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"
tools:context=".MainActivity">
<item
android:id="#+id/firstOne"
android:orderInCategory="1"
android:title="First One"
app:showAsAction="ifRoom">
<menu>
<item
android:id="#+id/menuSortNewest"
android:title="1-1" />
<item
android:id="#+id/menuSortRating"
android:title="1-2" />
</menu>
</item>
<item
android:id="#+id/action_refresh"
android:orderInCategory="2"
android:title="Second One"
app:showAsAction="ifRoom"/>
</menu>
For example, the code above will show two different items called First One and Second One. When you click the First One, you will see two different options called 1-1 and 1-2. I hope, this helps.
Have a beautiful day!

getActionView() of Item Drawer return null

I have problem with item drawer. I want to get view of item drawer, but it's return null.
this is my menu :
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:checkableBehavior="none">
<item
android:id="#+id/nav_biodata"
android:icon="#drawable/ic_menu_camera"
android:title="Biodata" />
<item
android:id="#+id/nav_kantor_dinas"
android:icon="#drawable/ic_menu_gallery"
android:title="Kantor Dinas" />
<item
android:id="#+id/nav_aktivitas"
android:icon="#drawable/ic_menu_manage"
android:title="Aktivitas" />
<item
android:id="#+id/nav_logout"
android:icon="#drawable/ic_menu_share"
android:title="Logout" />
</group>
</menu>
and this is try getview :
navigationView = (NavigationView) findViewById(R.id.nav_view);
Menu item = navigationView.getMenu();
MenuItem biodata = item.getItem(0);
v_biodata = biodata.getActionView();
v_biodata is null. So how to fix it ? thanks... sorri for my English.

You can get the views of navigation drawer items using this snippet.
NavigationView navigationView = (NavigationView) mDrawerLayout.findViewById(R.id.navigation_view);
View view = navigationView.getTouchables().get(3); //Pass index to get function to get your desired item view.

Android Design Support Library Secondary Drawer Menu

I've switched to the official Google Design Support Library. Now, I want to use a secondary menu with a divider like this:
But as Android is using the Menu Inflater I have no idea what to do now. I can add a second group, but then the items have the same size and there is no divider.
drawer.xml:
<?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/overview"
android:checked="true"
android:icon="#drawable/ic_action_dashboard"
android:title="#string/drawer_overview" />
<item
android:id="#+id/social_evening"
android:checked="false"
android:icon="#drawable/ic_action_brightness_3"
android:title="#string/drawer_social_evening" />
<item
android:id="#+id/scouting_games"
android:checked="false"
android:icon="#drawable/ic_action_landscape"
android:title="#string/drawer_scouting_games" />
<item
android:id="#+id/olympics"
android:checked="false"
android:icon="#drawable/ic_action_stars"
android:title="#string/drawer_olympics" />
<item
android:id="#+id/quizzes"
android:checked="false"
android:icon="#drawable/ic_action_school"
android:title="#string/drawer_quizzes" />
</group>
</menu>
MainActivity.java:
package net.sutomaji.freizeitspiele;
import android.os.Bundle;
import android.support.design.widget.NavigationView;
import android.support.v4.app.FragmentTransaction;
import android.support.v4.widget.DrawerLayout;
import android.support.v7.app.ActionBarDrawerToggle;
import android.support.v7.app.AppCompatActivity;
import android.support.v7.widget.Toolbar;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.widget.Toast;
/**
* Created by Tom Schneider on 18.06.15
*/
public class MainActivity extends AppCompatActivity {
//Defining Variables
private Toolbar toolbar;
private NavigationView navigationView;
private DrawerLayout drawerLayout;
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
// Initializing Toolbar and setting it as the actionbar
toolbar = (Toolbar) findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
//Initializing NavigationView
navigationView = (NavigationView) findViewById(R.id.navigation_view);
//Setting Navigation View Item Selected Listener to handle the item click of the navigation menu
navigationView.setNavigationItemSelectedListener(new NavigationView.OnNavigationItemSelectedListener() {
// This method will trigger on item Click of navigation menu
#Override
public boolean onNavigationItemSelected(MenuItem menuItem) {
//Checking if the item is in checked state or not, if not make it in checked state
if(menuItem.isChecked()) menuItem.setChecked(false);
else menuItem.setChecked(true);Q
//Closing drawer on item click
drawerLayout.closeDrawers();
//Check to see which item was being clicked and perform appropriate action
switch (menuItem.getItemId()){
//Replacing the main content with ContentFragment Which is our Inbox View;
case R.id.overview:
Toast.makeText(getApplicationContext(), "Overview Selected", Toast.LENGTH_SHORT).show();
ContentFragment fragment = new ContentFragment();
FragmentTransaction fragmentTransaction = getSupportFragmentManager().beginTransaction();
fragmentTransaction.replace(R.id.frame,fragment);
fragmentTransaction.commit();
return true;
// For rest of the options we just show a toast on click
case R.id.social_evening:
Toast.makeText(getApplicationContext(),"SE Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.scouting_games:
Toast.makeText(getApplicationContext(),"SG Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.olympics:
Toast.makeText(getApplicationContext(),"OL Selected",Toast.LENGTH_SHORT).show();
return true;
case R.id.quizzes:
Toast.makeText(getApplicationContext(),"QZ Selected",Toast.LENGTH_SHORT).show();
return true;
default:
Toast.makeText(getApplicationContext(),"Somethings Wrong",Toast.LENGTH_SHORT).show();
return true;
}
}
});
// Initializing Drawer Layout and ActionBarToggle
drawerLayout = (DrawerLayout) findViewById(R.id.drawer);
ActionBarDrawerToggle actionBarDrawerToggle = new ActionBarDrawerToggle(this,drawerLayout,toolbar,R.string.openDrawer, R.string.closeDrawer){
#Override
public void onDrawerClosed(View drawerView) {
// Code here will be triggered once the drawer closes as we dont want anything to happen so we leave this blank
super.onDrawerClosed(drawerView);
}
#Override
public void onDrawerOpened(View drawerView) {
// Code here will be triggered once the drawer open as we dont want anything to happen so we leave this blank
super.onDrawerOpened(drawerView);
}
};
//Setting the actionbarToggle to drawer layout
drawerLayout.setDrawerListener(actionBarDrawerToggle);
//calling sync state is necessay or else your hamburger icon wont show up
actionBarDrawerToggle.syncState();
}
#Override
public boolean onCreateOptionsMenu(Menu menu) {
// Inflate the menu; this adds items to the action bar if it is present.
getMenuInflater().inflate(R.menu.menu_main, menu);
return true;
}
#Override
public boolean onOptionsItemSelected(MenuItem item) {
// Handle action bar item clicks here. The action bar will
// automatically handle clicks on the Home/Up button, so long
// as you specify a parent activity in AndroidManifest.xml.
int id = item.getItemId();
//noinspection SimplifiableIfStatement
if (id == R.id.action_settings) {
return true;
}
return super.onOptionsItemSelected(item);
}
}
So, how can I create a menu like this, or how can I add dividers (with category headers) to my navigation drawer?

You can use the standard NavigationView defining a menu like this:
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<group android:id="#+id/group1" android:checkableBehavior="single" id>
//items of group1
</group>
<group android:id="#+id/group2" android:checkableBehavior="single" id>
//items of group2
</group>
It is important to give an unique id to each group.

Tutorial: Navigation View Design Support Library
Menu Items:
<?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/navigation_item_attachment"
android:checked="true"
android:icon="#drawable/ic_attachment"
android:title="#string/nav_item_attachment" />
<item
android:id="#+id/navigation_item_images"
android:icon="#drawable/ic_image"
android:title="#string/nav_item_images" />
<item
android:id="#+id/navigation_item_location"
android:icon="#drawable/ic_place"
android:title="#string/nav_item_location" />
</group>
<item android:title="#string/nav_sub_menu">
<menu>
<item
android:icon="#drawable/ic_emoticon"
android:title="#string/nav_sub_menu_item01" />
<item
android:icon="#drawable/ic_emoticon"
android:title="#string/nav_sub_menu_item02" />
</menu>
</item>
</menu>

Here is what you exactly looking for:
<?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/Home"
android:checked="false"
android:icon="#drawable/ic_home"
android:title="#string/homestr" />
<item
android:id="#+id/myacc"
android:checked="false"
android:icon="#drawable/ic_account"
android:title="#string/myaccstr" />
<item
android:id="#+id/popular"
android:checked="false"
android:icon="#drawable/ic_star"
android:title="#string/Popularstr" />
<item
android:id="#+id/newsit"
android:checked="false"
android:icon="#drawable/ic_news"
android:title="#string/newsstr" />
<item android:title="#string/gn">
<menu>
<item
android:id="#+id/settings"
android:checked="false"
android:icon="#drawable/ic_setting"
android:title="#string/action_settings" />
<item
android:id="#+id/help"
android:checked="false"
android:icon="#drawable/ic_help"
android:title="#string/helpstr" />
</menu>
</item>
</group>
</menu>

You can use any ViewGroup like a LinearLayout for your Drawer. It is not limited to a ListView and a FrameLayout. Because of this you can style your Drawer View like any other layout of an Activity for example. The only thing you should keep in mind is that the NavigationDrawer can have only two childs. The first is your layout for the Activity and the second is the Drawer. Feel free to style them as you like!
<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">
<FrameLayout
android:id="#+id/content_frame"
android:layout_width="match_parent"
android:layout_height="match_parent" />
<!-- YOUR DRAWER -->
<LinearLayout
android:id="#+id/drawer_view"
android:layout_width="240dp"
android:layout_height="match_parent"
android:orientation="vertical"
android:layout_gravity="start">
<!-- Use any Views you like -->
<ListView
android:id="#+id/left_drawer"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:choiceMode="singleChoice"
android:divider="#android:color/transparent"
android:dividerHeight="0dp"
android:background="#ffffff"/>
</LinearLayout>
</android.support.v4.widget.DrawerLayout>
for the divider
android:divider="#FFFFFF"
android:dividerHeight="1dp"