IssueTracker

Jetpack Compose version: BOM 2024.12.01

Jetpack Compose component(s) used: ScrollableState and lazy/scrollable containers, LocalBringIntoViewSpec

Android Studio Build: Android Studio Ladybug Feature Drop | 2024.2.2

Kotlin version: 2.0.0

When overriding LocalBringIntoViewSpec it would be useful to be able to scroll to an item and make it follow the spec defined by LocalBringIntoViewSpec. Currently, using animateScrollToItem() or scrollToItem() will scroll so the item is at the start of the container, which doesn't look very fluid when the component is later focused as it will scroll again when LocalBringIntoViewSpec triggers

It's possible to call BringIntoViewRequester#bringIntoView after the scroll, but that doesn't really work that well for a few reasons:

1. If using animateScrollToItem() the animation of the scroll will finish and then the animation defined in LocalBringIntoViewSpec will start. It's very visible that two steps are being done instead of one smooth scroll
2. If the item is already in view it will always scroll the item to the start instead of just scrolling the required distance (this could be handled by checking if the item is visible and then only calling bringIntoView())
3. You have to keep track of BringIntoViewRequesters everywhere, which is a bit cumbersome

It's probably possible to create some logic to find the offset needed and pass that to the scrollOffset parameter, but I'm not sure how easy it is to do this in a convenient and reusable way

This is probably primarily an issue on Android TV

Example code (see also the attached video):

// Centers the item
private val bringIntoViewSpec = object : BringIntoViewSpec {
    override val scrollAnimationSpec = spring<Float>(
        stiffness = 100f
    )

    override fun calculateScrollDistance(
        // initial position of item requesting focus
        offset: Float,
        // size of item requesting focus
        size: Float,
        // size of the lazy container
        containerSize: Float
    ): Float {
        val childSmallerThanParent = size <= containerSize
        val initialTargetForLeadingEdge = 0.5f * containerSize - (0.5f * size)
        val spaceAvailableToShowItem = containerSize - initialTargetForLeadingEdge

        val targetForLeadingEdge = if (childSmallerThanParent && spaceAvailableToShowItem < size) {
            containerSize - size
        } else {
            initialTargetForLeadingEdge
        }

        return offset - targetForLeadingEdge
    }
}


CompositionLocalProvider(
    LocalBringIntoViewSpec provides bringIntoViewSpec
) {
    Column {
        val coroutineScope = rememberCoroutineScope()
        val listState = rememberLazyListState()
        val bringIntoViewRequesters = remember { List(20) { BringIntoViewRequester() } }

        Button(
            onClick = {
                coroutineScope.launch {
                    listState.animateScrollToItem(5)
                    bringIntoViewRequesters[5].bringIntoView()
                }
            }
        ) {
            Text("animateScrollToItem() and bringIntoView()")
        }

        Spacer(Modifier.size(50.dp))

        LazyRow(
            state = listState,
            horizontalArrangement = Arrangement.spacedBy(24.dp)
        ) {
            items(20) { index ->
                val interactionSource = remember { MutableInteractionSource() }
                val isFocused by interactionSource.collectIsFocusedAsState()

                Box(
                    contentAlignment = Alignment.Center,
                    modifier = Modifier
                        .focusable(interactionSource = interactionSource)
                        .background(if (isFocused) Color.Red else Color.Blue)
                        .width(160.dp)
                        .height(100.dp)
                        .bringIntoViewRequester(bringIntoViewRequesters[index])
                ) {
                    Text("$index")
                }
            }
        }
    }
}