Keyboard overlapping with TextField on a ModalBottomSheet (Jetpack compose)

1.8k Views Asked by At

The device's keyboard is overlapping with the ModalBottomSheet that has a text field, I have already set android:windowSoftInputMode="adjustResize" in my manifest file And consumed the imePadding in my bottom sheet content.

Here's my code so far:

MainActivity
@AndroidEntryPoint
class MainActivity : ComponentActivity() {
    @OptIn(ExperimentalMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            val loadProfileModalBottomSheetState = rememberModalBottomSheetState()
            val saveProfileModalBottomSheetState = rememberModalBottomSheetState()
            val scope = rememberCoroutineScope()
            val navController = rememberNavController()
            EqualizerTheme {
                Scaffold(
                    modifier = Modifier.fillMaxSize(),
                    topBar = {...}
                ) { paddingValues ->
                    MainNavGraph(navController = navController, paddingValues = paddingValues)
                    if (loadProfileModalBottomSheetState.isVisible) {
                        LoadProfilesBottomSheet(
                            sheetState = loadProfileModalBottomSheetState,
                            onHide = { scope.launch { loadProfileModalBottomSheetState.hide() } }
                        )
                    }
                    if (saveProfileModalBottomSheetState.isVisible){
                        SaveProfileBottomSheet(
                            sheetState = saveProfileModalBottomSheetState,
                            onHide = { scope.launch { saveProfileModalBottomSheetState.hide() } }
                        )
                    }
                }
            }
        }
    }
}
BottomSheet
@Composable
fun SaveProfileBottomSheet(
    modifier: Modifier = Modifier,
    sheetState: SheetState,
    onHide: () -> Unit,
    viewModel: ProfileStorageViewModel = hiltViewModel()
) {
    val state = viewModel.state.collectAsState().value

    ModalBottomSheet(
        modifier = modifier,
        sheetState = sheetState,
        onDismissRequest = {
            onHide()
        }
    ) {
        SaveProfileBottomSheetContent(
            modifier = Modifier.imePadding(),
            profileName = state.profileName,
            onProfileNameChange = viewModel::onProfileNameChange,
            onHide = {
                onHide()
            },
            onSave = {
                onHide()
                viewModel.onSave()
            }
        )
    }
}

enter image description here

0

There are 0 best solutions below