Understanding and Implementing Navigation Components Jetpack Compose in Application | Part 2
Hey, welcome back to another article on jetpack compose! This time, we’re going to explore how to create navigation in our apps using this awesome toolkit. Let’s dive in!
To build navigation in Jetpack Compose, we can use the Navigation library that enables navigating from one destination within our app to another. The Navigation library also provides a specific artifact to enable consistent and idiomatic navigation with Jetpack Compose. Here are the steps to implement navigation in Jetpack Compose:
Create New Project
Creating a new project on Android Studio is easy and fun. You just need to follow these steps:
- Open Android Studio and click on Start a new Android Studio project.
- Choose a template for your app, such as Basic Activity or Empty Activity.
- Enter a name for your project, a package name, and a location to save it.
- Select the minimum SDK version that your app will support and click Finish.
That’s it! You have created a new project on Android Studio. Now you can start coding and designing your app.
Implement Navigation
Add the Navigation dependency to your project.
If you want to use Navigation on Jetpack Compose Android Project, you need to add its dependency in your build.gradle file.
dependencies {
.....
implementation "androidx.navigation:navigation-compose:2.5.0"
....
}Create a NavHost
Create a NavHost with a start destination. The NavHost is a container that holds the screens of your app. The start destination is the screen that is shown when the app is launched.
....
@Composable
fun MyAppNavHost(
modifier: Modifier = Modifier,
navController: NavHostController = rememberNavController(),
startDestination: String = "home"
) {
NavHost(
modifier = modifier, navController = navController, startDestination = startDestination
) {
composable("home") { HomeScreen() }
composable("detail") { DetailScreen() }
}
}
.......Create Sealed Class Drawer Item and Screen
Create a sealed class to represent the items you want inside your drawer.
......
sealed class NavDrawerItem(var route: String, var icon: Int, var title: String) {
object Home: NavDrawerItem("home", R.drawable.ic_menu_home, "Home")
object Detail : NavDrawerItem("detail", android.R.drawable.ic_menu_info_details, "Detail")
}
....Create the screens for each item. You can create one composable screen for each item. Here is an example screen:
@Composable
fun HomeScreen(navController: NavHostController) {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.White)
.wrapContentSize(Alignment.Center),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Home Screen", style = MaterialTheme.typography.titleLarge)
Button(onClick = { navController.navigate(route = MainActivity.NavDrawerItem.Detail.route) }) {
Text(text = "Detail")
}
}
}
@Composable
fun DetailScreen(navController: NavHostController) {
Column(
modifier = Modifier
.fillMaxSize()
.background(Color.Yellow)
.wrapContentSize(Alignment.Center),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Detail Screen", style = MaterialTheme.typography.titleLarge)
Button(onClick = { navController.navigate(route = MainActivity.NavDrawerItem.Home.route) }) {
Text(text = "Home")
}
}
}Finally
Here’s an example of navigating to the DetailScreen from the HomeScreen:
Each screen can be created as a composable function with the @Composable annotation. Inside each screen, we can use Jetpack Compose’s UI components to create the layout for that screen. To navigate between screens, we can use the NavHostController to navigate to the appropriate screen.
By following these steps, we can build navigation in Jetpack Compose. For the next article i want to share how to connecting navigation with AppBar and BottomBar.
if you want see the full code, you can showing at my repository in this link.
“Writing is an exploration. You start from nothing and learn as you go.”
― E. L. Doctorow
source:
