Navigation In Compose

In this article, we will be handling navigation with jetpack compose. We will build an application with a bottom navigation bar, and a navigation drawer and we will enable navigation between different screens. If you have no basic understanding of building apps using jetpack compose then you can learn more here.

Let's get started

You will need to create a new compose project in your android studio. I will not take you through that. Once the project is created, navigate to your build.gradle and add this dependency to support navigation in compose.

implementation("androidx.navigation:navigation-compose:2.4.2")

In the first step we will create a sealed class for the bottomnavigationItem in which we pass the

• route This is the unique key that we will use to navigate from one screen to another.

• Icon and Title for the bottom navigation item.

sealed class BottomNavigationItem(var route: String, var icon: Int, var title: String){
    object Home: BottomNavigationItem("home", R.drawable.ic_home,"Home")
    object Location: BottomNavigationItem("location", R.drawable.ic_location,"Location")
    object Favourite: BottomNavigationItem("favourite", R.drawable.ic_fav,"Favourite")
    object Account: BottomNavigationItem("account", R.drawable.ic_account,"Account")
}

Let's create a composable for the bottonNavigationBar in which we will pass a list of BottomNavigationItems.

fun BottomNavigationBar() {
    val items = listOf(
        BottomNavigationItem.Home,
        BottomNavigationItem.Location,
        BottomNavigationItem.Favourite,
        BottomNavigationItem.Account,
    )
    BottomNavigation(
        backgroundColor = MaterialTheme.colors.primary,
        contentColor = MaterialTheme.colors.onPrimary
    ) {
        items.forEach { item ->
            BottomNavigationItem(
                icon = { Icon(painterResource(id = item.icon), contentDescription = item.title) },
                label = { Text(text = item.title) },
                selectedContentColor = Color.White,
                unselectedContentColor = Color.White.copy(0.4f),
                alwaysShowLabel = true,
                selected = false,
                onClick = {
                    TODO("handle navigation")
                }
            )
        }
    }
}

Now that we have our bottom bar we will implement it in the main activity using the Scaffold layout. Refer to thisdocumentation to learn more about Compose material components and layouts. Our MainActivity Code now looks like this.

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            NavigationInComposeTheme {
                Scaffold(
                    bottomBar = {
                        BottomNavigationBar()
                    }
                ) {

                }
            }
        }
    }
}

We have Successfully created the Bottom Navigation bar and if you run or preview your app you should be able to see the changes. Now let's handle the different screens and also navigate to the screens.

@Composable
fun HomeScreen() {
    Column(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)
            .wrapContentSize(Alignment.Center)
    ) {
        Text(
            text = "Home....................",
            fontWeight = FontWeight.Bold,
            color = Color.Black,
            modifier = Modifier.align(Alignment.CenterHorizontally),
            textAlign = TextAlign.Center,
            fontSize = 25.sp
        )
    }
}

That is what the home screen looks like and you can replicate that for all the screens. You can also customize the screens further to suit your needs but In this tutorial, we won't do that.

Kindly comment to let me know if this was helpful and if you would like me to take you through creating a navigation drawer in compose.