Hi all, when using a `Scaffold` how can we get the `TopAppBar` and `BottomAppBar` to be transpare...

# compose

[brabo-hi]

Hi all, when using a Scaffold how can we get the TopAppBar and BottomAppBar to be transparent and have the body background visible top and bottom?

[Colton Idle]

Can you explain your use case or do you have a design you can show?

[brabo-hi]

i have a video that needs to display full screen, however i have a header and footer items that need to show on top

[Colton Idle]

Do you have any code to show?

[brabo-hi]

@ExperimentalMaterial3Api
@Composable
fun MyComponent() {
    Scaffold(
        modifier = Modifier,
        topBar = {
            CenterAlignedTopAppBar(
                title = {
                    Text(text = "Title", style = MaterialTheme.typography.titleLarge)
                },
                actions = {
                    IconButton(
                        onClick = {},
                        content = { Icon(Icons.Default.Paid, contentDescription = null, tint = Color.LightGray) }
                    )
                }
            )
        },
        bottomBar = {
            Icon(Icons.Filled.Favorite, contentDescription = null)
            Icon(Icons.Filled.AccessTime, contentDescription = null)
        }
    ) {
        Surface(modifier = Modifier.fillMaxSize(), color = Color.Transparent) {
            AndroidView(
                factory = { context -> videoViewFull },
                update = {  }
            )
        }
    }
}

[brabo-hi]

i would like to have the custom view (which is a full image/video) to cover to top and bottom bar