Jetpack Compose - Scroll to focused composable in Column

user_408613 0
Viewed 7980

I have UI like this:

val scrollState = rememberScrollState()
        Column(
            modifier = Modifier
                .fillMaxSize(1F)
                .padding(horizontal = 16.dp)
                .verticalScroll(scrollState)
        ) {

            TextField(...)
 // multiple textfields
             TextField(
                        //...
                        modifier = Modifier.focusOrder(countryFocus).onFocusChanged {
                            if(it == FocusState.Active) {
                               // scroll to this textfield
                            }
                        },
                    )
         }

I have multiple TextFields in this column and when one of them is focused I want to scroll Column to it. There is a method in scrollState scrollState.smoothScrollTo(0f) but I have no idea how to get a focused TextField position.

Update:

It seems that I've found a working solution. I've used onGloballyPositioned and it works. But I'm not sure if it the best way of solving this.

var scrollToPosition = 0.0F

TextField(
   modifier = Modifier
    .focusOrder(countryFocus)
    .onGloballyPositioned { coordinates ->
        scrollToPosition = scrollState.value + coordinates.positionInRoot().y
    }
    .onFocusChanged {
    if (it == FocusState.Active) {
        scope.launch {
            scrollState.smoothScrollTo(scrollToPosition)
        }
    }
}
)
android-jetpack-compose-text android-jetpack-compose
3 Answers

There is a new thing in compose called RelocationRequester. That solved the problem for me. I have something like this inside of my custom TextField.

val focused = source.collectIsFocusedAsState()
val relocationRequester = remember { RelocationRequester() }
val ime = LocalWindowInsets.current.ime
if (ime.isVisible && focused.value) {
    relocationRequester.bringIntoView()
}
user_67808870
user_161113080

Here's some code I used to make sure that the fields in my form were not cut off by the keyboard:

From: stack overflow - detect when keyboard is open

enum class Keyboard {
Opened, Closed
}

@Composable
fun keyboardAsState(): State<Keyboard> {
    val keyboardState = remember { mutableStateOf(Keyboard.Closed) }
    val view = LocalView.current
    DisposableEffect(view) {
    val onGlobalListener = ViewTreeObserver.OnGlobalLayoutListener {
        val rect = Rect()
        view.getWindowVisibleDisplayFrame(rect)
        val screenHeight = view.rootView.height
        val keypadHeight = screenHeight - rect.bottom
        keyboardState.value = if (keypadHeight > screenHeight * 0.15) {
            Keyboard.Opened
        } else {
            Keyboard.Closed
        }
    }
    view.viewTreeObserver.addOnGlobalLayoutListener(onGlobalListener)

    onDispose {
        
    view.viewTreeObserver.removeOnGlobalLayoutListener(onGlobalListener)
         }
    }

    return keyboardState
}

and then in my composable:

val scrollState = rememberScrollState()
val scope = rememberCoroutineScope()

val isKeyboardOpen by keyboardAsState()

if (isKeyboardOpen == Keyboard.Opened) {
    val view = LocalView.current
    val screenHeight = view.rootView.height
    scope.launch { scrollState.scrollTo((screenHeight * 2)) }
}

Surface(modifier = Modifier
    .fillMaxHeight()
    .verticalScroll(scrollState),
    
)  {
  //Rest of your Composables, Columns, Rows, TextFields, Buttons

  //add this so the screen can scroll up and keyboard cannot cover the form fields - Important!
 /*************************************************/
  if (isKeyboardOpen == Keyboard.Opened) {
     Spacer(modifier = Modifier.height(140.dp))
  }

}

Hope it helps someone. I was using:

val bringIntoViewRequester = remember { BringIntoViewRequester() }
val scope = rememberCoroutineScope()
val view = LocalView.current
DisposableEffect(view) {
    val listener = ViewTreeObserver.OnGlobalLayoutListener {
        scope.launch { bringIntoViewRequester.bringIntoView() }
    }
    view.viewTreeObserver.addOnGlobalLayoutListener(listener)
    onDispose { view.viewTreeObserver.removeOnGlobalLayoutListener(listener) }
}
Surface(modifier.bringIntoViewRequester(bringIntoViewRequester)) {

///////////rest of my composables
}

But this did not work.

user_12509290
Related