# Creating a BottomNavigation Multi-Stack using Child Fragments with Jetpack Navigation

DevFeed: [Creating a BottomNavigation Multi-Stack using Child Fragments with Jetpack Navigation](<https://devfeed.tech/articles/creating-a-bottomnavigation-multi-stack-using-child-fragments-with-jetpack-navigation-25934.md>)

Original publisher: [Read original article](<https://zhuinden.medium.com/creating-a-bottomnavigation-multi-stack-using-child-fragments-with-jetpack-navigation-5d4c24ea6f4f?source=rss-7a8d96da8cb6------2>)

Author: Gabor Varadi

Published: 2021-02-26T06:14:32Z

Content type: tutorial

Language: en

Sources: [Stories by Gabor Varadi on Medium](<https://devfeed.tech/sources/stories-by-gabor-varadi-on-medium.md>)

Topics: [Jetpack](<https://devfeed.tech/topics/jetpack.md>), [navigation](<https://devfeed.tech/topics/navigation.md>), [Framework](<https://devfeed.tech/topics/framework.md>)

Tags: [android-app-development](<https://devfeed.tech/tags/android-app-development.md>), [androiddev](<https://devfeed.tech/tags/androiddev.md>), [bottom-navigation](<https://devfeed.tech/tags/bottom-navigation.md>), [bottomnavigationview](<https://devfeed.tech/tags/bottomnavigationview.md>), [jetpack](<https://devfeed.tech/tags/jetpack.md>), [jetpack-navigation](<https://devfeed.tech/tags/jetpack-navigation.md>), [lifecycle](<https://devfeed.tech/tags/lifecycle.md>), [navigation](<https://devfeed.tech/tags/navigation.md>), [navigation-component](<https://devfeed.tech/tags/navigation-component.md>), [screen](<https://devfeed.tech/tags/screen.md>), [state](<https://devfeed.tech/tags/state.md>)

## AI overview

This tutorial explains how to implement bottom navigation with a separate Jetpack Navigation NavController and back stack for each tab. It uses child fragments, adding all tab fragments while detaching those that are not visible, and initializes each tab with its own navigation graph.

## Source excerpt

It's been a recurring question, regardless of navigation framework of choice: how is it possible to create a screen with a bottom navigation view, that would host a navigation history stack per each tab? Each framework has its own unique ways. For example, with Jetpack Navigation you might use the NavigationExtensions, which requires you to host the BottomNavigationView at the Activity-level. But how would you do it with Jetpack Navigation, in such a way that the BottomNavigationView is confined to a single child fragment, and that child fragment would host all tabs that each have a NavController (backstack) available to them? How bottom navigation with child fragments normally works If you intend to create a BottomNavigationView that is hosted by a Fragment (and that Fragment hosts each tab as a child fragment), there's a bit of work needed to be done. To keep the fragments alive while switching between them, they must all be added. However, to make sure that the fragments are in the correct lifecycle (stopped while not showing), it makes sense to detach them (and attach the one that is meant to be showing). https://medium.com/media/82eb957284cfe5def31160ac33d277ba/href This example is also available here. Please note that there is nothing specific to Jetpack Navigation in this snippet, this is how a fragment can manage its child fragments and keep only one of them attached, while the rest are detached. We will use this knowledge later in the article. What Jetpack Navigation normally does When you use Jetpack Navigation (using its XML-based DSL) you typically create a navigation.xml (typically 1 per compilation module, but multiple nav graphs + include can be used too), which is then given to a NavHostFragment in a FragmentContainerView. This is what allows the NavController to be initialized with a graph, and save/restore its state. https://medium.com/media/4cc60fc3c96786f7f9adcbb3a1053853/hrefCreating a NavController and backstack for each bottom navigation tab T