Daniel
Daniel

Reputation: 461

Jetpack Compose Keyboard overlaps ModalBottomSheet UI

I encountered an issue with Jetpack Compose and ModalBottomSheets:

On some devices the software keyboard overlaps the content of ModalBottomSheet. One a Samsung Galaxy S24 Ultra with Android 14 and OneUI 6.1 and on a Google Pixel 6a with Android 15 everything works as expected:

Screenshot Galaxy S24 Ultra
Screenshot Pixel 6a

But on a Samsung Galaxy A52s with Android 12 and OneUI 4.1 the software keyboard overlaps the content of the ModalBottomSheet:

Samsung A52s

After hours of debugging, and trial and error, I have no Idea where the problem is.

I use the compose Compiler version 2.0.10 with Material3.

AppHost:

Scaffold(
        modifier = Modifier.fillMaxSize()
    ) { padding ->
        Box(
            modifier = Modifier
                .fillMaxSize(),
            contentAlignment = Alignment.TopCenter
        ) {
            Box(
                modifier = Modifier.fillMaxSize(),
                contentAlignment = Alignment.BottomCenter
            ) {
                DestinationsNavHost(
                    navGraph = NavGraphs.root,
                    engine = engine,
                    navController = navController,
                    defaultTransitions = DefaultEatDeTransitions,
                    modifier = Modifier
                        .fillMaxSize()
                        .consumeWindowInsets(padding)
                        .imePadding()
                )
                
                ...
            }
        }
    }

DefaultBottomSheet:

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun DefaultBottomSheet(
    visible: Boolean,
    onDismissRequest: () -> Unit,
    sheetState: SheetState = rememberModalBottomSheetState(),
    scrimColor: Color = Color.Black.copy(alpha = .6F),
    content: @Composable ColumnScope.() -> Unit
) {
    if (visible) {
        ModalBottomSheet(
            onDismissRequest = onDismissRequest,
            sheetState = sheetState,
            properties = ModalBottomSheetDefaults.properties(
                shouldDismissOnBackPress = false
            ),
            dragHandle = {
                Column(
                    modifier = Modifier.fillMaxWidth(),
                    horizontalAlignment = Alignment.CenterHorizontally
                ) {
                    StatusBarSpacer(color = Color.Transparent)
                    DefaultDragHandle()
                }
            },
            containerColor = MaterialTheme.colorScheme.background,
            scrimColor = scrimColor,
            shape = RoundedCornerShape(
                topStart = 16.dp,
                topEnd = 16.dp
            ),
            windowInsets = WindowInsets(
                bottom = 0
            ),
            content = {
                content.invoke(this)
                NavigationBarSpacer()
            }
        )
    }
}

Upvotes: 1

Views: 65

Answers (0)

Related Questions