IssueTracker

Routing per go/androidx/owners for insets.

Hi @jb...@google.com,

Do you mind checking why FragmentContainerView still calls ViewCompat.dispatchApplyWindowInsets when the OnApplyWindowInsetsListener set to it always returns the consumed insets as here?

I also found that FragmentContainerView.kt:210 doesn't call ViewCompat.dispatchApplyWindowInsets but FragmentContainerView.kt:207 does. Not sure if the version was really androidx.fragment.fragment 1.8.6 from the stack trace.

Not sure, FragmentContainerView doesn't have that kind of control and just hands off to the core functions. Also the lines not matching up does likely mean the version are off. Can we get a sample project that reproduces the issue and we can have a closer look?

Hi enxyox@,

Do you know if this can happen on Pixel devices or emulators which run Android 8.0.0? If so, do you mind sharing a sample app for us to reproduce and investigate?

I couldn't reproduce this myself on an emulator running Android 8.0.0, so I only have stack traces from Crashlytics/Sentry. We've now gathered a bit more data, and the crash also occurs on Android 9.0 on the S119 device, though the majority (96%) is still on Android 8.0.0.

Some users experienced the crash when switching fragments (navigating to another screen), some right upon opening the app, and others when changing configuration. I can say for sure that this happens under rare conditions, as in our case, it has affected about 14% of users on Android 8.0.0.

I do have a hacky way to do this. I am not proud of this approach but it gets the job done.

==============================

IMPORTANT!!!!!!!!!: For this to work, the buttons in the cards need to have different widths. They should differ by at least 5px. You can easily do this by adding some 2dp or 3dp padding to one of them which is barely noticeable._

This is needed because I am using the widths to identify each button in BringIntoView spec.

==============================

Checkout the attached video for demo.

App.kt

@Composable
fun App() {
    var cardWidth by remember { mutableStateOf<Float?>(null) }
    var firstButtonWidth by remember { mutableStateOf<Float?>(null) }
    var secondButtonWidth by remember { mutableStateOf<Float?>(null) }
    var cardLeftOffset by remember { mutableStateOf<Float?>(null) }
    var firstButtonLeftOffset by remember { mutableStateOf<Float?>(null) }
    var secondButtonLeftOffset by remember { mutableStateOf<Float?>(null) }
    val firstButtonDistanceFromCardLeft = remember(firstButtonLeftOffset, cardLeftOffset) {
        derivedStateOf {
            when {
                firstButtonLeftOffset == null -> null
                cardLeftOffset == null -> null
                else -> firstButtonLeftOffset!! - cardLeftOffset!!
            }
        }
    }
    val secondButtonDistanceFromCardLeft =
        remember(secondButtonLeftOffset, cardLeftOffset) {
            derivedStateOf {
                when {
                    secondButtonLeftOffset == null -> null
                    cardLeftOffset == null -> null
                    else -> secondButtonLeftOffset!! - cardLeftOffset!!
                }
            }
        }

    PositionFocusedItemInLazyLayoutHacky(
        cardWidth = cardWidth ?: 0f,
        firstButtonWidth = firstButtonWidth ?: 0f,
        secondButtonWidth = secondButtonWidth ?: 0f,
        firstButtonLeftOffset = firstButtonDistanceFromCardLeft.value ?: 0f,
        secondButtonLeftOffset = secondButtonDistanceFromCardLeft.value ?: 0f,
    ) {
        LazyRow(
            Modifier
                .fillMaxWidth()
                .padding(top = 20.dp),
            contentPadding = PaddingValues(20.dp),
            horizontalArrangement = Arrangement.spacedBy(20.dp)
        ) {
            items(20) { buttonIndex ->
                Surface(
                    modifier = Modifier
                        .width(220.dp)
                        .aspectRatio(16f / 9)
                        .onPlaced {
                            if (buttonIndex == 0 && cardLeftOffset == null && cardWidth == null) {
                                cardLeftOffset = it.positionInRoot().x
                                cardWidth = it.size.width.toFloat()
                            }
                        },
                    shape = RoundedCornerShape(10.dp)
                ) {
                    Row(
                        modifier = Modifier.fillMaxSize(),
                        horizontalArrangement = Arrangement.Center,
                        verticalAlignment = Alignment.CenterVertically
                    ) {
                        Button(
                            onClick = { },
                            modifier = Modifier.onPlaced {
                                if (buttonIndex == 0 && firstButtonWidth == null && firstButtonLeftOffset == null) {
                                    firstButtonWidth = it.size.width.toFloat()
                                    firstButtonLeftOffset = it.positionInRoot().x
                                }
                            },
                        ) {
                            Text("Button 1")
                        }

                        Spacer(Modifier.width(20.dp))

                        Button(
                            onClick = { },
                            modifier = Modifier.onPlaced {
                                if (buttonIndex == 0 && secondButtonWidth == null && secondButtonLeftOffset == null) {
                                    secondButtonWidth = it.size.width.toFloat()
                                    secondButtonLeftOffset = it.positionInRoot().x
                                }
                            },
                        ) {
                            Text("Button 100")
                        }
                    }
                }
            }
        }
    }
}

