Transparent background for TopAppBar in BottomSheetScaffold in Android Compose

user_1013139 0
Viewed 1137

How to make TopAppBar in a BottomSheetScaffold transparent? I want the hamburger icon and the name of the App overlayed over the map beneath. Setting backgroundColor to transparent with any alpha value is not working. Using compose version 1.0.5.

enter image description here

Here is the scaffold code:

BottomSheetScaffold(
    topBar = {
        TopAppBar(
            title = { Text("App") },
            backgroundColor = Color.Transparent.copy(alpha = 0.1f),
            navigationIcon = {
                IconButton(onClick = {
                    scope.launch {
                        bottomSheetScaffoldState.drawerState.apply {
                            if (isClosed) open() else close()
                        }
                    }
                }) {
                    Icon(Icons.Default.Menu, "Open/Close menu")
                }
            }
        )
    },
    scaffoldState = bottomSheetScaffoldState,
    drawerGesturesEnabled = false,
    drawerContent = {
        DrawerContent(actions) {
            scope.launch {
                bottomSheetScaffoldState.drawerState.apply {
                    close()
                }
            }
        }
    },
    floatingActionButton = {
        FloatingActionButton(
            onClick = {
            },
            backgroundColor = MaterialTheme.colors.secondary,
            modifier = Modifier.padding(bottom = 100.dp),
        ) {
            Icon(Icons.Filled.Add, contentDescription = "Add")
        }
    },
    sheetContent = {
    },
    sheetPeekHeight = 0.dp,
) {
    MapScreen(viewModel = viewModel)
}
android-jetpack android-jetpack-compose android
1 Answers

Don't put the appbar in scaffold. Put it AFTER your map screen composable and wrap both of them with Box.

    BottomSheetScaffold(
        scaffoldState = bottomSheetScaffoldState,
        drawerGesturesEnabled = false,
        drawerContent = {
            DrawerContent(actions) {
                scope.launch {
                    bottomSheetScaffoldState.drawerState.apply {
                        close()
                    }
                }
            }
        },
        floatingActionButton = {
            FloatingActionButton(
                onClick = {
                },
                backgroundColor = MaterialTheme.colors.secondary,
                modifier = Modifier.padding(bottom = 100.dp),
            ) {
                Icon(Icons.Filled.Add, contentDescription = "Add")
            }
        },
        sheetContent = {
        },
        sheetPeekHeight = 0.dp,
    ) {
        Box {
            MapScreen(viewModel = viewModel)
            TopAppBar(
                title = { Text("App") },
                backgroundColor = Color.Transparent.copy(alpha = 0.1f),
                navigationIcon = {
                    IconButton(onClick = {
                        scope.launch {
                            bottomSheetScaffoldState.drawerState.apply {
                                if (isClosed) open() else close()
                            }
                        }
                    }) {
                        Icon(Icons.Default.Menu, "Open/Close menu")
                    }
                }
            )
        }
    }
user_75112760
Related