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

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?

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)
    }
}