Develop Reference

BottomNavigationView with Jetpack Navigation not correctly showing the active menu indicator

I'm trying to do solve some navigation problems of BottomNavigationView using Jetpack Navigation. I'm using Jetpack Navigation 2.4.0-beta02. The first problem is the back button always navigates me back to the start destination. This one is solved by adding menuCategory: secondary. However, there is another problem.
Let say I have 4 navigation menus of BottomNavigationView, fragment A, B, C, and D. And then, there is another fragment A1 which is not part of the BottomNavigationView. The nav graph looks like this:
<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/navigation_a">
<fragment
android:id="#+id/navigation_a"
android:name="com.example.FragmentA"
android:label=""
tools:layout="#layout/fragment_a">
<action
android:id="#+id/action_navigation_a_to_navigation_a1"
app:destination="#id/navigation_a1"
app:launchSingleTop="true" />
</fragment>
<fragment
android:id="#+id/navigation_a1"
android:name="com.example.FragmentA1"
android:label=""
tools:layout="#layout/fragment_a1" />
<fragment
android:id="#+id/navigation_b"
android:name="com.example.FragmentB"
android:label=""
tools:layout="#layout/fragment_b" />
<fragment
android:id="#+id/navigation_c"
android:name="com.example.FragmentC"
android:label=""
tools:layout="#layout/fragment_c" />
<fragment
android:id="#+id/navigation_d"
android:name="com.example.FragmentD"
android:label=""
tools:layout="#layout/fragment_d" />
</navigation>
So, if I navigate from fragment A to A1, and then to fragment B (now the active menu indicator is at 2nd menu), then I press the hardware back button, it shows me fragment A1 which is correct. But, the active menu indicator is still at the 2nd menu instead of the 1st menu. I expected the active menu indicator at the 1st menu because I navigate to fragment A1 from fragment A.
This is my menu.xml file
<?xml version="1.0" encoding="utf-8"?>
<menu xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:id="#+id/navigation_a"
android:title="A"
android:menuCategory="secondary" />
<item
android:title="B"
android:id="#+id/navigation_b"
android:menuCategory="secondary" />
<item
android:title="C"
android:id="#+id/navigation_c"
android:menuCategory="secondary" />
<item
android:title="D"
android:id="#+id/navigation_d"
android:menuCategory="secondary" />
</menu>
and MainActivity.kt
val navHostFragment = supportFragmentManager.findFragmentById(R.id.nav_host_fragment_activity_main) as NavHostFragment
navController = navHostFragment.navController
binding.navView.setupWithNavController(navController)
Thanks for the help!

Now the BottomNavigationView has 4 fragments: A, B, C, and D.
And you want to make the navigation like:
A (A highlighted) -> A1 -> B (A highlighted) -> Back pressed -> A1 (A highlighted)
But you got:
A (A highlighted) -> A1 -> B (A highlighted) -> Back pressed -> A1 (B highlighted)
So, you need to have A highlighted when you return back from B.
To do that you need to examine the previous fragment in the back stack when the back pressed at fragment B.
pseudo code:
// At fragment B
if (back_pressed) {
if (previous_fragment is A1) {
popup the back stack twice to return back to A
} else {
popup the back stack once (Normal behavior of the back stack)
}
}
Code:
class FragmentB : Fragment() {
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val view = inflater.inflate(R.layout.fragment_b, container, false)
requireActivity().onBackPressedDispatcher.addCallback(
viewLifecycleOwner,
object : OnBackPressedCallback(true) {
override
fun handleOnBackPressed() { // Back pressed
val previousFragment = findNavController().previousBackStackEntry?.destination?.id
previousFragment?.let {
when (previousFragment) {
R.id.navigation_a1 ->
findNavController().navigateUp()
else ->
Log.d(TAG, "onCreateView: Not A1")
}
findNavController().navigateUp() // Normal behaviour when back is pressed
}
}
})
return view
}
}
Side Note:
This will work for the current navGraph setup; but I encourage you to have another graph, or even a nested navigation inside the current one; so that you keep the fragment A1 separated from the BottomNavView fragments.
UPDATE:
I want when pressing back, it still shows fragment A1 and the indicator is at the 1st menu. Your solution instead navigates me to fragment A.
To do so, you'd normally popup the back stack only once, and set the BottomNavView menu item to be checked:
Assuming the BottomNavView is hosted only by the activity, so you can access it with requireActivity() as MainActivity; cast that to the name of your activity.
Or if it's hosted by a fragment, then use parentFragment as MyParentFragment, similarly cast that to the name of the parent fragment.
At activity or parent fragment:
fun highlightAItem() {
// Highlight A item from the bottomNavView
val item = navView.menu.findItem(R.id.navigation_a)
item.isChecked = true
}
At fragment B:
requireActivity().onBackPressedDispatcher.addCallback(
viewLifecycleOwner,
object : OnBackPressedCallback(true) {
override
fun handleOnBackPressed() {
// Highlight A item from the BottomNavView
(requireActivity() as MainActivity).highlightAItem()
// Pop backstack once to return to A1 fragment
findNavController().navigateUp()
}
})

