Android Keyboard Navigation in Jetpack Compose

Question

I'm trying to implement keyboard navigation in Jetpack Compose.

Have a LazyColumn which contains some list elements as Row{} all the Row's are clickable and receive focus. What I'm trying to achieve is to scroll to next item in the list after reaching the bottom of the screen.

After pressing the DOWN arrow key / TAB key, the focus stops at the bottom of the screen and does not scroll down. Am I wrong to expect it to happen automatically ? Do we need to use key events and how can we use key events to support scrolling using keyboard with Jetpack Compose.

Code:

LazyColumn(
            modifier = Modifier
                .padding(horizontal = Spacing2X)
                .padding(top = Spacing2X)
        ) {
            items(SOME_LIST_HERE) {
                Row(modifier = Modifier.clickable { }) {
                    Text(text = "")
                }
            }
        }

Scenario Video: https://twitter.com/karan4c6/status/1479426842566094849

Answer 1

You will have to use lazyListState to achieve that. First, you need to create it using val state = rememberLazyListState() and then provide it to your LazyColumn as a parameter.

You then need to use state.layoutInfo.visibleItemsInfo on every focus change to see what items are currently visible, combine that knowledge with state.firstVisibleItemIndex and which item is currently focused, and use it to scroll accordingly.

It's a hacky solution involving handling of indexes, but I made it work. I've lost access to that project since, so I cannot provide you with the working example, sorry.