how can I change keyboard backdrop color with jetpack compose?

Question

I am using jetpack compose for Android development.

In dark mode, the background of the TextField is Color.Black. However, after tapping on the TextField, when the keyboard is displayed, the background color changes to white for a moment.

This seems to be due to the use of adjustResize. However, without it, some parts of the text will be off the screen and cannot be edited while typing. Therefore, I believe either of the following is an improvement.

• Change the color to black while maintaining adjustResize.
• Solve the above problem of text sticking out in a different way than adjustResize

This is very ugly. How can I change this white background to black?

Thank you in advance.

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

        setContent {
            TextField(
                value = "",
                onValueChange = {},
                modifier = Modifier.background(Color.Black).fillMaxSize()
            )
        }
    }
}

my activity setting in AndroidManifest.xml
<activity
    android:name=".ui.screen.episodeEdit.EditorActivity"
    android:exported="false"
    android:theme="@style/Theme.Nobel_editor"
    android:windowSoftInputMode="adjustResize"></activity>

Answer 1

Jetpack compose to fix key board backdrop white color issues, you can add background color to Parent activity of composable. This will give custom background color when keyboard opens.

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

            //Added to fix keyboard backdrop issue in screen, You can even add theme specific color
            window.decorView.setBackgroundResource(R.color.background)

            AppTheme {
                Surface(
                    color = MaterialTheme.colorScheme.surface,
                    modifier = Modifier.fillMaxSize(),
                ) {
                    Text(
                        text = stringResource(id = R.string.your_text_resource_id),
                        color = MaterialTheme.colorScheme.onSurfaceVariant,
                        style = MaterialTheme.typography.bodyMedium,
                    )
                }
            }
        }
    }
}