Hello guys I am using a Layout composable to implement Anima

Question

Hello guys I am using a Layout composable to implement Animated drawer but whenever I set the background of the Layout to Transparent it become Black instead ```Layout modifier = modifier background Colors Transparent content = drawerContents content ``` But if i provide other colors they are applied How do i work around this Thanks

Travis · Answer

You could just not include a background to the layout when the color would be transparent right I m assuming your colors are variable so this would look something like ``` Composable fun MyLayout drawerContents Composable gt Unit modifier Modifier = Modifier backgroundColor Color = Color Transparent content Composable gt Unit val backgroundModifier = if backgroundColor = Color Transparent Modifier background backgroundColor else Modifier Layout modifier = modifier then backgroundModifier content = drawerContents content ```

Joe Altidore · Answer

I tried that but omitting the background still has that background on it

Travis · Answer

Presumably you have some content behind this layout you want to see through it Are you doing something like putting a GLSurfaceView inside it or something like that Some wacky canvas stuff like transparent paint on hardware layers

Joe Altidore · Answer

I am using the layout for animate drawer It s content is a BottomSheetScaffold whose shape is rounded at the top However the background color is making the bottom sheet look weird I modified my background color in themes to transparent and now the color is white

Travis · Answer

Oh That s probably something the scaffold is doing Yep there it is backgroundColor in BottomSheetScaffold is the MaterialTheme colors background You should pass Transparent in there too

Travis · Answer

Basically the `content ` block of your layout contains the background color you re seeing Though that wouldn t explain why a Modifier background on the Layout with say Color Blue would show up blue since your scaffold should cover that up too

Joe Altidore · Answer

I have set the Scaffold background to Transparent as well

Travis · Answer

And is there anything behind the Layout

Joe Altidore · Answer

The content of the BottomSheet is a Google map and a NavHost

Travis · Answer

MapView uses a GL surface right That sort of thing can result in black if it s covered up and it thinks it doesn t have to draw We had a similar issue on a camera feed app I worked with The easiest solution to something like that is to move the stuff that s underneath your layout into it as part of the content The scaffold stuff typically kind of assumes it s at the root of your app anyway

Travis · Answer

One test you can run to see if this is the issue is to wrap the whole thing in a frame layout and put a magenta box at the center between the compose view and the background view If you see the box the problem is the map If you don t it really is the compose layer and a layout inspector might do you more good than I have confused

Joe Altidore · Answer

I don t understand

Joe Altidore · Answer

Let me share a snippet of my code so you ll see

Joe Altidore · Answer

``` Composable fun MyLayout modifier Modifier state AnimatedDrawerState = rememberAnimatedDrawerState drawerWidth = 280 dp drawer Composable gt Unit bottomSheetScaffold Composable gt Unit Layout modifier = modifier content = drawer bottomSheetScaffold measurables constraints gt val drawerContentMeasurable contentMeasurable = measurables val drawerContentConstraints = Constraints fixed width = state drawerWidth coerceAtMost constraints maxWidth toFloat toInt height = constraints maxHeight val drawerContentPlaceable = drawerContentMeasurable measure drawerContentConstraints val contentConstraints = Constraints fixed width = constraints maxWidth height = constraints maxHeight val contentPlaceable = contentMeasurable measure contentConstraints layout width = constraints maxWidth height = constraints maxHeight contentPlaceable placeRelativeWithLayer IntOffset Zero transformOrigin = state contentTransformOrigin scaleX = state contentScaleX scaleY = state contentScaleY translationX = state contentTranslationX drawerContentPlaceable placeRelativeWithLayer IntOffset Zero translationX = state drawerTranslationX shadowElevation = state drawerElevation ``` This is my layout

Joe Altidore · Answer

and this is how I am using it with the BottomSheetScaffold ``` OptIn ExperimentalMaterialApi class Composable fun MyIndex modifier Modifier = Modifier peekHeight Float val sheetPeekHeight by animateDpAsState targetValue = peekHeight dp animationSpec = spring stiffness = Spring StiffnessLow val animation = remember Animatable 0f val drawerState = rememberAnimatedDrawerState drawerWidth = LocalConfiguration current screenWidthDp 68 dp animation val scope = rememberCoroutineScope val scaffoldState = rememberBottomSheetScaffoldState bottomSheetState = rememberBottomSheetState initialValue = BottomSheetValue Collapsed MyLayout modifier = modifier state = drawerState drawer = Drawer Content BottomSheetScaffold sheetContent = Sheet content sheetShape = RoundedCornerShape topStart = 24 dp topEnd = 24 dp sheetPeekHeight = sheetPeekHeight scaffoldState = scaffoldState AndroidView factory = context gt MapView context apply onCreate null onResume getMapAsync modifier = modifier background Color Transparent NavHost navController = rememberNavController startDestination = start route modifier = modifier background Color Yellow My Routes Here ```

Travis · Answer

So you re passing Modifier background Color Transparent to MyIndex and you re seeing black Is there anything behind MyIndex Like is that the root of the UI hierarchy Or is it in a box with something behind it The background you pass to MyLayout should only cover up anything outside the scope of MyIndex That is if you had a Box with two elements A list of to do tasks and MyIndex In that case the background of MyIndex would cover up your to do list via the MyLayout modifier But if the root of your app is MyIndex then you d expect a black background if the index bg is transparent because that s just the default background for an empty app

Travis · Answer

To clarify The MapView inside the AndroidView is inside the content of MyLayout This means that a background on MyLayout would have no effect on the mapview because it d show up behind the MapView