Conditionally showing or hiding the bottomBar of a Scaffold, the available height for the Scaffold c...

# compose

[harry248]

Conditionally showing or hiding the bottomBar of a Scaffold, the available height for the Scaffold content seems to be stuck at the one that was first determined. Is there a way to force measuring again or a better solution to show/hide the bottomBar?

[Cicero]

Override, but I wouldn’t be sure it solves your issue.

[harry248]

You mean something like
if (showBottomNavigation) {
Scaffold(bottomBar = { ... }
} else { Scaffold() }
instead of
Scaffold(bottomBar={if(showBottomNavigation) { BottomNavigation() }}
?

That actually works but seems so wrong.

[Cicero]

Yea, I’ve been overriding it since I began working with it. I don’t really mind bending it to my needs.

I would just wrap this into a composable for practicality:

@Composable
fun AppScaffold(
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    content: @Composable (PaddingValues) -> Unit
) {
    Scaffold(
        topBar = {
            topBar.invoke()
        },
        bottomBar = {
            bottomBar.invoke()
        },
    ) {
        content.invoke(it)
    }
}

[harry248]

Ok thanks. I hope there will be a more obvious solution to this - surely not uncommon - problem in a future version.

[Zach Klippenstein (he/him) [MOD]]

Did you file an issue on the tracker? This workaround has some limitations, eg it will cause any composables inside the scaffold to lose their state (eg animation progress).

[Cicero]

Interesting, I’m using an animated composable inside of this sort of implementation

@Composable
fun ProcessTemplate(
    onClickNext: (() -> Unit),
    onClickBack: (() -> Unit),
    step: Int,
    title: String,
    maximumSteps: Float = 9f,
    enabled: Boolean,
    bottomButtonHeaderId: Int? = null,
    content: @Composable (PaddingValues) -> Unit
) {
    AppTopAndBottomBar(
        icon = painterResource(id = R.drawable.ic_back_arrow),
        title = title,
        onClickBack = onClickBack,
        enabled = enabled,
        onClick = onClickNext,
        bottomButtonHeaderId = bottomButtonHeaderId
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
            modifier = Modifier
                .fillMaxWidth()
                .background(AppColor.Smoke)
        ) {
            Spacer(modifier = Modifier.padding(top = gu3))
            ProgressBar(step = step, totalSteps = maximumSteps)
            Spacer(modifier = Modifier.padding(top = gu2_5))
            content.invoke(it)
        }
    }
}

Where ProgressBar has an animated progress bar and AppTopAndBottomBar is as the name describes an implementation of Scaffold that has some default implementation that relates to my general project usage

[Cicero]

And as I progress trough it, it animates and holds it’s state normally.

Did I misunderstood what you meant @Zach Klippenstein (he/him) [MOD]?

[Zach Klippenstein (he/him) [MOD]]

The animation runs smoothly while the scaffold is swapped out?

[Cicero]

I didn't tried hiding the bottom part of the scaffold and in this scenario the scaffold is never swapped out, the changes occur within

[Zach Klippenstein (he/him) [MOD]]

Right, i meant you’ll lose state when you swap scaffolds.

[Zach Klippenstein (he/him) [MOD]]

It’s also more expensive to swap scaffolds - anyway my point was that this is clearly not an ideal solution and it would be helpful to file a bug if one doesn’t already exist.

[harry248]

@Zach Klippenstein (he/him) [MOD] Filed one: https://issuetracker.google.com/issues/193047892