BottomNavigationView in child fragment in Navigation Component - android

I want to achieve something like this image flow in android navigation component. Where the Dashboard Fragment is the start destination. And from here i can navigate to another fragment which have a bottom navigation view. Is this possible using a single nav graph and a single activity? What is the best way to achieve something like this?

You can use BottomNavigationView
val childNavView: BottomNavigationView = binding.nav1View
val navController = NavHostFragment.findNavController(childFragmentManager.findFragmentById(R.id.navHostFragment) as NavHostFragment)
childNavView.setupWithNavController(navController)

In case someone's still looking for a solution.
Just use two separate navigation graphs. And when navigating, pick the right navigation controller object. You can use a single activity of course, with nested fragments. So your "Bottom nav page" will have its own navigation container with child fragments in it.
Moreover, you can also navigate from the inner nodes to outer ones. In that case you need to reference the parent fragment ("Bottom nav page") from the child fragment and then obtain its navigation controller like this:
parentFragment?.parentFragment?.findNavController()
Here the first parentFragment is NavHostFragment and its parent is your actual parent fragment ("Bottom nav page").

If you want Page 1-3 to have options for further fragments to navigate inside (i.e. Page 1.1, 1.2 for Page 1, etc), then you need a navgraph for each Page (so 3 total), I would also make them all the root of their own navigation, would make it a lot easier to implement, and just replace the dashboard fragment with an activity if it's for signing in for example.

Related

Switch tab on button click with Bottom Navigation and Navigation component

I have a very simple app that consists of three Fragments and a Bottom Navigation bar, created by using "New Project -> Bottom Navigation Activity" in Android Studio. The first Fragment holds a button, which should take me to the second Fragment, like if the middle button of the Bottom Navigation bar was clicked.
Is there a "standard" way to do this?
I have tried:
using launch(...) of the Navigation component, which seems to launch the Fragment with its own back stack and breaks the bottom navigation.
using setSelectedItemId(...) in different ways, which either results in an exception or breaks bottom navigation in different ways.
In this post, someone asks the exact same question, but it is marked as a duplicate. I fail to find the answer, especially concerning Navigation component.
Clicking the Button should have the same effect as if the user taps the corresponding item in the bottom navigation. So you need to call setSelectedItemId() on the BottomNavigationView. This can only be done in the Activity displaying the BottomNavigationView.
One option is to introduce a shared ViewModel with
a LiveData to be observed by the Activity
a function onButtonClicked() to be called by the OnClickListener of your Button which will update the LiveData
Once the LiveData observer fires, your Activity can call
binding.navView.selectedItemId = R.id.navigation_dashboard
Please note that for passing information about events like this one should choose some data type which can be invalidated after use. See for example LiveData with SnackBar, Navigation and other events (the SingleLiveEvent case)
Paste this code from where you want to go to the second fragment
Fragment fragment = new DashboardFragment();
FragmentManager fm = getActivity().getSupportFragmentManager();
fm.beginTransaction().replace(R.id.frame_layout, fragment).commit();
For more information click here

BottonNavigationView Icon not changing on back press

I am using navigation component for bottom navigation component.
bottomNavbar.setupWithNavController(navController)
now this is working fine but when I hit the back button, it is returning to the home page but the icon is not changing, it is stuck in the previous selected fragment. I have three fragments and I have implemented navbar separately in all those fragments, here's the code for those three fragments.
settings fragment
val bottomNavbar = view.findViewById<BottomNavigationView>(R.id.bottomNavbar)
bottomNavbar.setupWithNavController(navController)
search fragment
val bottomNavbar = view.findViewById<BottomNavigationView>(R.id.bottomNavbarSearch)
bottomNavbar.setupWithNavController(navController)
chat fragment
val bottomNavbar = view.findViewById<BottomNavigationView>(R.id.bottomNavbar)
bottomNavbar.setupWithNavController(navController)
here search fragment is my home fragment.
Is there a mistake in my implementation or should I just switch to the old way of implementing bottom navigation view.
any help is appreciated. Thanks
Make sure to have the same ids in the bottomNavView menu that matches
the corresponding ones in the navGraph of the bottomNavView fragments.
check this answer
It seems you have added BottomNavigationView on all three fragments which should ideally be on Activity's view below your fragment/FragmentContainerView where you have defined your navGraph.
To fix it you need to remove BottomNavigationView from all 3 fragments and add it on Activity using the following basic structure.
Activity XML structure:
<constriantLayout>
<fragment/> //with navGraph
<bottomNavigationView/>
</constraintLayout>
and onCreate of Activity use the code setting up BottomNavigationView
val bottomNavbar = findViewById<BottomNavigationView>(R.id.bottomNavbar)
bottomNavbar.setupWithNavController(navController)

