Reputation: 461
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:
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