Design TopAppBar and BottomNavigationBar with Different view change on menu select using JetPack Compose

Hi first lets see how to implement top app bar using jectpack compose for that we need to create a composable function TopBar

fun TopBar() {
title = { Text(text ="JetPack Compose", fontSize = 18.sp,color=Color.White,fontFamily = noromalrobofonts) },
backgroundColor = Purple700,
contentColor = Color.White

So inside the TopBar function we see

TopAppBar → The TopAppBar component is often used as the header for our screen — displaying a navigational title along with menu components or any other decorations that the design of our application requires.

title →Which hold the title for our TopAppBar inside we created a Text and we mentioned name,font size,color and fontFamily

backgroundColor →for our TopAppBar

After lets create a BottonNaviagtionBar composable function which take NavContoller as a parameter which hold our bottom naviagtion menu in that we going to create four menus such as Home,Video,Favourite and Profile.Before looking BottonNaviagtionBar function we create a sealed class with name NavigationItem

sealed class NavigationItem(var route: String, var icon: Int, var title: String) {
object Home : NavigationItem("home", R.drawable.ic_baseline_home_24, "Home")
object Videos : NavigationItem("music", R.drawable.ic_baseline_videocam_24, "Video")
object Favourite : NavigationItem("movies", R.drawable.ic_baseline_favorite_24, "Favourite")
object Profile : NavigationItem("books", R.drawable.ic_baseline_supervised_user_circle_24, "Profile")

the above sealed class contain route,icon,and name now lets see BottomNaviagtionBar function

fun BottomNavigationBar(navController: NavController) {
val items = listOf(
backgroundColor = Teal200,
contentColor = Color.White
) {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
items.forEach { item ->
icon = { Icon(painterResource(id = item.icon), contentDescription = item.title) },
label = { Text(text = item.title, fontSize = 12.sp,color=Color.White,fontStyle = FontStyle.Italic) },
selectedContentColor = Color.Red,
unselectedContentColor = Color.White.copy(0.4f),
alwaysShowLabel = true,
selected =currentRoute == item.route,
onClick = {
navController.navigate(item.route) {
// Pop up to the start destination of the graph to
// avoid building up a large stack of destinations
// on the back stack as users select items
navController.graph.startDestinationRoute?.let { route ->
popUpTo(route) {
saveState = true
// Avoid multiple copies of the same destination when
// reselecting the same item
launchSingleTop = true
// Restore state when reselecting a previously selected item
restoreState = true

listOf → holds the value for menu items

BottomNavigation → his will help us navigate to the Views from the Bottom Navigation Bar

NavController → manages app navigation

all other use case are mention in the method itself with double slash

Finall we created TopAppBar and BottomNavigationBar lets call it from our main screen or main activity.

fun BarkHomeContent() {
val navController = rememberNavController()
topBar = { TopBar() },
bottomBar = { BottomNavigationBar(navController) }
) {
fun Navigation(navController: NavHostController,navigateToProfile: (Puppy) -> Unit) {
NavHost(navController, startDestination = NavigationItem.Home.route) {
composable(NavigationItem.Home.route) {

composable(NavigationItem.Videos.route) {

composable(NavigationItem.Favourite.route) {

composable(NavigationItem.Profile.route) {


So You can write your own view code inside naviagtion function