Hey guys, I have a few `TextFields` and a `Button`...

# compose

[Alexandru Hadăr]

Hey guys,
I have a few TextFields and a Button at the bottom of the screen (max space between the Button and TextFields). What I’m trying to achieve is that when keyboard is opened, the button will be pushed up till below the last `TextField`(with minimum space between), so the user only has to scroll a bit to push the button.
(🧵  with some attempts)

[Alexandru Hadăr]

For example, let’s have this code:

Column(
        modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
    ) {
        TextField(value = "Field 1", onValueChange = {}, modifier = Modifier.fillMaxWidth())
        TextField(value = "Field 2", onValueChange = {}, modifier = Modifier.fillMaxWidth())
        TextField(value = "Field 3", onValueChange = {}, modifier = Modifier.fillMaxWidth())
        TextField(value = "Field 4", onValueChange = {}, modifier = Modifier.fillMaxWidth())
        TextField(value = "Field 5", onValueChange = {}, modifier = Modifier.fillMaxWidth())
        TextField(value = "Field 6", onValueChange = {}, modifier = Modifier.fillMaxWidth())
        TextField(value = "Field 7", onValueChange = {}, modifier = Modifier.fillMaxWidth())
        TextField(value = "Field 8", onValueChange = {}, modifier = Modifier.fillMaxWidth())
        TextField(value = "Field 9", onValueChange = {}, modifier = Modifier.fillMaxWidth())
        Box(
            modifier = Modifier.fillMaxHeight(),
            contentAlignment = Alignment.BottomCenter
        ) {
            Button(
                onClick = {},
                Modifier
                    .fillMaxWidth()
                    .height(48.dp)
            ) {
                Text("Button", modifier = Modifier.alignByBaseline())
            }
        }
    }

[Alexandru Hadăr]

I know that for making a column scrollable, you can add

.verticalScroll(rememberScrollState())

However, this seems to ignore any Modifier.fillMaxHeight()

[Alexandru Hadăr]

I’ve also tried to add a Spacer(modifier = Modifier.fillMaxHeight), but I get the same treatment back.

[Alexandru Hadăr]

1st image should be the Unfocused behaviour with verticalScroll  on, however the second image shows what happens when I have both verticalScroll and fillMaxHeight

[Alexandru Hadăr]

This is my desired behaviour:

[nglauber]

You first have to set your activity as resizable…

android:windowSoftInputMode="adjustResize"

then, in your composable

Column(Modifier.fillMaxSize()) {
    Column(
        Modifier
            .fillMaxWidth()
            .weight(1f)
            .verticalScroll(
                rememberScrollState()
            )
    ) {
        // Your TextFields here...
    }
    Button(...)
}

[Alexandru Hadăr]

Doesn’t seem to work.
If you have a working example, could you create a gist with it ?

[nglauber]

https://gist.github.com/nglauber/eda21a5d5b150c6df343dca1da692271

[nglauber]

Here is the result

[Alexandru Hadăr]

hey @nglauber, many thanks for your help.

After many tries, I achieved what I wanted to, meaning this:

scrolling_behaviour.mp4

[Alexandru Hadăr]

The code for it is:

Surface(modifier = Modifier.fillMaxSize()) {
        Column(
            modifier = Modifier
                .fillMaxWidth()
                .verticalScroll(rememberScrollState()),
            horizontalAlignment = Alignment.CenterHorizontally,
        ) {
            for (i in 0..7) {
                TextField(value = "TextField #$i", {})
                Spacer(modifier = Modifier.height(8.dp))
            }

            Spacer(modifier = Modifier.weight(1f))
            Button(onClick = { /*TODO*/ }, modifier = Modifier.padding(bottom = 16.dp)) {
                Text("Click me")
            }
        }
    }

[nglauber]

Awesome! 👏