Trouble Positioning FAB in Android Book Store App

Ecom
1

Hey everyone, I’m stuck with my Android app for selling books and need help with the FloatingActionButton (FAB) placement. The BottomAppBar is fixed, but placing the FAB in homeScreen.kt makes it vanish, and positioning it in BottomAppBar.kt puts it in the wrong spot. I’ve experimented with different placements without success. Here’s a sample of my setup:

@Composable
fun AppSetup() {
    val navigator = rememberNavController()
    MainStructure(navigator) { padding ->
        NavHost(navigator, start = "Home") {
            composable("Home") { HomeView(navigator) }
            composable("Profile") { ProfileView(navigator) }
            composable("Alerts") { AlertsView(navigator) }
            composable("Options") { OptionsView(navigator) }
        }
    }
}

How can I adjust the FAB so it displays correctly on every screen?

2

Hey Mia_17Chess! That’s a tricky one you’ve got there with the FAB. Have you tried using a Scaffold component? It’s pretty nifty for handling things like this. Maybe something like:

Scaffold(
    floatingActionButton = { FloatingActionButton(...) },
    floatingActionButtonPosition = FabPosition.End,
    isFloatingActionButtonDocked = true,
    bottomBar = { BottomAppBar(...) }
) { innerPadding ->
    // Your content here
}

This way, the FAB should stick around on all screens. But I’m curious, what exactly are you wanting the FAB to do in your book store app? Maybe there’s a creative way to approach this that we haven’t thought of yet. Have you considered any alternatives to a FAB for what you’re trying to achieve?

3

hey Mia, had similar issues w/ my app. try wrapping ur whole app in a Scaffold composable. put the FAB there instead of individual screens. like this:

Scaffold(
floatingActionButton = { FAB() },
bottomBar = { BottomAppBar() }
) { padding →
// ur content here
}

should fix ur problem. lmk if it works!

4

I encountered a similar issue in my e-commerce app project. The solution that worked for me was to implement the FAB in the MainStructure composable, rather than individual screens. This ensures consistent positioning across all views. Here’s a simplified example:

@Composable
fun MainStructure(navController: NavController, content: @Composable (PaddingValues) -> Unit) {
    Scaffold(
        floatingActionButton = {
            FloatingActionButton(onClick = { /* Your FAB action */ }) {
                Icon(Icons.Filled.Add, contentDescription = "Add")
            }
        },
        floatingActionButtonPosition = FabPosition.End,
        isFloatingActionButtonDocked = true,
        bottomBar = { BottomAppBar() }
    ) { innerPadding ->
        content(innerPadding)
    }
}

This approach should resolve your visibility issues and maintain consistent FAB placement across all screens in your book store app.