Aurangzaib Buzdar
Aurangzaib Buzdar

Reputation: 11

When I click on TextField the Floating Action Button hides behind Keyboard

@Composable
fun AddNoteUi(viewModel: AddNotesViewModel = koinViewModel()) {

        val state by viewModel.state.collectAsState()

    Scaffold(
        modifier = Modifier.fillMaxSize(),
        containerColor = colorResource(R.color.black),
        contentColor = colorResource(R.color.white),
   
        floatingActionButton = {
            FloatingActionButton(
                shape = CircleShape,
                modifier = Modifier.padding(5.dp),
                onClick = {
                    navController.popBackStack()
                },

                contentColor = colorResource(R.color.white),
                containerColor = colorResource(R.color.purple_700)
            ) {
                Icon(
                    imageVector = Icons.Rounded.Save,
                    contentDescription = "Save"
                )
            }
        },
    ) { innerPadding ->

        Column (
            modifier = Modifier
                .fillMaxSize().padding(innerPadding)
        ) {

                CustomTextField(
                    value = state.note.title,
                    hint = "Title",
                    onValueChange = {
                        viewModel.setTitle(it)
                    },
                    modifier = Modifier
                        .fillMaxWidth()
                        .padding(bottom = 8.dp) // Add spacing between TextFields
                )

                CustomTextField(
                    value = state.note.message,
                    hint = "Description",
                    onValueChange = {
                        viewModel.setMessage(it)
                    },
                    modifier = Modifier.weight(1f)
                        .fillMaxWidth()
                )
            }
        }


    }

I tried using imePadding in the column but the FloatingActionButton still hides behind the keyboard. When I click on any of the CustomTextField, the FloatingActionButton should move above the keyboard layout. When any of CustomTextField is unfocused, the FloatingActionButton should come to its previous position.

Upvotes: 0

Views: 50

Answers (0)

Related Questions