Learn Android Development

Simple Jetpack Compose Tabs With Fragments

Making your Jetpack Compose App with Tabs works with Fragment

Photo by Kelsy Gagnebin on Unsplash

Having Jetpack Compose with Fragments is always a tricky topic, especially with nested Fragments. However, previously I have shared how to get that tackled with an example of the provided Scaffold’s BottomBar through the article below.

Load Fragments in Jetpack Compose: Beyond What Google Taught

The high-level codes as below

val navController = rememberNavController()
Scaffold(
    topBar = { TopBar() },
    bottomBar = { BottomNavigationBar(navController) }
) { padding ->
    Box(modifier = Modifier.padding(padding)) {
        NavigationNavHost(navController, ::getCommitFunction)
    }
}

This handles complicated Fragment with nested Fragments Pop and Restore when we switch the bottom bar tab.