2

I'm writing a login form with 2 text fields, and a button. When I tap one of the text fields and the keyboard displays, the content doesn't scroll to allow for the user to select the second field + push the login button.

In the XML land, what I'm trying to achieve is done using a scrollview + adjustResize in the manifest.

I've tried adding scrollable to the column, a scaffold that's scrollable and a few other things to know success but these seem to be the most common answers, so I'm assuming I've done something wrong in my layout.

My layout;

@Composable
fun LoginScreen() {
    val scrollState = rememberScrollState()
    Column(
        modifier = Modifier
            .fillMaxSize()
            .imePadding()
            .verticalScroll(scrollState)
    ) {

        Column(
            modifier = Modifier
                .weight(0.5f)
                .align(CenterHorizontally),
            verticalArrangement = Center
        ) {
            Image(
                modifier = Modifier
                    .align(CenterHorizontally)
                    .size(120.dp),
                painter = painterResource(R.mipmap.default_logo),
                contentDescription = ""
            )

            Icon(
                modifier = Modifier.width(200.dp),
                painter = painterResource(com.roar.featureui.login.R.drawable.ic_title),
                contentDescription = "",
                tint = MaterialTheme.colorScheme.primary
            )
        }

        LoginCardContent(
            modifier = Modifier
                .weight(0.5f)
                .padding(horizontal = 32.dp),
            username = "Daniel",
            usernameChanged = {},
            password = "Blah",
            passwordChanged = {},
            loading = false,
            onLoginPressed = {}
        )
    }
}

and my manifest;

    <application
        ....>
        <activity
            android:name=".MainActivity"
            android:exported="true"
            android:windowSoftInputMode="adjustResize">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

The UI Resizes, but I cannot scroll to see all of the content.

Edit: Tried my design on a small device, and some of the bottom text is cut of and the UI doesn't scroll all together, so I don't think this is anything to do with the keyboard, just my layout.

Edit2: I've simplified my layout, and removing the weight modifiers from the two sections (logo/title) and login content allows the UI to scroll.

Edit3: Fixed this by replacing the parent layout (column) with a constraint layout. Not sure what is going wrong with the column though, but I feel like this should be achievable with one.

  • Does this question helps you? https://stackoverflow.com/questions/68116203/textfield-is-hiding-under-the-keyboard-when-focused/68143802#68143802 – nglauber Jul 26 '22 at 13:42

1 Answers1

1

add windowSoftInputMode="adjustResize"

<activity
        android:windowSoftInputMode="adjustResize"
        android:name=".MainActivity"
        android:exported="true"
        android:label="@string/app_name">
</activity>

after setContent add

ViewCompat.setOnApplyWindowInsetsListener(findViewById(android.R.id.content)){ view,insets ->
        val bottom = insets.getInsets(WindowInsetsCompat.Type.ime()).bottom
        view.updatePadding(bottom = bottom)
        insets
    }