show content of recyclcer view in fragment and bottomnavigation using navigation jetpack

I implemented the bottom navigation with Jetpack
in one tab i have recyclerview
I want to enter the details of an item when it is clicked and gone bottom navigation
What is the best way to do this?
using activity or fragment?
Fragments live within the same activity lifecycle, which means that switching from one tab to another won't destroy the activity data.
Fragments are therefore the best choice.
Here is a link to a step by step procedure on the implementation.
https://proandroiddev.com/step-by-step-to-bottom-navigation-with-jetpacks-navigation-component-and-multiple-nav-graphs-271c05af1dd3

Navigate with BottomNavigationView inside fragment (not activity) using navigation component and navigation graph

I have a single Activity application. I created a single Navigation graph containing all the possible destinations (Fragment).
The Activity layout only contains a <fragment/> container as it should be.
There is a main Fragment containing a BottomNavigationView where the user can navigate to all the important destinations (3 of them).
When I implement the BottomNavigationView as described in many tutorials or event in the official documentation, it replaces the full content of the Activity. Therefore, the BottomNavigationView is no more displayed as it is contained in a Fragment and not in the Activity. I want it to inflate the right layout in the main Fragment.
Should I use another Navigation graph, specific for the main Fragment ?
Should I use a classic Listener (But I will loose all the interest of using a Navigation graph) ?
Is there a solution I don't know ?
How do I implement it ? I tried to create two different Navigation graph, but I can not set it to my BottomNavigationView
Answer:
Create a second Navigation graph containing the destination you want your BottomNavigationView to access.
In the fragment containing the BottomNavigationView make sure to insert a FragmentContainerView and an appropriate ID.
Then, thanks to This answer right here you can implement it easily.
Juste refer to the nested NavHost using this:
val nestedNavHostFragment = childFragmentManager.findFragmentById(R.id.bottom_nav_host) as? NavHostFragment
val navController = nestedNavHostFragment?.navController
val bottomNavigationView = view.findViewById<BottomNavigationView>(R.id.bottom_navigation)
if (navController != null) {
bottomNavigationView.setupWithNavController(navController)
} else {
throw RuntimeException("Controller not found")
}

Navigation Library double navigation UI components

I'm trying to set up navigation in my application, it works well for simple things but I can't get it to work for some of the clients requirements, what I'm trying to do right now is set up a navigation graph based on the one activity many fragment idea, unfortunately each of these fragments have their own sub navigation (requirement) so for instance my main activity hosts my main nav graph and swaps out fragments based on the navigation views menu's id's using the NavigationUI library, but the first fragment shown holds a bottom navigation view with just 2 fragments (don't get me started on why this is poor design) so I tried to give this fragment its own nav graph, this works in that it shows the home fragment but it doesn't allow me to navigate using said graph its always trying to get the main graph for the navigation view drawer regardless of the view I try to find it with, so I tried to nest a graph in the main graph which again works but this draws the fragment over my bottom navigation view making it impossible to see or press it, so my question is how would I control 2 NavigationUI components, my navigation view (drawer) and bottom navigation view? do I use 2 nav graphs or nest the nav graph? and then how do I get a handle on them as passing the view doesn't seem to work in this instance
So it was looking for the nav graph in the heirarchy which was missing my nav graph for this layout and finding the one in the main activity i found i could call a nav controller by its id from a fragment like this
NavController navController = Navigation.findNavController(requireActivity(), R.id.main_nav_host);
which means i could use the nav graph i wanted and solve my issue

Categories

Resources