0

I have a BasicTextField which has imepadding applied, but once the keyboard is opened, It does not push up the contents of BasicTextField, It hides under the keyboard. I want it to scroll up above the keyboard. Tried many things but still did not work.

Here is my code below:

It allows user enter text, the imepadding works initially, Until you re-open the keyboard and then it hides under the keyboard.

 package com.example.imebasictext.android

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.WindowInsets
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.ime
import androidx.compose.foundation.layout.imePadding
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.windowInsetsPadding
import androidx.compose.foundation.rememberScrollState
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.foundation.verticalScroll
import androidx.compose.material3.*
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
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.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.platform.LocalDensity
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import com.example.imebasictext.Greeting
import androidx.compose.runtime.derivedStateOf

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        enableEdgeToEdge()

        setContent {
            MyApplicationTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                    color = MaterialTheme.colorScheme.background
                ) {
                    GreetingView(Greeting().greet())
                }
            }
        }
    }
}

@Composable
fun GreetingView(text: String) {
    val focusRequester = remember { FocusRequester() }
    var inputText by remember { mutableStateOf("") }
    var isFocused by remember { mutableStateOf(false) }

    //
    val scrollState = rememberScrollState()

    LaunchedEffect(inputText) {
        scrollState.animateScrollTo(scrollState.maxValue)
    }
    //

    Column(
        modifier = Modifier
            .fillMaxSize()
            .verticalScroll(scrollState)
            .background(Color.White)
            .imePadding()
    ) {
        BasicTextField(
            value = inputText,
            onValueChange = { inputText = it },
            modifier =
                Modifier
                    .focusRequester(focusRequester)
                    .padding(horizontal = 16.dp)
                    .padding(bottom = 50.dp)
                    .onFocusChanged {
                        isFocused = it.isFocused
                    },
            textStyle = TextStyle(
                color = Color.Black
            ),
            cursorBrush = SolidColor(Color.Black),
            keyboardOptions = KeyboardOptions(
                capitalization = KeyboardCapitalization.Sentences
            )
        )

    }
}

@Preview
@Composable
fun DefaultPreview() {
    MyApplicationTheme {
        GreetingView("Hello, Android!")
    }
}

1 Answer 1

1

There are a few steps to achieve this. I’ve tested them in my project but haven’t had time to create a sample project:

  • Move edgeToEdge before onCreate. Here is the full explanation on github

  • Set the AndroidManifest to android:windowSoftInputMode="adjustNothing"

  • You may need to wrap your list in a Scaffold to get your PaddingValues and then consume those padding values. It could be like this:

    Modifier.consumeWindowInsets(contentPadding)
    .imePadding()
    

    As I found from this answer the consumeWindowInsets should be called before imePadding so the content padding is properly consumed.

Additional Steps for iOS to align edgeToEdge behavior with android on ContentView.swift file ignore all safe area:

ComposeView()
 .ignoresSafeArea(.all)

You may want to experiment based on your use case by using:

.ignoresSafeArea(.keyboard, edges: .all)
.ignoresSafeArea(.container, edges: .all)
Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.