I have created a bottom bar like below code snippet and integrate it into Scaffold in jetpack compose but when app starts first time it take a time 2/3 second after rendering
setContent {
val navController = rememberNavController()
var context = LocalContext.current
val scaffoldState = rememberScaffoldState()
val coroutineScope = rememberCoroutineScope()
val systemUiController = rememberSystemUiController()
val sheetState = rememberModalBottomSheetState(
initialValue = ModalBottomSheetValue.Hidden,
confirmStateChange = { it != ModalBottomSheetValue.HalfExpanded }
)
var showMenu by remember {
mutableStateOf(false)
}
ModalBottomSheetLayout(
sheetState = sheetState,
sheetContent = { BottomSheet() },
modifier = Modifier
.fillMaxSize(),
sheetShape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp)
) {
TravelApplicationDemoTheme {
// A surface container using the 'background' color from the theme
systemUiController.setStatusBarColor(
color = Color(0xFF16C197),
darkIcons = false
) { requestedColor ->
Color.Gray
// TODO: return a darkened color to be used when the system doesn't
// natively support dark icons
}
Scaffold(
scaffoldState = scaffoldState,
bottomBar = { BottomNavigationBar(navController) },
topBar = {
TopAppBar(
backgroundColor = Color(0xFF16C197),
title = {
Text(
text = "Travel Application",
style = TextStyle(
color = Color.White,
fontSize = 20.sp,
fontWeight = FontWeight.Bold
)
)
},
navigationIcon = {
IconButton(
onClick = {
coroutineScope.launch {
scaffoldState.drawerState.open()
}
},
) {
Icon(
Icons.Rounded.Menu,
contentDescription = "",
tint = Color.White
)
}
},
actions = {
IconButton(onClick = { /*TODO*/ }) {
Icon(
Icons.Rounded.Send,
contentDescription = "",
tint = Color.White
)
}
IconButton(onClick = { showMenu = !showMenu }) {
Icon(
Icons.Rounded.MoreVert,
contentDescription = "",
tint = Color.White,
)
}
DropdownMenu(
expanded = showMenu,
onDismissRequest = { showMenu = false }
) {
DropdownMenuItem(onClick = { /*TODO*/ }) {
Row() {
Icon(
Icons.Rounded.Refresh,
contentDescription = "",
tint = Color.Black
)
Spacer(modifier = Modifier.width(10.dp))
Text(text = "Refresh")
}
}
DropdownMenuItem(onClick = { /*TODO*/ }) {
Row() {
Icon(
Icons.Rounded.Refresh,
contentDescription = "",
tint = Color.Black
)
Spacer(modifier = Modifier.width(10.dp))
Text(text = "Reload")
}
}
}
}
)
},
drawerContent = {
DrawerContent(
onOpenTrendingResortScreen = {
coroutineScope.launch {
scaffoldState.drawerState.close()
}
navController.navigate("home/trendingresorts")
}
)
}
) {
it.calculateBottomPadding()
NavHost(
navController = navController,
startDestination = BottomNavItems.Home.route
) {
composable(BottomNavItems.Home.route) { backStack ->
var name = backStack.savedStateHandle.get<String>("key")
print("name is ${name}")
Surface(
modifier = Modifier.fillMaxSize(),
color = MaterialTheme.colors.background
) {
var time = measureTimeMillis {
// Creating a Bottom Sheet
MainScreenContent(
onSettingScreen = {
navController.navigate(HomeScreen.DiscoverScreen.route) {
/* popUpTo(BottomNavItems.Home.route) {
inclusive = true
}*/
}
}
)
/* Column(modifier = Modifier.fillMaxSize()){
Text(text = "Sharjeel Ahmad Siddiqui")
}*/
}
println("time taken ${time}")
}
}
composable(BottomNavItems.Setting.route) {
SettingScreen()
}
composable(BottomNavItems.CenterButton.route) {
//this will handle a system back press button
BackHandler(sheetState.isVisible) {
coroutineScope.launch {
sheetState.hide()
}
}
CenterButtonScreen(
onOpenBottomSheet = {
coroutineScope.launch {
if (sheetState.isVisible) sheetState.hide()
else sheetState.show()
}
}
)
}
composable(BottomNavItems.Contact.route) {
Column(
modifier = Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
ContactScreen()
// toast("Practice toast")
}
}
composable(BottomNavItems.Profile.route) {
ProfileScreen()
}
navigation(
startDestination = "home/testscreen1",
route = HomeScreen.DiscoverScreen.route
) {
composable("home/testscreen1") {
DiscoverScreen(
/* onChangeScreen = {
// navController.navigate("home/testscreen2")
navController.previousBackStackEntry?.savedStateHandle?.set("key","sharjeel")
navController.popBackStack()
}*/
)
}
composable("home/testscreen2") {
Column(modifier = Modifier.fillMaxSize()) {
Text(text = "dasasd")
}
}
}
composable("home/trendingresorts") {
TrendingScreenResort()
}
}
}
}
}
}
This is a composable for bottom navigation bar , issue I face is that it is render slowly first time when app open like Top App Bar and Bottom Bar load first and after 2 /3 seconds all other content load
Note : there is no delay() fun call in my code I've already checked...
@Composable
fun BottomNavigationBar(navController: NavController) {
val items = listOf(
BottomNavItems.Home,
BottomNavItems.Setting,
BottomNavItems.CenterButton,
BottomNavItems.Contact,
BottomNavItems.Profile,
)
//will be consider after sorting glt
Box(
modifier = Modifier
.wrapContentHeight()
.background(color = Color.Transparent)
.padding(10.dp)
)
{
BottomNavigation(
backgroundColor = Color.DarkGray,
contentColor = Color.White,
modifier = Modifier.clip(RoundedCornerShape(100f))
) {
val navBackStackEntry by navController.currentBackStackEntryAsState()
val currentRoute = navBackStackEntry?.destination?.route
items.forEach { item ->
if (currentRoute != null) {
BottomNavigationItem(
icon = {
Icon(
painterResource(id = item.icon),
contentDescription = item.title,
modifier = Modifier.size(24.dp)
)
},
label = { Text(text = item.title, style = TextStyle(fontSize = 10.sp)) },
selectedContentColor = Color.White,
unselectedContentColor = Color.White.copy(0.4f),
alwaysShowLabel = true,
selected = currentRoute.contains(item.route),// == 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
// to remove in between all screen
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
}
}
)
}
}
}
Image(
modifier = Modifier
.height(55.dp)
.width(740.dp)
.offset(y = -8.dp),
painter = painterResource(id = R.drawable.centerbtn),
contentDescription = ""
)
}
}
VIDEO ATTACHED FOR REFERENCE
