android compose bottomnavigation item is hide

Question

If I add floating action button to the bottom bar in bottomnavigation as extended, the menu will be covered by location. If I'm set up in the center, you can see both menus. But if I leave it as end, you can only see one menu. When I set it to end, I want to see both menus.

Here is my code

Scaffold(
        topBar = {
            if (menu.name != null) {
                TopAppBarCompose(title = menu.name)
            }
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                val route = Screen.BarcodeScan.route
                onNavigateToBarcodeScreen(route)
                },
                shape = RoundedCornerShape(50),
                backgroundColor = MaterialTheme.colors.primary
            ) {
                Row(
                    verticalAlignment = Alignment.CenterVertically,
                    horizontalArrangement = Arrangement.Center
                ) {
                    Icon(
                        imageVector = Icons.Default.QrCodeScanner,
                        contentDescription = "BarcodeScan",
                        modifier = Modifier.padding(start = 30.dp, top = 20.dp, bottom = 20.dp, end = 5.dp)
                    )
                    Text(
                        text = "Scan",
                        fontSize = 24.sp,
                        fontWeight = FontWeight.Bold,
                        modifier = Modifier.padding(start = 5.dp, top = 20.dp, bottom = 20.dp, end = 30.dp)
                    )
                }
            }
        },
        isFloatingActionButtonDocked = true,
        floatingActionButtonPosition = FabPosition.End,
        bottomBar = {
            BottomAppBar(
                cutoutShape = RoundedCornerShape(50),
                content = {
                    BottomNavigation {
                        BottomNavigationItem(
                            selected = selectedItem.value == "send",
                            onClick = {
                                content.value = "Send Screen"
                                selectedItem.value = "send"
                            },
                            icon = {
                                Icon(Icons.Filled.SwapVert, contentDescription = "send")
                            },
                            label = { Text(text = "send") },
                            alwaysShowLabel = false
                        )

                        BottomNavigationItem(
                            selected = selectedItem.value == "input",
                            onClick = {
                                content.value = "input Screen"
                                selectedItem.value = "input"
                            },
                            icon = {
                                Icon(Icons.Filled.Create, contentDescription = "input")
                            },
                            label = { Text(text = "Input") },
                            alwaysShowLabel = false
                        )
                    }
                }
            )
        }
    )

When I set in center, I can see two menu

But I set extened fab button to end, It's going to be as follows.

I want to set the place of the extended fab button to end and see two menus. Is there a way to change the place?

ps.The image was simply uploaded to help understand.

Answer 1

I think all you need is to just offset the FAB using the offset modifier. Here's an example:

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomEnd) {
    var selectedItem by remember { mutableStateOf(0) }
    val items = listOf("Songs", "Artists", "Playlists")

    BottomNavigation {
        items.forEachIndexed { index, item ->
            BottomNavigationItem(
                icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                label = { Text(item) },
                selected = selectedItem == index,
                onClick = { selectedItem = index }
            )
        }
    }

    ExtendedFloatingActionButton(
        modifier = Modifier.offset(x = -10.dp,  y = -70.dp),
        icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
        text = { Text("ADD TO BASKET") },
        onClick = { /*do something*/ }
    )
}

---

FAB inside a scaffold

val scaffoldState = rememberScaffoldState()
val scope = rememberCoroutineScope()

var selectedItem by remember { mutableStateOf(0) }
val items = listOf("Songs", "Artists", "Playlists")

Scaffold(
    scaffoldState = scaffoldState,
    floatingActionButtonPosition = FabPosition.End,
    floatingActionButton = {
        ExtendedFloatingActionButton(
            modifier = Modifier.offset(x = -10.dp, y = -70.dp),
            icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
            text = { Text("ADD TO BASKET") },
            onClick = { /*do something*/ }
        )
    },
    content = { innerPadding ->
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.BottomStart) {
            BottomNavigation {
                items.forEachIndexed { index, item ->
                    BottomNavigationItem(
                        icon = { Icon(Icons.Filled.Favorite, contentDescription = null) },
                        label = { Text(item) },
                        selected = selectedItem == index,
                        onClick = { selectedItem = index }
                    )
                }
            }
        }
    }
)