IssueTracker

Jetpack Compose BOM version: 2024.12.01

Compose Compiler Version: 1.5.15

Material Library Version (M2, M3 or Both?): Material 3

Material Compose component used: BottomSheetScaffold

Android Studio Build:

Kotlin version: 2.0.21

Steps to Reproduce or Code Sample to Reproduce:

1. Get your phone into landscape mode.
2. I have made two boxes which divides the screen into halves.
3. I want to put my bottom sheet to the left box and my other composables at the right box.
4. When i put some composables into bottom sheet(not content, main screen), its covering area is showing as theme color.
5. For example if i put a rounded button to the left box, it shows it as no corner radiuses because its covering area is showing.
6. The biggest issue is i want to put a button in to the screen and i put it inside box to align it. Since the box inside fills the max size, left side becomes background colored while right side does not have any extra background.
7. I know it is from bottom sheet because when i remove, it acts normally.

Stack trace (if applicable): There are no error logs.

Full code:

package com.teosoft.bottomsheetpoc

import android.content.res.Configuration import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.activity.enableEdgeToEdge import androidx.compose.animation.core.animateIntAsState import androidx.compose.foundation.background import androidx.compose.foundation.gestures.detectVerticalDragGestures import androidx.compose.foundation.layout.Box import androidx.compose.foundation.layout.BoxWithConstraints import androidx.compose.foundation.layout.Column import androidx.compose.foundation.layout.Row import androidx.compose.foundation.layout.Spacer import androidx.compose.foundation.layout.fillMaxHeight import androidx.compose.foundation.layout.fillMaxSize import androidx.compose.foundation.layout.fillMaxWidth import androidx.compose.foundation.layout.height import androidx.compose.foundation.layout.padding import androidx.compose.foundation.shape.RoundedCornerShape import androidx.compose.material3.BottomSheetScaffold import androidx.compose.material3.BottomSheetScaffoldState import androidx.compose.material3.Button import androidx.compose.material3.ExperimentalMaterial3Api import androidx.compose.material3.Scaffold import androidx.compose.material3.SheetState import androidx.compose.material3.Text import androidx.compose.material3.rememberBottomSheetScaffoldState import androidx.compose.runtime.Composable import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.rememberCoroutineScope import androidx.compose.runtime.setValue import androidx.compose.ui.Alignment import androidx.compose.ui.Modifier import androidx.compose.ui.graphics.Color import androidx.compose.ui.input.pointer.pointerInput import androidx.compose.ui.platform.LocalConfiguration import androidx.compose.ui.platform.LocalDensity import androidx.compose.ui.tooling.preview.Preview import androidx.compose.ui.unit.Density import androidx.compose.ui.unit.dp import com.teosoft.bottomsheetpoc.ui.theme.BottomSheetPOCTheme import kotlinx.coroutines.CoroutineScope import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() { @OptIn(ExperimentalMaterial3Api::class) override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) enableEdgeToEdge() setContent { BottomSheetPOCTheme {

            val configuration = LocalConfiguration.current
            val orientation = configuration.orientation

            val scope = rememberCoroutineScope()
            val bottomSheetScaffoldState = rememberBottomSheetScaffoldState(
                bottomSheetState = SheetState(
                    density = Density(LocalDensity.current.density),
                    skipPartiallyExpanded = false
                )
            )

            Box {
                if (orientation == Configuration.ORIENTATION_LANDSCAPE)
                {
                    Row(modifier = Modifier.fillMaxSize()) {

                        Box(
                            modifier = Modifier
                                .weight(1f)
                                .fillMaxHeight()
                        ) {
                            Button(onClick = {}) { }
                            BottomSheet(scope, bottomSheetScaffoldState)
                        }

                        Box(
                            modifier = Modifier
                                .weight(1f)
                                .fillMaxHeight()
                        )
                        {
                            Button(onClick = {}) { }
                            Spacer(Modifier.height(16.dp))
                            Button(onClick = {}) { }

                        }

                    }
                }
                else
                {
                    BottomSheet(scope, bottomSheetScaffoldState)
                }
            }
        }
    }
}

}

enum class ExpandedType { HALF, FULL, COLLAPSED }

@OptIn(ExperimentalMaterial3Api::class) @Composable private fun BottomSheet(scope: CoroutineScope, bottomSheetScaffoldState: BottomSheetScaffoldState) { val configuration = LocalConfiguration.current val screenHeight = configuration.screenHeightDp var expandedType by remember { mutableStateOf(ExpandedType.COLLAPSED) } val height by animateIntAsState( when (expandedType) { ExpandedType.HALF -> screenHeight / 2 ExpandedType.FULL -> screenHeight ExpandedType.COLLAPSED -> 120 } )

BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    sheetShape = RoundedCornerShape(
        topStart = 12.dp,
        topEnd = 12.dp
    ),
    sheetContent = {
        var isUpdated = false
        Box(
            Modifier
                .fillMaxWidth()
                .height(height.dp)
                .pointerInput(Unit) {
                    detectVerticalDragGestures(
                        onVerticalDrag = { change, dragAmount ->
                            change.consume()
                            if (!isUpdated)
                            {
                                expandedType = when
                                {
                                    dragAmount < 0 && expandedType == ExpandedType.COLLAPSED ->
                                    {
                                        ExpandedType.HALF
                                    }

                                    dragAmount < 0 && expandedType == ExpandedType.HALF      ->
                                    {
                                        ExpandedType.FULL
                                    }

                                    dragAmount > 0 && expandedType == ExpandedType.FULL      ->
                                    {
                                        ExpandedType.HALF
                                    }

                                    dragAmount > 0 && expandedType == ExpandedType.HALF      ->
                                    {
                                        ExpandedType.COLLAPSED
                                    }

                                    else                                                     ->
                                    {
                                        ExpandedType.COLLAPSED
                                    }
                                }

                                if (dragAmount > 0 && expandedType == ExpandedType.COLLAPSED)
                                {
                                    scope.launch {
                                        bottomSheetScaffoldState.bottomSheetState.hide()
                                    }
                                }
                                isUpdated = true
                            }
                        },
                        onDragEnd = {
                            isUpdated = false
                        }
                    )
                }
                .background(Color.Red)
        )
    },
    sheetPeekHeight = height.dp,
    sheetSwipeEnabled = false
) {
    Box(
        Modifier
            .fillMaxSize()
            .background(Color.Black)
    )
}

}

@Composable fun Greeting(name: String, modifier: Modifier = Modifier) { Text( text = "Hello $name!", modifier = modifier ) }

@Preview(showBackground = true) @Composable fun GreetingPreview() { BottomSheetPOCTheme { Greeting("Android") } }