Application crash when navigating to fragment

I am using 3 fragments with 1 activity for user profile features. I use navigation to move to fragments:
The problem is when I go from profileFragment to editProfileFragment, change user's data and then go back to profileFragment by navigation action, I cannot reach editProfileFragment again from profileFragment. I got this error:
Navigation action/destination xxx:id/action_profileFragment_to_editProfileFragment cannot be found from the current destination Destination(xxx:id/editProfileFragment)
I am trying to use MVVM architecture so my navigation goes like this - in fragment I observe LiveData:
navController = Navigation.findNavController(view)
viewModel.navigateTo.observe(viewLifecycleOwner, EventObserver {
navController.navigate(it)
})
viewModel 'navigateTo':
private val _navigateTo = MutableLiveData<Event<Int>>()
val navigateTo: LiveData<Event<Int>> = _navigateTo
and the navigation methods:
fun goBackToProfile(){
_navigateTo.value = Event(R.id.action_editProfileFragment_to_profileFragment)
}
fun editProfileButtonClick() {
_navigateTo.value = Event(R.id.action_profileFragment_to_editProfileFragment)
}
I also use Event wrapper class by Jose Alcerreca:
open class Event<out T>(private val content: T) {
var hasBeenHandled = false
private set // Allow external read but not write
/**
* Returns the content and prevents its use again.
*/
fun getContentIfNotHandled(): T? {
return if (hasBeenHandled) {
null
} else {
hasBeenHandled = true
content
}
}
/**
* Returns the content, even if it's already been handled.
*/
fun peekContent(): T = content
}
class EventObserver<T>(private val onEventUnhandledContent: (T) -> Unit) : Observer<Event<T>> {
override fun onChanged(event: Event<T>?) {
event?.getContentIfNotHandled()?.let {
onEventUnhandledContent(it)
}
}
}
I don't know if error occurs because of Event wrapper or I do something wrong with navigation. I will appreciate any advices.
EDIT:
navigation.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/main_nav_graph"
app:startDestination="#id/homeFragment">
<fragment
android:id="#+id/homeFragment"
android:name="xxx.mainPackage.views.HomeFragment"
android:label="fragment_home"
tools:layout="#layout/fragment_home" />
<fragment
android:id="#+id/profileFragment"
android:name="xxx.mainPackage.views.ProfileFragment"
android:label="fragment_profile"
tools:layout="#layout/fragment_profile" >
<action
android:id="#+id/action_profileFragment_to_editProfileFragment"
app:destination="#id/editProfileFragment" />
</fragment>
<fragment
android:id="#+id/editProfileFragment"
android:name="xxx.mainPackage.views.EditProfileFragment"
android:label="fragment_edit_profile"
tools:layout="#layout/fragment_edit_profile" >
<action
android:id="#+id/action_editProfileFragment_to_chooseImageFragment"
app:destination="#id/chooseImageFragment" />
<action
android:id="#+id/action_editProfileFragment_to_profileFragment"
app:destination="#id/profileFragment" />
</fragment>
<fragment
android:id="#+id/chooseImageFragment"
android:name="xxx.mainPackage.views.ChooseImageFragment"
android:label="ChooseImageFragment" >
<action
android:id="#+id/action_chooseImageFragment_to_editProfileFragment"
app:destination="#id/editProfileFragment" />
</fragment>
</navigation>

