How to specify Arrangement.SpaceEvenly in a BottomAppBar?

Question

This is the prototype of Row:

@Composable
public inline fun Row(
    modifier: Modifier = Modifier,
    horizontalArrangement: Arrangement.Horizontal = Arrangement.Start,
    verticalAlignment: Alignment.Vertical = Alignment.Top,
    content: @Composable() (RowScope.() -> Unit)
): Unit

And this is BottomAppBar:

@Composable
@ComposableInferredTarget
public fun BottomAppBar(
    modifier: Modifier,
    containerColor: Color,
    contentColor: Color,
    tonalElevation: Dp,
    contentPadding: PaddingValues,
    windowInsets: WindowInsets,
    content: @Composable() (RowScope.() -> Unit)
): Unit

The content of BottomAppBar is in a RowScope. And a Row knows about the horizontalArrangement and I would like to set it to Arrangement.SpaceEvenly. But BottomAppBar has no argument to do so. How can I set the arrangement in the bottom app bar to "space evenly"?

Answer 1

You can't specify the horizontalArrangement. The content of BottomAppBar is in a RowScope but the Row is defined internally:

@Composable
fun BottomAppBar(
    //...
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        //...
        modifier = modifier
    ) {
        Row(
            Modifier
                .fillMaxWidth()
                .windowInsetsPadding(windowInsets)
                .height(BottomAppBarTokens.ContainerHeight)
                .padding(contentPadding),
            horizontalArrangement = Arrangement.Start,
            verticalAlignment = Alignment.CenterVertically,
            content = content
        )
    }

Answer 2

Fortunately the code is small enough to clone it.

@Composable
fun MyBottomAppBar(
    modifier: Modifier = Modifier,
    containerColor: Color = BottomAppBarDefaults.containerColor,
    contentColor: Color = contentColorFor(containerColor),
    tonalElevation: Dp = BottomAppBarDefaults.ContainerElevation,
    contentPadding: PaddingValues = BottomAppBarDefaults.ContentPadding,
    windowInsets: WindowInsets = BottomAppBarDefaults.windowInsets,
    content: @Composable RowScope.() -> Unit
) {
    Surface(
        color = containerColor,
        contentColor = contentColor,
        tonalElevation = tonalElevation,
        //shape = ShapeKeyTokens.CornerNone,
        modifier = modifier
    ) {
        Row(
            Modifier
                .fillMaxWidth()
                .windowInsetsPadding(windowInsets)
                .height(80.0.dp)
                .padding(contentPadding),
            horizontalArrangement = Arrangement.SpaceEvenly,
            verticalAlignment = Alignment.CenterVertically,
            content = content
        )
    }
}

Shape does not seem to be necessary.

Answer 3

Wrapping the content around with a row can solve this issue.

@Composable
fun MyBottomAppBar() {
    BottomAppBar {
        Row(
            modifier = Modifier.fillMaxWidth(),
            horizontalArrangement = Arrangement.SpaceEvenly
        ) {
            // content goes here
        }
    }
}