Hello everyone! Im trying to achieve the following...

# compose

[Marco Pierucci]

Hello everyone! Im trying to achieve the following navigation with compose ( fab opens a new “screen” not associated with the bottom nav bar). Question ion the 🧵

[Marco Pierucci]

So after a small POC I got working like this

[Marco Pierucci]

class SingleActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val navController = rememberNavController()
            TeamItTheme {
                Surface(color = MaterialTheme.colors.background) {
                    NavHost(navController = navController, startDestination = "home") {
                        composable("home") {
                            HomeScreen(navController)
                        }

                        composable("new") {
                            NewMatchScreen()
                        }
                    }
                }
            }
        }
    }
}

[Marco Pierucci]

and

[Marco Pierucci]

@Composable
fun HomeScreen(navController: NavHostController) {
    val innerController = rememberNavController()

    Scaffold(
        floatingActionButton = {
            FloatingActionButton(onClick = { navController.navigate("new") }) {
                Icon(imageVector = Icons.Rounded.Add, contentDescription = null)
            }
        },
        floatingActionButtonPosition = FabPosition.Center,
        bottomBar = {
            BottomAppBar(
                cutoutShape = MaterialTheme.shapes.small.copy(CornerSize(percent = 50))
            ) {
                BottomNavigation {

                    val navBackStackEntry by innerController.currentBackStackEntryAsState()
                    val currentDestination = navBackStackEntry?.destination
                    BottomNavigationItem(
                        selected = currentDestination?.hierarchy?.any { it.route == "matches" } == true,
                        onClick = {
                            innerController.navigate("matches")
                        },
                        icon = { Icon(Icons.Rounded.List, contentDescription = null) }

                    )
                    BottomNavigationItem(
                        selected = currentDestination?.hierarchy?.any { it.route == "settings" } == true,
                        onClick = {
                            innerController.navigate("settings")
                        },
                        icon = { Icon(Icons.Rounded.Settings, contentDescription = null) }
                    )
                }
            }
        },
        isFloatingActionButtonDocked = true
    ) {
        NavHost(navController = innerController, startDestination = "matches") {
            composable("matches") {
                MyMatchesScreen()
            }
            composable("settings") {
                SettingsScreen()
            }
        }
    }
}

[Marco Pierucci]

this seems to work but It requires to different NavHost and nav controllers

[Marco Pierucci]

https://developer.android.com/jetpack/compose/nav-adaptive
Here its recommended to work with just one nav host

[Marco Pierucci]

I Guess t my doubt is, is this the right approach for this sample? Am I missing something that obvious to make it work with one NavHost? Could I get into issues with multiple host like when deeplinking for example?

[Marco Pierucci]

Cheers!

[Ian Lake]

We just covered this earlier today: https://kotlinlang.slack.com/archives/CJLTWPH7S/p1642802820452400?thread_ts=1642786394.435700&cid=CJLTWPH7S

[Ian Lake]

(with the same approach also applying to floating action buttons or any other global scaffold level UI you want to change based on your current destination)

[Marco Pierucci]

Oh amazing didnt see that, will take a look. Thanks!

[Marco Pierucci]

Yep, that absolutely makes sense now thats implemented, thanks again