IssueTracker

Jetpack Compose version: 1.2.0

Jetpack Compose component(s) used: foundation (LazyList, scrollable, BringIntoViewResponder)

Android Studio Build: Chipmunk

Kotlin version: 1.7.0

We've been trying to use LazyLayouts for Android TV for a while, but struggle with focus navigation. Our goals is to have a LazyColumn containing a list of LazyRows showing items. It's important for us that the focused item is centered in the screen. See attached video for a demonstration of how it works in the old implementation (using RecyclerViews).

For a while we've tried to do it manually: Whenever a new item was focused, we would scroll horizontally and vertically. One issue by doing this was however that BringIntoViewResponder was cancelling the scrolls - see b/212982472.

So we've instead tried to use BringIntoViewResponder as it seems like the way to do it, but it doesn't behave as expected. Whenever we receive a call to bringChildIntoView the coordinates are outdated as another BringIntoViewResponder already started scrolling a bit if the view wasn't fully visible - most likely by the the default BringIntoViewResponder in scrollable.

We've tried to make a simple example that shows our issue. It's really a simplyfied version of it, but it still happens in this case. Here we're only using a LazyRow, but it happens for columns as well. If you uncomment the two log-statments (and print them to log) it's clear that when you navigate to item with index 4 (that's not fully visible) we're basing out calculations on an outdated localRect.

@OptIn(ExperimentalFoundationApi::class)
@Composable
private fun BringIntoViewCentered() {
    val rowListState = rememberLazyListState()
    val bringIntoViewResponder = remember(rowListState) { BringIntoViewCenterResponder(rowListState) }
    LazyRow(
        state = rowListState,
        modifier = Modifier.bringIntoViewResponder(bringIntoViewResponder)
    ) {
        listOf(1.until(10), 8.downTo(1)).flatten().forEachIndexed { index, itemFraction ->
            item {
                val interactionSource = remember { MutableInteractionSource() }
                val isFocused by interactionSource.collectIsFocusedAsState()
                Text(
                    text = "#$index",
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .fillParentMaxWidth(fraction = itemFraction.toFloat() / 10)
                        .focusable(interactionSource = interactionSource)
                        .background(if (isFocused) Color.Green else if (itemFraction % 2 == 0) Color.Red else Color.Blue)
                        .padding(vertical = 16.dp)
                )
            }
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
class BringIntoViewCenterResponder(private val listState: LazyListState) : BringIntoViewResponder {
    @ExperimentalFoundationApi
    override fun calculateRectForParent(localRect: Rect): Rect {
        return localRect
    }

    @ExperimentalFoundationApi
    override suspend fun bringChildIntoView(localRect: Rect) {
        val parentWidth = listState.layoutInfo.viewportSize.width
        val destinationLeft = (parentWidth / 2) - (localRect.width / 2)
        val scrollDelta = localRect.left - destinationLeft

        listState.stopScroll() // Just for debug purposes, animateScrollBy would normally do this
        // When scrolling to item #4 (zero-indexed) this clearly shows that the list has been scrolled after localRect was calculated
        // LOG - expected left offset: "Local rect left: ${localRect.left}"
        // LOG - actual left offset: "Visible items offset after scroll cancel: ${listState.layoutInfo.visibleItemsInfo.joinToString("; ") { "#${it.index}: ${it.offset}" }}"
        listState.animateScrollBy(scrollDelta)
    }
}