How to create Custom BottomNavigationBar similar to NavigationRail but horizontally in Jetpack Compose

Question

I am trying to create a custom bottom navigation bar which looks similar to a Windows 7 bottom app bar or task bar. Something similar to navigation-rail but its horizontal.

All the bottom navigation items should lay from start and spacing between them should be configurable like say 16.dp

attaching the image what I am trying to implement

I have tried to create a custom RowScope and attach it to BottomBar but its not working

@Composable
fun CustomRowScope(
    modifier: Modifier = Modifier,
    content: @Composable RowScope.() -> Unit
) {
    // Create a Row with the custom RowScope.
    Row(
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        modifier = modifier.padding(16.dp),
        content = content
    )
}

@Composable
fun MyNavigationBar(
    modifier: Modifier,
//    state: MutableState<Boolean>,
    //navController: NavController,
    onNavItemClick: (route: String) -> Unit
) {
    //val backStackEntry by navController.currentBackStackEntryAsState()
    //val currentRoute = backStackEntry?.destinatNavigationBarion?.route

    NavigationBar(
        modifier = modifier,
        content = {
            CustomRowScope(modifier = Modifier) {

                bottomNavItems.forEach { item ->
                    //val selected = item.route == backStackEntry?.destination?.route

                    NavigationBarItem(
                        selected = false,//selected,
                        onClick = { onNavItemClick(item.route) },

                        icon = {
                            Icon(
                                imageVector = item.icon,
                                contentDescription = "${item.name} Icon",
                            )
                        }
                    )
                }
            }
        }
    )
} 

Answer 1

There is a BottomAppBar component available in Jetpack Compose which helps you to accomplish your task. Here is an example of how you may use it:

BottomAppBar(
    actions = {
        Row {
            IconButton(onClick = {}) { Icon(Icons.Default.Menu, "Menu") }
            IconButton(onClick = {}) { Icon(Icons.Default.Search, "Search") }
        }
    },
    floatingActionButton = {
        FloatingActionButton(onClick = {}) { Icon(Icons.Default.Add, "Add") }
    },
)

Here is what you'll get:

If you want to set custom height and custom spacing between items, you can do it like this:

BottomAppBar(
    modifier = Modifier.height(24.dp),
    actions = {
        Row(horizontalArrangement = Arrangement.spacedBy(32.dp)) {
            Icon(Icons.Default.Menu, "Menu")
            Icon(Icons.Default.Search, "Search")
            Icon(Icons.Default.Phone, "Phone")
        }
    },
)

Result: