I'm currently making a bottom bar, I think I've done everything right but it's not working properly. the background is completely black and the fab button appears in the center of the screen and the other buttons are not visible. What could be the problem here? Have you ever faced such a problem? Can you help me ?
I want to do like this -> https://www.mobiler.dev/post/jetpack-compose-ile-bottom-navigation-tasarlamak
hear is my code :
BottomNavItemProvider.kt
class BottomNavItemProvider private constructor() {
companion object {
fun provideBottomNavItemList() = listOf(
BottomNavItem(Screen.SignUpStartScreen.route, "Home", Icons.Outlined.Home),
BottomNavItem(Screen.SignUpFinishScreen.route, "Chat", Icons.Outlined.Notifications)
)
}
}
FancyBottomNavigation.kt
@ExperimentalAnimationApi
@Composable
fun FancyBottomNavigation(
navController: NavController,
bottomNavItemList: List<BottomNavItem>,
modifier: Modifier = Modifier,
bottomNavBackgroundColor: Color = if (isSystemInDarkTheme()) Color.Black else Color.White,
bottomNavItemColor: Color = if (isSystemInDarkTheme()) Color.White else Color.Black,
clicks: Pair<(BottomNavItem) -> Unit, () -> Unit>
) {
val backStackEntry = navController.currentBackStackEntryAsState()
val currentRoute = backStackEntry.value?.destination?.route
CompositionLocalProvider(LocalRippleTheme provides NoRippleTheme) {
Box(
modifier = Modifier
.fillMaxWidth(),
contentAlignment = Alignment.BottomCenter
) {
BottomNavigation(
modifier = modifier
.fillMaxWidth(),
backgroundColor = bottomNavBackgroundColor,
elevation = 5.dp
) {
bottomNavItemList.forEach { item ->
val isItemSelected = item.route == currentRoute
FancyBottomNavigationItem(
selectedItem = item,
isItemSelected = isItemSelected,
selectedItemColor = DefaultDYTColor,
unSelectedItemColor = bottomNavItemColor,
navItemOnClick = clicks.first
)
}
}
FancyCenterItem()
}
}
}
FancyBottomNavigationItem.kt
@ExperimentalAnimationApi
@Composable
fun RowScope.FancyBottomNavigationItem(
selectedItem: BottomNavItem,
isItemSelected: Boolean,
selectedItemColor: Color,
unSelectedItemColor: Color,
navItemOnClick: (BottomNavItem) -> Unit,
) {
BottomNavigationItem(
selected = isItemSelected,
onClick = { navItemOnClick(selectedItem) },
selectedContentColor = selectedItemColor,
unselectedContentColor = unSelectedItemColor,
icon = {
Row(
verticalAlignment = Alignment.CenterVertically,
horizontalArrangement = Arrangement.spacedBy(SMALL_GAP),
modifier = if (isItemSelected) Modifier
.background(Color.Transparent.copy(alpha = 0.05f), shape = CircleShape)
.padding(MEDIUM_PADDING) else Modifier
) {
Icon(
imageVector = selectedItem.icon,
contentDescription = selectedItem.title
)
AnimatedVisibility(visible = isItemSelected) {
Text(
text = selectedItem.title,
textAlign = TextAlign.Center
)
}
}
}
)
}
FancyCenterItem.kt
@OptIn(ExperimentalMaterialApi::class)
@Composable
fun FancyCenterItem() {
val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
bottomSheetState =
BottomSheetState(BottomSheetValue.Collapsed)
)
// Declaring Coroutine scope
val coroutineScope = rememberCoroutineScope()
// Creating a Bottom Sheet
BottomSheetScaffold(
scaffoldState = bottomSheetScaffoldState,
sheetContent = {
Box(
Modifier
.fillMaxWidth()
.height(200.dp)
.background(Color(0XFF0F9D58))) {
Column(
Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Text(text = "Hello Geek!", fontSize = 20.sp, color = Color.White)
}
}
},
sheetPeekHeight = 0.dp
) {}
Column(
Modifier.fillMaxSize(),
verticalArrangement = Arrangement.Center,
horizontalAlignment = Alignment.CenterHorizontally
) {
Image(
painter = painterResource(id = R.drawable.ic_bottom_bar_fab),
contentDescription ="fab",
modifier = Modifier.clickable {
coroutineScope.launch {
if (bottomSheetScaffoldState.bottomSheetState.isCollapsed){
bottomSheetScaffoldState.bottomSheetState.expand()
}else{
bottomSheetScaffoldState.bottomSheetState.collapse()
}
}
})
}
}
Ripple.kt
object NoRippleTheme : RippleTheme {
@Composable
override fun defaultColor() = Color.Unspecified
@Composable
override fun rippleAlpha(): RippleAlpha = RippleAlpha(0.0f, 0.0f, 0.0f, 0.0f)
}
DashBoard.kt
@OptIn(ExperimentalAnimationApi::class)
@Composable
fun DashBoard(navController: NavController) {
val bottomNavItemList = provideBottomNavItemList()
Scaffold(
bottomBar = {
FancyBottomNavigation(
navController = navController,
bottomNavItemList = bottomNavItemList,
modifier = Modifier,
clicks = Pair(
first = { bottomNavItem ->
navController.navigate(bottomNavItem.route)
},
second = {
Log.i("MainActivity", "Center Item Clicked!")
}
)
)
}) {
}
Text(text = "DASHBOARD")
}
When I want to show it in dashBoard.kt for trial purposes, the screenshot looks like this
Let me explain briefly what I want to do. In the bottom bar, there will be items like the link I shared, for example home, setting etc. I want a fab (floating action button) in the middle of these items. If the user clicks fab, the bottom sheet will open. In the screenshot I shared right now, the blue + button in the center is my floating action button (fab), when it is clicked, a bottom sheet opens from the bottom up, but it looks very bad and does not work properly. I hope I explained my problem properly.
