Jetpack Compose - Modify scroll behavior to hold focus on a fix position on screen

Question

Using jetpack compose to create an AP for TV platforms and I've been trying to create a row in jetpack compose which scrolls about the fix position on screen, here is the target behaviour as observed on google TV launcher:

Target Behaviour

Here we can see that the view is fixed on the lefthand side of the screen while the entire row moves around it

And how here is the current behaviour with my lazyrow composable:

Current Behaviour

As we can see here, the focus moves all the way to the right or the left before the list starts moving around it.

Any help in making the lazyrow scroll behave like in the first example?

vighnesh153 · Accepted Answer · 2023-07-03T08:53:39.540

4

You can make use of TvLazyRow from the Compose for TV library which solves exactly this problem. It is part of the androidx.tv.foundation.lazy.list package.

To use it, you can make use of the pivotOffsets argument which accepts a PivotOffsets class instance. To that, you can pass 2 arguments:

parentFraction which defines the offset of the starting edge of the child element from the starting edge of the parent element
childFraction defines the offset of the starting edge of the child from the pivot defined by parentFraction

Following is the sample usage which places the item exactly at the center:

import androidx.tv.foundation.lazy.list.TvLazyRow

TvLazyRow(
    pivotOffsets = PivotOffsets(0.5f, 0.5f),
    horizontalArrangement = Arrangement.spacedBy(20.dp)
) {
    items(10) {
        Card(backgroundColor = Color.Red)
    }
}

If you want the Google TV launcher like look, you can update the PivotOffsets to the following:

import androidx.tv.foundation.lazy.list.TvLazyRow

TvLazyRow(
    pivotOffsets = PivotOffsets(0.1f, 0f),
    horizontalArrangement = Arrangement.spacedBy(20.dp)
) {
    items(10) {
        Card(backgroundColor = Color.Red)
    }
}

edited Jul 03 '23 at 08:53

answered Jul 03 '23 at 08:48

vighnesh153

4,354
2
13
27

This is great, fixes my problem. One more thing I would like to ask about the end of list behaviour. I saw here that the focussed view goes to the right side of screen when list end item is reached. Is there some way to keep the focussed view static (left side of the screen for example) at all times. So if the list ends, even the last items comes to this 'focus box'/ – Rahul Rawat Jul 04 '23 at 06:37
Currently, your desired behaviour isn't supported in `TvLazyRow`/`TvLazyColumn`. This was done intentionally because there were some concerns UX wise. You could file a ticket [here](https://issuetracker.google.com/issues/new?component=1254578&template=1739419) to ask for a feature request. – vighnesh153 Jul 04 '23 at 09:02
Related stackoverflow question: https://stackoverflow.com/q/76652527/8822610 – vighnesh153 Jul 10 '23 at 12:49

score 1 · Answer 2 · answered Jul 03 '23 at 10:01

We can use the snap fling behavior that would snap at the middle item but the video you provided has snapping enabled on the first visible item, there's no property of snap fling that we could change to snap at the first item.

So I have implemented something that calculates and stop at the very first item and highlights it.

I did not see that you were implementing it for tv and I created a sample for mobile :___( . If there is any tv specific api available for this behavior you should surely go for that, if not then you can have a look at my implementation.

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun MainScreen(
    modifier: Modifier
) {
    
    val lazyRowState = rememberLazyListState()
    val snappingLayout = remember(lazyRowState) { SnapLayoutInfoProvider(lazyRowState) }
    val flingBehavior = rememberSnapFlingBehavior(snappingLayout)

    Box(
        modifier = modifier
        .fillMaxSize()
    ) {
        val firstVisibleItem by remember {
            derivedStateOf {
                lazyRowState.layoutInfo.visibleItemsInfo.firstOrNull()
            }
        }
        val viewPortStartOffset by remember {
            derivedStateOf {
                lazyRowState.layoutInfo.viewportStartOffset
            }
        }
        LaunchedEffect(key1 = firstVisibleItem ) {
            firstVisibleItem?.let {
                if(it.offset < viewPortStartOffset){
                    lazyRowState.animateScrollToItem(it.index)

                }
            }
        }
        LazyRow(
            modifier = Modifier
                .align(Alignment.Center)
                .wrapContentSize(),
            state = lazyRowState,
            flingBehavior = flingBehavior
        ) {

            items(50) { index ->
                val isFirstItem by remember { derivedStateOf { lazyRowState.firstVisibleItemIndex == index} }
                val scale by animateFloatAsState(targetValue = if(isFirstItem) 1.2f else 1f,
                    label = "scale animation"
                )
                Card(
                    modifier = Modifier
                        .padding(start = 30.dp, end = 10.dp)
                        .size(80.dp)
                        .scale(scale = scale)
                        .border(
                            if (isFirstItem) 2.dp else 0.dp,
                            if (isFirstItem) Color.White else Color.Transparent,
                            RoundedCornerShape(15.dp)
                        )
                        ,
                    colors = CardDefaults.cardColors(Color.Blue),
                    shape = RoundedCornerShape(15.dp),

                    ) {
                    Text(text = "$index")
                }
            }
        }
    }
}

I am actually just calculating if the offset of very first visible item goes out of the bounds of viewport and if it does then scrolling the lazy list to that item.

Jetpack Compose - Modify scroll behavior to hold focus on a fix position on screen

2 Answers2