It looks to me like you're navigating the wrong way.
Firstly
You are moving from ProfileFragment to EditProfileFragment. Then you move from EditProfileFragment to ProfileFragment via action whose id is R.id.action_profileFragment_to_editProfileFragment.
That action I see you define from Fragment ProfileFragment, not EditFragment.
Make sure your LiveData navigateTo in EditProfileFragment trigger id is R.id.action_editProfileFragment_to_profileFragment when you want to open ProfileFragment from EditProfileFragment.
Secondly
When you return from EditProfileFragment , don't call navController.navigate() as it will keep your current fragment in the backstack and push your target fragment to the backstack. If you want to go back without keeping your current fragment in the backstack, call navController.popBackStack().

Error is very clear, there is no action_profileFragment_to_editProfileFragment defined on editProfileFragment. if you look at your navigation xml, you can see that action_profileFragment_to_editProfileFragment is defined for ProfileFragment.
But you are trying to use this navigation action from EditProfileFragment, which causes the error. so either update your navigation to include this action for EditProfileFragment or use some action which is already defined for EditProfileFragment.

How to keep a specific screen when using Navigatioin Component?

I have a BottomNavigationView and I am using a NavController to switch menus and move the screen.
I would like to know how to keep a specific screen even when moving the menu freely.
Let me explain in more detail.
There are bottom menus A, B, C. And each has a Fragment screen.
All menus and screen transitions use NavHost, NavController, and nav_graph.
In menu C, a dialog is displayed through the button on the C screen.
The dialog is also linked to the nav_graph.
When an option is selected in the dialog, it moves to screen D.
D screen is the page where you write something.
This is important from now on.
The current menu is C, screen D is open, and something is being written.
However, if you go to another menu while writing and then return to C, screen C of the first menu C appears, not the screen you are writing.
Here, I want the screen I was writing to continue to be displayed even when I return from another menu.
Any good way?
For reference, since I am using the mvvm pattern and viewmodel, the data of the screen I am writing seems to be maintained.
Thank you.
nav_graph
<?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/nav_graph"
app:startDestination="#id/calendar">
<!-- menu C screen -->
<fragment
android:id="#+id/write_home"
android:name="com.example.writeweight.fragment.WriteRoutineHomeFragment"
android:label="fragment_write_routine_home"
tools:layout="#layout/fragment_write_routine_home" >
<action
android:id="#+id/action_write_home_to_bodyPartDialog"
app:destination="#id/bodyPartDialog" />
</fragment>
<!-- dialog -->
<dialog
android:id="#+id/bodyPartDialog"
android:name="com.example.writeweight.fragment.BodyPartDialogFragment"
android:label="BodyPartDialogFragment"
tools:layout="#layout/fragment_body_part_dialog">
<action
android:id="#+id/action_bodyPartDialog_to_write"
app:destination="#id/write"/>
</dialog>
<!-- screen D (write page) -->
<fragment
android:id="#+id/write"
android:name="com.example.writeweight.fragment.WriteRoutineFragment"
android:label="WritingRoutineFragment"
tools:layout="#layout/fragment_writing_routine">
<action
android:id="#+id/action_write_to_workoutListTabFragment"
app:destination="#id/workoutListTabFragment" />
<argument
android:name="title"
app:argType="string"
app:nullable="true"
android:defaultValue="#null"/>
<argument
android:name="workout"
app:argType="string"
app:nullable="true"
android:defaultValue="#null"/>
</fragment>
</navigation>

