3

I am trying to make the floating action button move up to make room for the Snackbar to appear, which is the normal behavior when using android xml UI files.

It looks like its not implemented in Scafford.

Please find below my code so far on Compose for desktop (But it should be similar on Android) :

fun main() = Window(
    title = "Box Demo",
    size = IntSize(600, 500)
) {

    MaterialTheme {

        val snackbarHostState = remember { SnackbarHostState() }

        val scaffoldState = rememberScaffoldState()

        Scaffold(
            scaffoldState = scaffoldState,

            snackbarHost = {scaffoldState.snackbarHostState },

            floatingActionButtonPosition = FabPosition.End,

            floatingActionButton = { FloatingActionButton(onClick = {}) { Text("+") } },

            topBar = { TopAppBar(title = { Text("TopAppBar") }) },

            bottomBar = { BottomAppBar() { Text("BottomAppBar") } }

        ) {
            Column(
                modifier = Modifier.fillMaxSize()
            ) {

                Button(
                    modifier = Modifier.padding(top = 20.dp, start = 20.dp),
                    onClick = {
                        GlobalScope.launch {
                            snackbarHostState.showSnackbar(
                                message = "Hey I am a snackbar",
                                actionLabel = "Hide",
                                duration = SnackbarDuration.Short
                            )
                        }
                    }
                ) {
                    Text("Show snackbar")
                }

                SnackbarHost(
                    modifier = Modifier.padding(top = 180.dp),
                    hostState = snackbarHostState,
                    snackbar = {
                        Snackbar(
                            action = {
                                TextButton(
                                    onClick = {
                                        snackbarHostState.currentSnackbarData?.dismiss()
                                    }
                                ) {
                                    Text(
                                        text = snackbarHostState.currentSnackbarData?.actionLabel ?: "",
                                        style = TextStyle(color = Color.White)
                                    )
                                }
                            }
                        ) {
                            Text(snackbarHostState.currentSnackbarData?.message ?: "")
                        }
                    }
                )
            }
        }
    }
}

my config:

plugins {
    kotlin("jvm") version "1.4.21"
    id("org.jetbrains.compose") version "0.2.0-build132"
}
Phil Dukhov
  • 67,741
  • 15
  • 184
  • 220
u2gilles
  • 6,888
  • 7
  • 51
  • 75

1 Answers1

7

I was asking the same question in the slack channel of compose (kotlinlang.slack.com, https://kotlinlang.slack.com/archives/CJLTWPH7S/p1627831971210600).

Here is the answer of Ian Lak, a Google employee:

This is specifically one of the "Don't" examples from the Material guidelines: https://material.io/components/snackbars#behavior

Making sure visual elements don't move out from underneath (say, when users are about to tap the FAB) is one of the key points to making a predictable UI

(slightly modified as there were some wording issues)

Daniel Weidensdörfer
  • 391
  • 4
  • 14