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

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

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

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.

So You can write your own view code inside naviagtion function



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store