How to make the Floating Action Button of a BottomAppBar transparent?

Question

I am working on Jetpack Compose in an Android application. So I want to use BottomAppBar with a transparent cutoutShape. Never found any example, can someone help?

I want to make the white background around the FAB transparent.

The actual result (not the expected one) : A BottomAppBar without a transparent cutoutShape

The code I use :

val fabShape = RoundedCornerShape(50)
    Scaffold(
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                    navController.navigate(Routes.signUp)
                },
                shape = fabShape,
                backgroundColor = Color(0xFFFF8C00)
            ) {
                Icon(Icons.Filled.Add, "")
            }
        },
        isFloatingActionButtonDocked = true,
        floatingActionButtonPosition = FabPosition.Center,

        bottomBar = {
            BottomAppBar(
                cutoutShape = fabShape,
                content = {
                    BottomNavigation {
                        val navBackStackEntry by navController.currentBackStackEntryAsState()
                        val currentDestination = navBackStackEntry?.destination
                        items.forEachIndexed { index, screen ->
                                BottomNavigationItem(
                                   ...
                                )
                        }
                    }
                }
            )
        }
    ) { innerPadding ->
        internalView(innerPadding)
    }

Welcome to Stack Overflow! The cutout in the image you provided doesn't seem to be transparent, but it seems to be white? Is this what you meant? — Henry Twist, Jul 26 '21 at 22:05
Hi ! The image is the actual result I have, not the expected. But yeah, the white part around the FAB should be transparent, at the end. — Jérémie Guillot, Jul 26 '21 at 22:12
Ah I see! It would be useful if you could include a [mre]. This behaviour isn't intended, it should be naturally 'transparent' as you need it to be. — Henry Twist, Jul 26 '21 at 22:19
@JérémieGuillot remove the innerPadding to draw behind the bottomBar — Gabriele Mariotti, Jul 27 '21 at 06:52
Thank you! But yes, it is quite logical, thank you Gabriele. You can make an answer so that it makes you even more points! ☺️ — Jérémie Guillot, Jul 27 '21 at 07:01

Gabriele Mariotti · Accepted Answer · 2021-07-27T07:09:24.073

If you want to allow content to scroll behind bottomAppBar just remove the innerPadding that Scaffold passes to content:

Without applying innerPadding:

Scaffold(
    //...
    content = { innerPadding ->

        Column(
            Modifier
                .fillMaxWidth()
                .verticalScroll(rememberScrollState()),
            verticalArrangement = Arrangement.Bottom,
            horizontalAlignment = Alignment.CenterHorizontally) {
            Image(painterResource(id = R.drawable.xxx),"")
        }

    }
)

Applying innerPadding:

Scaffold(
    //...
    content = { innerPadding ->

        Column(
            Modifier
                .fillMaxWidth()
                .padding(innerPadding)
                .verticalScroll(rememberScrollState()),
            verticalArrangement = Arrangement.Bottom,
            horizontalAlignment = Alignment.CenterHorizontally) {
            Image(painterResource(id = R.drawable.xxx),"")
        }

    }
)

How to make the Floating Action Button of a BottomAppBar transparent?

1 Answers1