Hi guys, I've a design question. I want to position a FAB and I don't know what way is the most suit...

# compose

[Tobias Gronbach]

Hi guys, I've a design question. I want to position a FAB and I don't know what way is the most suitable for that. Code in Thread ...

[Tobias Gronbach]

I have a MainScreen that contains a Scaffold. I load the different screens inside the Scaffold content-block. So far, so good.
Now I have a AddItemsScreen with an "Add"-Fab. For I load all screens inside the scaffold I don't have unique scaffold for each screen.

Right now I position a fab inside such a screen as follows:

Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.BottomEnd
    ) {

        FloatingActionButton(
            modifier = Modifier.padding(10.dp, 10.dp),
            onClick = {
                // do something
            },
        ) {
            Icon(
                imageVector = Icons.Default.Check,
                contentDescription = null,             
            )
        }
    }

It works but it's seems somehow a dirty approach and leads to some problems. In my case a have a few TextFields. When the keyboard opens the fab is pushed up as well,
and I don't want that. Hope you guys can help me with some ideas!

[andrew]

There's a slot in the scaffold itself for this

[andrew]

Scaffold(
    floatingActionButton = {
        FloatingActionButton(onClick = { /* ... */ }) {
            /* FAB content */
        }
    }
) {
    // Screen content
}

[andrew]

From the docs: https://developer.android.com/jetpack/compose/layouts/material#fab

[Tobias Gronbach]

Hi Andrew, thanks for your answer! I'm aware of that but I'm not sure how to handle that in my screen-composables. Of course it would be easy to handle it if all my logic was in MainScreenComposable. I could check via when-statement wich is the current-screen and load the appropriate icon and onclick-action but how would I pass this event to the appropriate screens viewmodel?