Topic: Compose GUI - Scaffold and First Navigation Refactor.

We'll learn about scaffolding. Scaffold is a container with convenient "slots" for various components and other screens elements.

Having just one NavController in the activity forces us to pass it around between screens in a way that's not sustainable. We need each screen to hold its own navitation.

Task: Scaffold and Refactor Navigation.

Use Scaffold to add a bottom bar to the List screen and a top bar to the Detail screen.

Refactor the navigation so that instead of propagating the NavHost, you just need to propagate lambdas.

Example GUI

This is a mere example, don't let it limit your design.

Requisites

Using Scaffold, add a bottom navigation bar to our List screen. It should have two clickable icons, we'll use Home and Favourite default icons for now. Actions for the buttons must be lambda arguments to the composable. For practice, let the Favourite action be to display the pokemon details screen, and Home button be the default state.

Using Scaffold, add a topbar for the detail screen. It will have the pokemon name and a IconButton to navigate up, it will take a lambda for the navigation.

Main Activity will still hold the graph, but instead of passing the navController, it will pass lambdas for specific navigation.

PokemonList needs a lambda to display PokemonDetail that allows passing the pokemon name as a parameter.

PokemonDetail needs a lambda to navigate up/back which will be called from the topbar clickable icon.

Tips & Advice.

Breaking composables into smaller chunks will allow you to keep the screen function more readable.

Research terms.

• Scaffold
• TopAppBar
• NavigationBar
• NavigationBarItem
• FAB (Floating Action Button)
• Lambda
• popbackstack

Additional resources.