https://kotlinlang.org logo
#compose
Title
# compose
h

harry248

07/08/2021, 7:45 AM
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?
c

Cicero

07/08/2021, 7:48 AM
Override, but I wouldn’t be sure it solves your issue.
h

harry248

07/08/2021, 8:17 AM
You mean something like
if (showBottomNavigation) {
Scaffold(bottomBar = { ... }
} else { Scaffold() }
instead of
Scaffold(bottomBar={if(showBottomNavigation) { BottomNavigation() }}
? That actually works but seems so wrong.
c

Cicero

07/08/2021, 8:29 AM
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:
Copy code
@Composable
fun AppScaffold(
    topBar: @Composable () -> Unit = {},
    bottomBar: @Composable () -> Unit = {},
    content: @Composable (PaddingValues) -> Unit
) {
    Scaffold(
        topBar = {
            topBar.invoke()
        },
        bottomBar = {
            bottomBar.invoke()
        },
    ) {
        content.invoke(it)
    }
}
h

harry248

07/08/2021, 8:43 AM
Ok thanks. I hope there will be a more obvious solution to this - surely not uncommon - problem in a future version.
👌🏽 1
z

Zach Klippenstein (he/him) [MOD]

07/08/2021, 2:30 PM
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).
🤔 1
c

Cicero

07/08/2021, 2:34 PM
Interesting, I’m using an animated composable inside of this sort of implementation
Copy code
@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
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]?
z

Zach Klippenstein (he/him) [MOD]

07/08/2021, 2:45 PM
The animation runs smoothly while the scaffold is swapped out?
c

Cicero

07/08/2021, 2:59 PM
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
z

Zach Klippenstein (he/him) [MOD]

07/08/2021, 3:10 PM
Right, i meant you’ll lose state when you swap scaffolds.
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.
h

harry248

07/08/2021, 3:27 PM
@Zach Klippenstein (he/him) [MOD] Filed one: https://issuetracker.google.com/issues/193047892
5 Views