[Insets] How to use navigationBarsWithImePadding with Column verticalScroll?

[radzio]

Hello!

What is the best way to handle Column verticalScroll and navigationBarsWithImePadding?

I have layout like this:

When keyboard is shown it looks like this:

What I want to achieve (automatically scroll to given or focused composable when IME is shown) :

I was trying to play with scrollState.smoothScrollTo but without any reliable success :(. @chrisbanes do you have any recommendations or best ways of doing so?

Code:

class ExampleFragment: Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View = ComposeView(requireContext()).apply {
        layoutParams = ViewGroup.LayoutParams(
            ViewGroup.LayoutParams.MATCH_PARENT,
            ViewGroup.LayoutParams.MATCH_PARENT
        )

        val windowInsets = ViewWindowInsetObserver(this).start(consumeWindowInsets = false)

        setContent {
            Providers(
                LocalWindowInsets provides windowInsets
            ) {

                val scrollState = rememberScrollState()
                var textValue = remember { TextFieldValue() }

                Column(
                    modifier = Modifier.fillMaxSize(1F)
                        .statusBarsPadding()
                        .navigationBarsWithImePadding()
                        .verticalScroll(scrollState)
                        .padding(horizontal = 16.dp),
                    verticalArrangement = Arrangement.Top,
                ) {

                    Text(
                        text = "Hi there ❤",
                        fontSize = 46.sp,
                        style = TextStyle(
                            fontWeight = FontWeight.Bold,
                            textAlign = TextAlign.Center
                        ),
                        modifier = Modifier.fillMaxWidth(1F)
                    )

                    Spacer(modifier = Modifier.height(250.dp))

                    Text(
                        text = "More content",
                        fontSize = 20.sp,
                        style = TextStyle(
                            fontWeight = FontWeight.Bold,
                            textAlign = TextAlign.Center
                        ),
                        modifier = Modifier.fillMaxWidth(1F)
                    )

                    Text(
                        text = "More content #2",
                        fontSize = 20.sp,
                        style = TextStyle(
                            fontWeight = FontWeight.Bold,
                            textAlign = TextAlign.Center
                        ),
                        modifier = Modifier.fillMaxWidth(1F)
                    )

                    TextField(value = textValue, onValueChange = { textValue = it })
                }
            }
        }
    }
}

[chrisbanes]

Hmmm, using smoothScrollToItem() is probably the right thing here. I don't think this will ever be automatic, since the Modifier has no idea about any other composables around it.

I think we might be missing a callback from the modifier to know when to call smoothScrollToItem though.

FYI, I think you'll have better luck with laying out from the bottom:

Column(
    modifier = Modifier
        // other modifiers
        .verticalScroll(scrollState, reverseScrolling = true),
    verticalArrangement = Arrangement.Bottom,
)

Laying out from the bottom means that the scroll position should remain the same as the Column changes size.

[qrezet]

Hi, I have an even problematic scenario about managing the same thing.

The problem is that, my TextFields are inside Column which is inside LazyColumn's item().

I could call LazyState.animateScrollToItem() but I don't know how to get the correct Offset to properly position the focused TextField.

Do you guys have any idea how to do this?

[chrisbanes]

I don't think this is supported yet (but I'll ask the team later). I just saw that someone raised this bug which is very related.

[qrezet]

Thanks @chrisbanes

[radzio]

@qrezet have you find any solution or workaround to your problem

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.

[chrisbanes]

The recent RelocationRequester API should allow us to do this. Just spent 10 mins and come up with this:

@ExperimentalComposeUiApi
fun Modifier.bringIntoViewAfterImeAnimation(): Modifier = composed {
    val imeInsets = LocalWindowInsets.current.ime
    var focusState by remember { mutableStateOf<FocusState?>(null) }
    val relocationRequester = remember { RelocationRequester() }

    LaunchedEffect(
        imeInsets.isVisible,
        imeInsets.animationInProgress,
        focusState,
        relocationRequester
    ) {
        if (imeInsets.isVisible &&
            !imeInsets.animationInProgress &&
            focusState?.isFocused == true) {
            relocationRequester.bringIntoView()
        }
    }

    relocationRequester(relocationRequester)
        .onFocusChanged { focusState = it }
}

var textField by remember { mutableStateOf(TextFieldValue()) }
TextField(
    value = textField,
    onValueChange = { textField = it },
    modifier = Modifier.bringIntoViewAfterImeAnimation()
)

It's not perfect, but it should form the basis of a solution. The idea is that each focusable item needs to be responsible for requesting that it is visible when necessary. The only difference from the usual logic is that we need to wait for any IME animations to finish before requesting.

Note: RelocationRequester seems to currently only work with scrolling Column or Row (i.e. not LazyColumn, etc)

[burhankhanzada]

it doesn't work for me

[b95505017]

@chrisbanes It works with latest 1.0.0, but no effect with latest snapshot version. 😢

[chrisbanes]

I think something is currently broken with RelocationRequester & LazyColumn. Not much we can do at this point.

[github-actions]

This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.