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"?

score 3 · Accepted Answer · answered Nov 22 '22 at 17:08

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
        )
    }

score 1 · Answer 2 · answered Nov 22 '22 at 17:31

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.

Don't they look the same but less of hassle when copying/cloning other parameters? — z.g.y, Nov 22 '22 at 17:37

How to specify Arrangement.SpaceEvenly in a BottomAppBar?

2 Answers2