Is there a way to achieve this result kotlinlang #compose

henrikhorbovyi

06/04/2020, 11:54 PM

Is there a way to achieve this result:

Without doing:

The big problem is that

Row

BottomAppBar.content

Is there a problem with that? 🤔

06/04/2020, 11:57 PM

don't use images to share code. it makes it much harder to read

henrikhorbovyi

06/04/2020, 11:59 PM

Really? 😄 Sorry dude, cause I bug sometimes when I see a bunch of code in plain text here in slack

But if you prefer

@Composable
fun BottomAppBarSample() {
    Scaffold(
        floatingActionButtonPosition = Scaffold.FabPosition.CenterDocked,
        floatingActionButton = {
            FloatingActionButton(
                onClick = {},
                icon = { Icon(asset = Icons.Outlined.Check, tint = Color.White) }
            )
        },
        bottomAppBar = { fabConfiguration ->
            BottomAppBar(
                cutoutShape = CircleShape,
                fabConfiguration = fabConfiguration
            ) {
                Row(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalArrangement = Arrangement.SpaceBetween
                ) {
                    IconButton(icon = { Icon(asset = <http://Icons.Outlined.Menu|Icons.Outlined.Menu>) }, onClick = {})
                    IconButton(icon = { Icon(asset = Icons.Outlined.Notifications) }, onClick = {})
                }
            }
        }
    ) {}
}

That's what I did to achieve that result... do you thing is there a problem?

Louis Pullen-Freilich [G]

06/05/2020, 12:02 AM

There's nothing wrong with that 🙂 But as you can see from your screenshot, BottomAppBar`s content is in a

RowScope

, because its internal layout is a Row. So you can actually remove your row (saving a layout and some code verbosity), and just write:

BottomAppBar(
    cutoutShape = CircleShape,
    fabConfiguration = fabConfiguration
) {
    IconButton(...)
    Spacer(Modifier.weight(1f, true))
    IconButton(...)
}

Spacer

henrikhorbovyi

06/05/2020, 1:15 PM

Yeah... I was thinking about this part

cause I saw the RowScope

Well... It worked, and it's better 😄 Thank you @Louis Pullen-Freilich [G]