PositionFocusedItemInLazyLayoutHacky.kt

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun PositionFocusedItemInLazyLayoutHacky(
    parentFraction: Float = 0.3f,
    childFraction: Float = 0f,
    cardWidth: Float = 0f,
    firstButtonWidth: Float = 0f,
    secondButtonWidth: Float = 0f,
    firstButtonLeftOffset: Float = 0f,
    secondButtonLeftOffset: Float = 0f,
    content: @Composable () -> Unit,
) {
    val bringIntoViewSpec =
        remember(
            parentFraction,
            childFraction,
            firstButtonWidth,
            secondButtonWidth,
            firstButtonLeftOffset,
            secondButtonLeftOffset,
            cardWidth
        ) {
            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 = cardWidth <= containerSize
                    val initialTargetForLeadingEdge =
                        parentFraction * containerSize - (childFraction * cardWidth)
                    val spaceAvailableToShowItem = containerSize - initialTargetForLeadingEdge

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

                    val cardOffset = when (size) {
                        firstButtonWidth -> offset - firstButtonLeftOffset
                        secondButtonWidth -> offset - secondButtonLeftOffset
                        // if you have more buttons, add more conditions here
                        else -> offset
                    }

                    return cardOffset - targetForLeadingEdge
                }
            }
        }

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

Thanks for the feedback! As mentioned in the solution, the approach is a workaround specifically for the use case described in comment#7. The aim of this solution was to give you some idea for working around the current limitations of the BringIntoViewSpec.

The PivotOffset solution in BringIntoViewContainer is designed with Android TV UI guidelines in mind. These guidelines recommend a single focusable element, typically a card, within a LazyRow. This is because TVs generally have a different interaction mechanism than mobile or desktop devices.

Our library aims to provide APIs and components that cater to the majority of use cases (around 90%). Supporting every possible scenario could significantly increase complexity for most users. The TV guidelines themselves are based on extensive research and analysis of popular TV apps, aiming to address common design patterns.

Your specific use case, involving buttons with dynamic behavior and dependencies, represents a more specialized and complex UI experience. While we appreciate your input, such designs might deviate from established TV UI guidelines.

In situations where the library's current functionality doesn't fully align with your needs, we encourage developers to explore customizing the components. In this instance, you could consider forking the LazyRow component and modifying the BringIntoView spec implementation to achieve your desired behavior.

Rest assured, we are continuously monitoring user feedback and requests. If we observe a growing demand for similar functionalities, we will certainly re-evaluate our design choices and potentially introduce new features or updates to better accommodate such use cases.

To ensure a smooth and intuitive user experience, we recommend following the Android TV UI guidelines. These guidelines are based on extensive UX research and offer valuable insights for designing effective TV interfaces.

We encourage you to follow these guidelines while building UI experiences for TV devices. Following these guidelines can also help you leverage existing components that work seamlessly out-of-the-box or require minimal adjustments, streamlining your UI development process.

You can find the guidelines here:

https://developer.android.com/design/ui/tv/guides/foundations/design-for-tv

Checkout all the following sections from the above doc:

1. Foundations
2. Components
3. Styles

This is also blocking our team from going full compose for some layouts. For now we have to use https://github.com/rubensousa/DpadRecyclerView/ with sub positions, which gets the job done

as a temporary workaround, you can use the following approach until an official fix is released:

@OptIn(ExperimentalFoundationApi::class)
internal fun Modifier.bringIntoViewIfChildrenAreFocused(): Modifier = composed(
    inspectorInfo = debugInspectorInfo { name = "bringIntoViewIfChildrenAreFocused" },
    factory = {
        var rect by remember { mutableStateOf(Rect.Zero) }

        onSizeChanged {
            // Update the current visible rectangle based on the container's size.
            rect = Rect(
                topLeft = Offset.Zero,
                bottomRight = Offset(it.width.toFloat(), it.height.toFloat())
            )
        }.bringIntoViewResponder(
            remember {
                object : BringIntoViewResponder {

                    @ExperimentalFoundationApi
                    override fun calculateRectForParent(localRect: Rect): Rect = rect

                    @ExperimentalFoundationApi
                    override suspend fun bringChildIntoView(localRect: () -> Rect?) {
                        // No action required as the container is non-scrollable.
                    }
                }
            }
        )
    }
)

apply it to your cell's modifiers like this:

Cell(
    modifier = modifier
        .bringIntoViewIfChildrenAreFocused()
        // ...
)

this ensures the view behaves correctly in the interim

you should add the modifier to the parent item (e.g. a Card) that contains the focusable buttons. this approach ensures that the parent item is brought into the desired position when a child button is focused.

in your example (LazyColumn/ item/ each button), the modifier should be applied to the item.

this solution is stable and has been used in production. however, please note that I am not an official Google developer, so I can't speak to when an official fix for this issue might be released.

here's a simple implementation example:

LazyRow(...) {
    Card(
        modifier = Modifier.bringIntoViewIfChildrenAreFocused()
    ) {
        Button()
        Button()
    }
}