There are two ways to fix this issue either use version_navigation 2.4.0-alpha01 which is the easiest way or use NavigationExtensions
to use NavigationExtensions you have to add this to your project NavigationExtensions and then in the navigation menu create separate navigation files for each tab.
In the main activity, layout replace fragment with FragmentContainerView and remove NavHostFragment.
In the Mainactivty
class MainActivity : AppCompatActivity(), NavController.OnDestinationChangedListener {
private val viewModel by viewModels<MainViewModel>()
private var currentNavController: LiveData<NavController>? = null
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.main)
setSupportActionBar(toolbar)
/*
appBarConfiguration = AppBarConfiguration(
// navController.graph,
setOf(
R.id.navigate_home, R.id.navigate_collection, R.id.navigate_profile
),
drawerLayout
)
setupActionBarWithNavController(navController, appBarConfiguration)
navView.setupWithNavController(navController)
bottomNavView.setupWithNavController(navController)
// make sure appbar/toolbar is not hidden upon fragment switch
navController.addOnDestinationChangedListener { controller, destination, arguments ->
if (destination.id in bottomNavDestinationIds) {
appBarLayout.setExpanded(true, true)
}
}
*/
// Add your tab fragments
val navGraphIds = listOf(R.navigation.home, R.navigation.albumlist, R.navigation.test)
val controller = bottomNavView.setupWithNavController(
navGraphIds = navGraphIds,
fragmentManager = supportFragmentManager,
containerId = R.id.nav_host_container,
intent = intent
)
// Whenever the selected controller changes, setup the action bar.
controller.observe(this, Observer { navController ->
setupActionBarWithNavController(navController)
// optional NavigationView for Drawer implementation
// navView.setupWithNavController(navController)
addOnDestinationChangedListener(navController)
})
currentNavController = controller
}
private fun addOnDestinationChangedListener(navController: NavController) {
// ensure only one listener is active
navController.removeOnDestinationChangedListener(this)
navController.addOnDestinationChangedListener(this)
}
override fun onDestinationChanged(
controller: NavController,
destination: NavDestination,
arguments: Bundle?
) {
if (destination.id in bottomNavDestinationIds) {
appBarLayout.setExpanded(true, true)
}
}}

Android Bottom navigation with splash

I'm implementing this bottom navigation pattern but with a splash fragment.
My issue is when I navigate throw different fragments with bottom menu and I press to go back, I don't go back to the home fragment, instead of this, I return to the previous fragment.
For example, I have fragments A-B-C:
Now I'm on fragment A and I press to go to B.
Then I press to go to C (from B).
Then I press to go back.
The result is I'm getting back to B, not to fragment A (what I really want!).
(If I set in the navigation graph app:startDestination -> fragment A - instead of login fragment - everything goes well).
Here is my graph:
<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/main_navigation"
app:startDestination="#id/splashFragment">
<fragment
android:id="#+id/splashFragment"
android:name="application.SplashFragment"
tools:layout="#layout/fragment_splash">
<action
android:id="#+id/action_splashFragment_to_fragmentA"
app:destination="#id/fragmentA"
app:popUpTo="#id/main_navigation"
app:popUpToInclusive="true" />
</fragment>
<fragment
android:id="#+id/fragmentA"
android:name="application.fragmentA"
android:label="#string/fragmentA"
tools:layout="#layout/fragmentA" />
<fragment
android:id="#+id/fragmentB"
android:name="application.fragmentB"
android:label="fragmentB"
tools:layout="#layout/fragmentB" />
<fragment
android:id="#+id/fragmentC"
android:name="application.fragmentC"
android:label="#string/fragmentC"
tools:layout="#layout/fragmentC" />
And here my MainActivity:
class MainActivity : AppCompatActivity() {
private lateinit var appBarConfiguration: AppBarConfiguration
private lateinit var navController: NavController
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_main)
// Toolbar & Navigation
setSupportActionBar(toolbar)
navController = findNavController(R.id.nav_host)
// AppBarConfiguration with the correct top-level destinations
appBarConfiguration = AppBarConfiguration(
topLevelDestinationIds = setOf(
R.id.fragmentA,
R.id.fragmentB,
R.id.fragmentC
)
)
// This allows NavigationUI to decide what label to show in the action bar
// By using appBarConfig, it will also determine whether to
// show the up arrow or drawer menu icon
setupActionBarWithNavController(navController, appBarConfiguration)
// Set destinations to left and bottom navigation
bottom_navigation.setupWithNavController(navController)
// Set visibility for NavigationView & Toolbar
visibilityNavElements()
}
// Allows NavigationUI to support proper up navigation or the drawer layout
// drawer menu, depending on the situation
override fun onSupportNavigateUp() = navController.navigateUp(appBarConfiguration)
private fun visibilityNavElements() {
findNavController(R.id.nav_host).addOnDestinationChangedListener { _, destination, _ ->
when (destination.id) {
R.id.splashFragment -> {
toolbar.visibility = View.GONE
bottom_navigation.visibility = View.GONE
}
else -> {
toolbar.visibility = View.VISIBLE
bottom_navigation.visibility = View.VISIBLE
}
}
}
}
}
Thanks!

