Android Jetpack Compose Navigation

Background

Jetpack Compose is Android’s modern toolkit for building native UI.

This is new style to create UI and everything is in codes.

In Android, to move different page(contents) is

• Move Activity using startActivity
• Change Fragment

etc…

Jetpack Compose is different way to realise. Let’s try

Preparation

In this time, I prepared simple way to do.

Prepare 2 screen and 1st screen has one button to move 2nd screen. That’s it.

Steps

1. Import navigation-compose library
2. Prepare NavHostController by rememberNavController
3. Implement NavHost to manage transition
4. Wrap Scaffold

Codes

MainActivity.kt

This is main codes. Screen and onCreate is there.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationAppTheme { // App Theme
                val navController = rememberNavController()
                // A surface container using the 'background' color from the theme
                Scaffold(
                    topBar = { },
                ) {
                    NavHost(navController = navController, startDestination = "main") {
                        composable("main") {
                            // Screen
                            MainScreen(name = "Main", navController = navController)
                        }
                        composable("second") {
                            SecondScreen()
                        }
                    }
                }
            }
        }
    }
}

@Composable
fun MainScreen(name: String, navController: NavController) {
    Column {
        Text(text = "Hello $name!")
        Button(onClick = {
            navController.navigate("second")
        }) {
            Text("Go to 2nd")
        }
    }

}

@Composable
fun SecondScreen() {
    Text(text = "I am 2nd.")
}

This is all. Let’s check the point one by one

val navController = rememberNavController()

Get NavigationController by rememberNavController. To keep status

NavHost(navController = navController, startDestination = "main") {
                        composable("main") {
                            // Screen
                            MainScreen(name = "Main", navController = navController)
                        }
                        composable("second") {
                            SecondScreen()
                        }
                    }

This is management of Screen transition. Set navigationcontroller and default transition name

composable(“name”){} is to define all page transition.

MainScreen, SecondScreen are @Composable.