IssueTracker

Starting from version 1.0.0-alpha11 of androidx.tv.foundation, tv lazy layouts are deprecated and will be removed in the future releases. This includes the following components and their respective tv-foundation dependencies.

1. TvLazyRow
2. TvLazyColumn
3. TvLazyHorizontalGrid
4. TvLazyVerticalGrid

This deprecation follows a new feature addition in the compose foundation's lazy layouts. The tv lazy layouts offered a pivotOffsets functionality that would allow to position the current focused item at a specific position. This can now be achieved by providing a custom BringIntoViewSpec to the compose foundation's lazy layouts. Feature CL

The following part of the ticket will talk about migration from tv lazy layouts to compose foundation layouts.

Prerequisites

1. Update the versions of following packages to 1.7.0-beta02 or above.

• androidx.compose.foundation
• androidx.compose.runtime

2. Feel free to remove the androidx.tv.foundation dependency from your package if you were only using the tv lazy layouts.

Option 1. If you are using tv lazy layouts WITHOUT customizing the pivotOffsets.

Changes

1. Add the lazy layout imports from androidx.compose.foundation
2. Remove the Tv prefix from all the TvLazy* components.

Before: Using androidx.tv.foundation

TvLazyRow { ... }
TvLazyColumn { ... }
TvLazyHorizontalGrid { ... }
TvLazyVerticalGrid { ... }

After: Using androidx.compose.foundation

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.grid.LazyHorizontalGrid
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid

LazyRow { ... }
LazyColumn { ... }
LazyHorizontalGrid { ... }
LazyVerticalGrid { ... }

Option 2. If you are customizing the pivotOffsets in the tv lazy layouts.

Changes

1. Create a custom BringIntoView spec
2. Add the lazy layout imports from androidx.compose.foundation
3. Remove the Tv prefix from all the TvLazy* components.
4. Wrap the lazy layouts using the custom BringIntoView spec

Custom BringIntoView spec:

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PositionFocusedItemInLazyLayout(
    parentFraction: Float = 0.3f,
    childFraction: Float = 0f,
    content: @Composable () -> Unit,
) {
    // a bring into view spec that pivots around the center of the scrollable container
    val bringIntoViewSpec = remember(parentFraction, childFraction) {
        object : BringIntoViewSpec {
            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 =
                    parentFraction * containerSize - (childFraction * size)
                val spaceAvailableToShowItem = containerSize - initialTargetForLeadingEdge

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

                return offset - targetForLeadingEdge
            }
        }
    }

    // LocalBringIntoViewSpec will apply to all scrollables in the hierarchy.
    CompositionLocalProvider(
        LocalBringIntoViewSpec provides bringIntoViewSpec,
        content = content,
    )
}

Now that we have the custom BringIntoView spec, usage it pretty straightforward. Wrap the entire app with PositionFocusedItemInLazyLayout and all your inner lazy layouts will respect that.

import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.grid.LazyHorizontalGrid
import androidx.compose.foundation.lazy.grid.LazyVerticalGrid

PositionFocusedItemInLazyLayout(
    parentFraction = 0.3f,
    childFraction = 0.5f,
) {
    LazyRow { ... }
    LazyColumn { ... }
    LazyHorizontalGrid { ... }
    LazyVerticalGrid { ... }
}

You can even override it for specific layouts like shown below:

PositionFocusedItemInLazyLayout(
    parentFraction = 0.3f,
    childFraction = 0.5f,
) {
    LazyRow { ... }
    LazyColumn { ... }
    LazyHorizontalGrid { ... }
    LazyVerticalGrid { ... }
    
    PositionFocusedItemInLazyLayout(parentFraction = 0.1f) {
        LazyRow { ... }
    }
}