You can handle OnbackPress in any fragment like below and is the recommended way . You can use it in Fragment C and when back is pressed you can navigate to Fragment A
in Java
OnBackPressedCallback onBackPressedCallback = new OnBackPressedCallback(true) {
#Override
public void handleOnBackPressed() {
}
};
requireActivity().getOnBackPressedDispatcher().addCallback(this, onBackPressedCallback);
in Kotlin
val callback = requireActivity().onBackPressedDispatcher.addCallback(this) {
// Handle the back button event
}

Android: change current content in navigation drawer app, without showing item in drawer menu

I'm a beginner in Android development, and I'd like to create an app with a Navigation Drawer. I started with the default template from the Android Studio 'create project' window.
This is the code from the MainActivity, that sets up the drawer navigation.
#Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
Toolbar toolbar = findViewById(R.id.toolbar);
setSupportActionBar(toolbar);
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.
mAppBarConfiguration = new AppBarConfiguration.Builder(
R.id.nav_customers, R.id.nav_notes, R.id.nav_stats, R.id.nav_settings)
.setDrawerLayout(drawer)
.build();
navController = Navigation.findNavController(this, R.id.nav_host_fragment);
NavigationUI.setupActionBarWithNavController(this, navController, mAppBarConfiguration);
NavigationUI.setupWithNavController(navigationView, navController);
}
I've got a fragment that is the 'customers' page. This page contains a button the user can click on to create a new customer. When that button is clicked, a new page should be opened that takes the input for creating the customer.
This new page should not be a navigation item the user can navigate to directly. The only way and reason to open that page should be by using the 'create customer' button in the customers view I mentioned.
So, that new page should not be included in the menu of the navigation drawer. At the same time, I do want to give this page its own Toolbar.
The two most important things to do, seem to be:
Add a navigation destination / page to the activity. This page should not be included in the navigation drawer's menu. Opening the page should be done programmatically.
The page must have its own Toolbar at the top of the screen.
It seems simple and I tried a lot, but I didn't find any solution so far.

You can check the doc:
Define in your graph something like:
<fragment android:id="#+id/a"
android:name="com.example.myapplication.FragmentA"
android:label="a"
tools:layout="#layout/a">
<action android:id="#+id/action_a_to_b"
app:destination="#id/b"/>
</fragment>
<fragment android:id="#+id/b"
android:name="com.example.myapplication.FragmentB"
android:label="b"
tools:layout="#layout/b">
</fragment>
and then just use to navigate:
findNavController().navigate(R.id.action_a_to_b)
Check also this page:
Adding the top app bar to your activity works well when the app bar’s layout is similar for each destination in your app. If, however, your top app bar changes substantially across destinations, then consider removing the top app bar from your activity and defining it in each destination fragment, instead.
In the FragmentB in the on onCreateView you can inflate your layout
override fun onCreateView(
inflater: LayoutInflater,
container: ViewGroup?,
savedInstanceState: Bundle?
): View? {
val root = inflater.inflate(R.layout.fragment_B container, false)
In this layout you can put a Toolbar:
<LinearLayout>
<androidx.appcompat.widget.Toolbar
android:id="#+id/toolbar"
... />
...
</LinearLayout>
and:
override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
val navController = findNavController()
val appBarConfiguration = AppBarConfiguration(navController.graph)
view.findViewById<Toolbar>(R.id.toolbar)
.setupWithNavController(navController, appBarConfiguration)
}
The alternative is to setup the navigation in the Activity and use the OnDestinationChangedListener:
navController.addOnDestinationChangedListener { _, destination, _ ->
if(destination.id == R.id.b) {
toolbar.visibility = View.GONE
//....
} else {
toolbar.visibility = View.VISIBLE
//.....
}