IssueTracker

r.android.com/3205674 will be the last change adding linux stubs to androidx.compose.material3.adaptive

For adaptive, follow along on https://issuetracker.google.com/issues/357731734

Thanks for the example. Yes, this is a bug. The fix is in review.

Good day!

What if I need to provide concrete focus order on the page (focusProperties: next, previous) on the device with only two nav buttons left direction and right direction, how does should it look like?

I've tried to do example with fixes regarding focus in LazyColumn but it doesn't work for this case. Focus is going crazy.

Compose version: 1.2.0-beta02

Example 1 - Without setting Focus options for each element of list (will fail if go to the 'After btn 1' by pressing left btn direction 2 times and then one more time left)

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.OutlinedButton
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.key.*
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalComposeUiApi::class)
@Preview
@Composable
fun FocusTestPage() {
    val focusManager = LocalFocusManager.current
    val beforeFocus1 = remember { FocusRequester() }
    val beforeFocus2 = remember { FocusRequester() }
    val afterFocus1 = remember { FocusRequester() }
    val afterFocus2 = remember { FocusRequester() }
    val firstItemFocus = remember { FocusRequester() }
    val lastItemFocus = remember { FocusRequester() }

    Column(
        modifier = Modifier.onKeyEvent {
            if (it.type != KeyEventType.KeyDown)
                return@onKeyEvent false

            return@onKeyEvent when (it.key) {
                Key.DirectionDown, Key.DirectionRight -> {
                    focusManager.moveFocus(FocusDirection.Next)
                    true
                }
                Key.DirectionUp, Key.DirectionLeft -> {
                    focusManager.moveFocus(FocusDirection.Previous)
                    true
                }
                else -> false
            }
        }
    ) {
        Row {
            FocusableBtn(
                text = "Before btn 1",
                modifier = Modifier.focusProperties {
                    previous = afterFocus2
                    next = beforeFocus2
                },
                focusRequester = beforeFocus1
            )
            FocusableBtn(
                text = "Before btn 2",
                modifier = Modifier.focusProperties {
                    previous = beforeFocus1
                    next = firstItemFocus
                },
                focusRequester = beforeFocus2
            )
        }

        LazyColumn(
            modifier = Modifier.height(300.dp)
        ) {
            items(20) { i ->
                when (i) {
                    0 -> {
                        FocusableBtn(
                            text = "First list btn $i",
                            modifier = Modifier.focusProperties {
                                previous = beforeFocus2
                            },
                            focusRequester = firstItemFocus
                        )
                    }
                    19 -> {
                        FocusableBtn(
                            text = "Last list btn $i",
                            modifier = Modifier.focusProperties {
                                next = afterFocus1
                            },
                            focusRequester = lastItemFocus
                        )
                    }
                    else -> {
                        FocusableBtn(
                            text = "List btn $i"
                        )
                    }
                }
            }
        }

        Row {
            FocusableBtn(
                text = "After btn 1",
                modifier = Modifier.focusProperties {
                    previous = lastItemFocus
                    next = afterFocus2
                },
                focusRequester = afterFocus1
            )
            FocusableBtn(
                text = "After btn 2",
                modifier = Modifier.focusProperties {
                    previous = afterFocus1
                    next = beforeFocus1
                },
                focusRequester = afterFocus2
            )
        }
    }
}

@Composable
fun FocusableBtn(
    text: String,
    modifier: Modifier = Modifier,
    focusRequester: FocusRequester = FocusRequester(),
) {
    var color by remember { mutableStateOf(Color.White) }
    OutlinedButton(
        modifier = Modifier
            .focusRequester(focusRequester)
            .onFocusChanged {
                color = if (it.isFocused) Color.Red else Color.White
            }
            .then(modifier)
            .focusable(),
        onClick = { /*TODO*/ },
        border = BorderStroke(2.dp, color)
    ) {
        Text(text = text)
    }
}

Example 2 - Setting focus options for each LazyList item (will fail with java.lang.IllegalStateException: FocusRequester is not initialized. )

package com.augvantis.careviewjetpack.pages

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.lazy.LazyColumn
import androidx.compose.material.OutlinedButton
import androidx.compose.material.Text
import androidx.compose.runtime.*
import androidx.compose.ui.ExperimentalComposeUiApi
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.*
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.input.key.*
import androidx.compose.ui.platform.LocalFocusManager
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalComposeUiApi::class)
@Preview
@Composable
fun FocusTestPage() {
    val focusManager = LocalFocusManager.current
    val beforeFocus1 = remember { FocusRequester() }
    val beforeFocus2 = remember { FocusRequester() }
    val afterFocus1 = remember { FocusRequester() }
    val afterFocus2 = remember { FocusRequester() }
    val focusList = remember { List(20) { FocusRequester() } }

    Column(
        modifier = Modifier.onKeyEvent {
            if (it.type != KeyEventType.KeyDown)
                return@onKeyEvent false

            return@onKeyEvent when (it.key) {
                Key.DirectionDown, Key.DirectionRight -> {
                    focusManager.moveFocus(FocusDirection.Next)
                    true
                }
                Key.DirectionUp, Key.DirectionLeft -> {
                    focusManager.moveFocus(FocusDirection.Previous)
                    true
                }
                else -> false
            }
        }
    ) {
        Row {
            FocusableBtn(
                text = "Before btn 1",
                modifier = Modifier.focusProperties {
                    previous = afterFocus2
                    next = beforeFocus2
                },
                focusRequester = beforeFocus1
            )
            FocusableBtn(
                text = "Before btn 2",
                modifier = Modifier.focusProperties {
                    previous = beforeFocus1
                    next = focusList[0]
                },
                focusRequester = beforeFocus2
            )
        }

        LazyColumn(
            modifier = Modifier.height(300.dp)
        ) {
            items(20) { i ->
                when (i) {
                    0 -> {
                        FocusableBtn(
                            text = "First list btn $i",
                            modifier = Modifier.focusProperties {
                                previous = beforeFocus2
                                next = focusList[1]
                            },
                            focusRequester = focusList[0]
                        )
                    }
                    19 -> {
                        FocusableBtn(
                            text = "Last list btn $i",
                            modifier = Modifier.focusProperties {
                                previous = focusList[18]
                                next = afterFocus1
                            },
                            focusRequester = focusList[19]
                        )
                    }
                    else -> {
                        FocusableBtn(
                            text = "List btn $i",
                            modifier = Modifier.focusProperties {
                                previous = focusList[i-1]
                                next = focusList[i+1]
                            },
                            focusRequester = focusList[i]
                        )
                    }
                }
            }
        }

        Row {
            FocusableBtn(
                text = "After btn 1",
                modifier = Modifier.focusProperties {
                    previous = focusList[19]
                    next = afterFocus2
                },
                focusRequester = afterFocus1
            )
            FocusableBtn(
                text = "After btn 2",
                modifier = Modifier.focusProperties {
                    previous = afterFocus1
                    next = beforeFocus1
                },
                focusRequester = afterFocus2
            )
        }
    }
}

@Composable
fun FocusableBtn(
    text: String,
    modifier: Modifier = Modifier,
    focusRequester: FocusRequester = FocusRequester(),
) {
    var color by remember { mutableStateOf(Color.White) }
    OutlinedButton(
        modifier = Modifier
            .focusRequester(focusRequester)
            .onFocusChanged {
                color = if (it.isFocused) Color.Red else Color.White
            }
            .then(modifier)
            .focusable(),
        onClick = { /*TODO*/ },
        border = BorderStroke(2.dp, color)
    ) {
        Text(text = text)
    }
}

Example of focus ordering in image attachment

Thanks, Vadim

Hi Vadim,

In your example above, the issue seems to be that you are adding a focusable to OutlinedButton. Buttons use a focusable internally, so you don't need to add another one. I tried out your example, and just commenting out the line with focusable() from FocusableBtn seems to fix the issue.

However we can simplify your sample a little, after you switch to a build that includes aosp/2115574. To get the order you want, you would have to make the Column and Row focusGroups. LazyColumn is already a focus group since it uses a scrollable internally but Row and Column are not, since they are not scrollable. This is how you would do it:

@OptIn(ExperimentalComposeUiApi::class, ExperimentalFoundationApi::class)
@Preview
@Composable
fun FocusTestPage2() {
    val focusManager = LocalFocusManager.current
    fun Modifier.only1DFocusSearch() = onKeyEvent {
        if (it.type != KeyDown) return@onKeyEvent false
        when (it.key) {
            DirectionDown, DirectionRight -> { focusManager.moveFocus(Next); true }
            DirectionUp, DirectionLeft -> { focusManager.moveFocus(Previous); true }
            else -> false
        }
    }

    Column(Modifier.only1DFocusSearch().focusGroup()) {
        Row(Modifier.focusGroup()) {
            FocusableBtn("Before btn 1")
            FocusableBtn("Before btn 2")
        }

        LazyColumn(Modifier.height(300.dp)) {
            items(20) {
                FocusableBtn("List btn $it")
            }
        }

        Row(Modifier.focusGroup()) {
            FocusableBtn("After btn 1")
            FocusableBtn("After btn 2")
        }
    }
}

@Composable
fun FocusableBtn(text: String, modifier: Modifier = Modifier) {
    var color by remember { mutableStateOf(White) }
    OutlinedButton(
        modifier = modifier.onFocusChanged { color = if (it.isFocused) Red else White },
        onClick = { /*TODO*/ },
        border = BorderStroke(2.dp, color)
    ) {
        Text(text = text)
    }
}

Note: An additional unrelated suggestion: Outlined Button already provides focused indication so you don't have to add the border around the box when it is focused, (unless of course, you have some use-case that needs it).

Hi Ralston,

Apologies for pinging this issue. Not sure if its the right place but I just wanted to follow up what control we have on the scroll behaviour / if I have missed something. This is based on the Android TV DPAD use case.

We have a layout similar to below (i've also attached a sample at the end + a screenshot)

LazyColumn(state = lazyColumnListState) {  
    items(COLUMN_ITEM_COUNT) { columnIndex ->  
        Column(  
            modifier = Modifier  
        ) {  
            Text(  
                "I am section $columnIndex"  
            )  
            LazyRow(horizontalArrangement = Arrangement.spacedBy(4.dp)) {  
                items(ROW_ITEM_COUNT) { rowIndex ->
					FocusableItem()
					
					..........................

If we rely on the bringinto view provided by the lazy list then when scrolling up only the row is brought into view (without the title).

We then naturally end up trying to use animateScrollToItem which then runs into the issues of cancelled scrolls caused by bring into view. This / workarounds are talked about here https://issuetracker.google.com/issues/212982472

Is there better way to control the behaviour of lazy list scrolling that I have missed or is the best workaround to copy focusable and clickable (clickable is harder as it references package internal items) into source and remove the bringintoview call?

Examples of all the stuff mentioned above with comments available here https://github.com/nathan-castlehow/Lazyscrollingissue

Thanks! Nathan

Hi Nathan,

Thanks for raising this issue. Instead of trying to cancel the default bringIntoView behavior and start a new animation, you can intercept the bringIntoView request instead:

@OptIn(ExperimentalFoundationApi::class)
@Composable
fun BringTitleIntoView(){
    LazyColumn {
        items(10) { columnIndex ->
            val bringIntoViewRequester = remember { BringIntoViewRequester() }
            val bringIntoViewResponder = remember { CustomBringIntoViewResponder(bringIntoViewRequester) }
            Column(
                modifier = Modifier
                    .bringIntoViewRequester(bringIntoViewRequester)
                    .bringIntoViewResponder(bringIntoViewResponder)
            ) {
                Text("I am section $columnIndex")
                LazyRow(horizontalArrangement = Arrangement.spacedBy(4.dp)) {
                    items(10) { rowIndex ->
                        Text(text = "$columnIndex $rowIndex", Modifier.focusable())
                    }
                }
            }
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
private class CustomBringIntoViewResponder(private val parent: BringIntoViewRequester) : BringIntoViewResponder {
    @ExperimentalFoundationApi
    override fun calculateRectForParent(localRect: Rect): Rect {
        return localRect
    }

    @ExperimentalFoundationApi
    override suspend fun bringChildIntoView(localRect: Rect) {
        parent.bringIntoView()
    }
}

Hi Ralston.

Thanks for your replies here and in the other thread. In our case we want to center the focused row (so whatever is focused is in the middle of the screen), but struggle to do so. Seems like CustomBringIntoViewResponder is quite relevant in this case, but we experience that we "overshoot" when using the localrect provided by bringChildIntoView - at least for the views that aren't visible when you move focus.

We have tried to dig a bit into the implementation and think it might be related to that the underlying scrollable starts the scroll and thus localRect isn't up to date when we receive it (or when we cancel the scroll by start scrolling). In that case we might need to implement our own LazyColumn/LazyRow (as you also suggest here: https://issuetracker.google.com/issues/212982472#comment8), but it would be really nice if we didn't have to copy/paste a lot of implementation with the risk of adding bugs (or not getting the future bugfixes).

We've tried to return various rects for calculateRectForParent without any luck. We'll be happy to provide more info if helps.

Best regards Anders

Hi again.

Just tried to make a simple example that shows our issue. It's really a simple version of it, but it still happens in this case. Here we're only using a lazy row, but happens for columns. If you uncomment the to log-statmenst (and print them to log) it's clear that when you navigate to item with index 4 (that's not fully visible) we're basing out calculations on an outdated localRect.

Hope this shows what our issue is.

Best regards Anders

@OptIn(ExperimentalFoundationApi::class)
@Composable
private fun BringIntoViewCentered() {
    val rowListState = rememberLazyListState()
    val bringIntoViewResponder = remember(rowListState) { BringIntoViewCenterResponder(rowListState) }
    LazyRow(
        state = rowListState,
        modifier = Modifier.bringIntoViewResponder(bringIntoViewResponder)
    ) {
        listOf(1.until(10), 8.downTo(1)).flatten().forEachIndexed { index, itemFraction ->
            item {
                val interactionSource = remember { MutableInteractionSource() }
                val isFocused by interactionSource.collectIsFocusedAsState()
                Text(
                    text = "#$index",
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .fillParentMaxWidth(fraction = itemFraction.toFloat() / 10)
                        .focusable(interactionSource = interactionSource)
                        .background(if (isFocused) Color.Green else if (itemFraction % 2 == 0) Color.Red else Color.Blue)
                        .padding(vertical = 16.dp)
                )
            }
        }
    }
}

@OptIn(ExperimentalFoundationApi::class)
class BringIntoViewCenterResponder(private val listState: LazyListState) : BringIntoViewResponder {
    @ExperimentalFoundationApi
    override fun calculateRectForParent(localRect: Rect): Rect {
        return localRect
    }

    @ExperimentalFoundationApi
    override suspend fun bringChildIntoView(localRect: Rect) {
        val parentWidth = listState.layoutInfo.viewportSize.width
        val destinationLeft = (parentWidth / 2) - (localRect.width / 2)
        val scrollDelta = localRect.left - destinationLeft

        listState.stopScroll() // Just for debug purposes, animateScrollBy would normally do this
        // When scrolling to item #4 (zero-indexed) this clearly shows that the list has been scrolled after localRect was calculated
        // LOG - expected left offset: "Local rect left: ${localRect.left}"
        // LOG - actual left offset: "Visible items offset after scroll cancel: ${listState.layoutInfo.visibleItemsInfo.joinToString("; ") { "#${it.index}: ${it.offset}" }}"
        listState.animateScrollBy(scrollDelta)
    }
}

With 1.2.0-rc03, we are also running into the same D-Pad focus issues with nested LazyLists as described in #22. I'm guessing that the fix described in #23 hasn't landed in a release yet?

Hi there,

I'm trying to use LazyVerticalGrid with Dpad and noticing that the items do not scroll past the visible items. I assume as per comment #3 this behavior should work with LazyVerticalGrid as well.

Using compose version: 1.3.0-alpha03

Here is an example to test the focus behavior:

@Composable
fun GridExample() {
    LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
        items(100) { index ->
            FocusableBox() {
                Text("$index")
            }
        }
    }
}

@Composable
private fun FocusableBox(
    modifier: Modifier = Modifier,
    content: @Composable BoxScope.() -> Unit = {}
) {
    var borderColor by remember { mutableStateOf(Color.Black) }
    Box(
        modifier = modifier
            .size(100.dp)
            .padding(2.dp)
            .onFocusChanged { borderColor = if (it.isFocused) Color.Red else Color.Black }
            .border(2.dp, borderColor)
            .focusable(),
        content = content
    )
}

@vrkovvuru: The code changed over time, and now LazyGrid uses a separate implementation. We need to repeat this implementation for LazyGrid. Filed b/242873216 to track this.

Hi there,

I'm trying to use LazyRow in LazyColumn with Dpad and I saw some delay with move focus to down. It seems to be due to the recomposition of all items in the LazyRow from which the focus is moved. Then more elements in LazyRaw, the greater the delay when moving focus

Using compose version: 1.2.0

Here is an example to test the focus behavior:

LazyColumn {
    items(20) { verticalIndex ->
        LazyRow{
            items(500) { horizontalIndex ->
                println("There is recomposition item with index=$verticalIndex,$horizontalIndex")
                var color by remember { mutableStateOf(Color.White) }
                Text(
                    text = "$verticalIndex,$horizontalIndex",
                    fontSize = 50.sp,
                    textAlign = TextAlign.Center,
                    modifier = Modifier
                        .size(100.dp)
                        .border(2.dp, Color.Gray)
                        .onFocusChanged { color = if (it.isFocused) Color.Red else Color.White }
                        .background(color)
                        .focusable()
                )
            }
        }
    }
}

Hello, I'm trying to replicate Leanback focus behavior and failed. What I'm came up with is that I totally abandoned LazyColumn DPad handling and overrided keyEvent. I store focus requesters for each item in the hashmap and track selected position in a state variable. Then I animate scroll gallery row to the center of the window and then request focus.

	.onKeyEvent {
				// completeley custom focus handling
				// the relevant issue https://issuetracker.google.com/issues/184670295
				// it may be better in the future
				val code = it.nativeKeyEvent.keyCode
				var pos = focusedItemPosition.value
				var move = false
				var isUp = false
				var direction = FocusDirection.Next
				if (it.nativeKeyEvent.action == KeyEvent.ACTION_DOWN) {
					when (code) {
						KeyEvent.KEYCODE_DPAD_LEFT -> {
							direction = FocusDirection.Left
							move = true
							pos--
						}
						KeyEvent.KEYCODE_DPAD_RIGHT -> {
							direction = FocusDirection.Right
							move = true
							pos++
						}
						KeyEvent.KEYCODE_DPAD_UP -> {
							direction = FocusDirection.Up
							move = true
							pos -= columnsCount
						}
						KeyEvent.KEYCODE_DPAD_DOWN -> {
							direction = FocusDirection.Down
							move = true
							pos += columnsCount
						}
						else -> Unit
					}
					isUp = pos < 0
					pos = pos.coerceIn(0, collectionItems.lastIndex)
					focusedItemPosition.value = pos
				}
				if (move) {
					scope.launchSafe {
						if (focusedItemPosition.value != pos) return@launchSafe
						if (isUp) {
							lazyGridState.animateScrollToItem(0, 0)
							focusManager.moveFocus(FocusDirection.Up)
						} else {
							val animateTo = (pos / columnsCount) + 1
							lazyGridState.animateScrollToItem(animateTo, -150)
							val fr = focusRequesterByPosition[pos]?.invoke()
							if (fr == null) {
								focusManager.moveFocus(direction) // possible fix crash
							} else {
								fr.requestFocus()
							}
						}
					}
				}
				return@onKeyEvent move
			}

Sometimes, however, focus jumps to unknown location and causing a crash :(

Thanks for reporting this issue. It should be fixed by https://android-review.googlesource.com/c/platform/frameworks/support/+/2255266

The following release(s) address this bug:

• androidx.compose.foundation:foundation:1.3.0
• androidx.compose.ui:ui:1.3.0

It still looks broken/slow in 1.4.0-alpha01.

Very slow in 1.4.0-alpha02. The issue seems to be when BringIntoViewRequester is used

I investigated the issue mentioned in #37, #39, #42, #43 and #44 because it also critically impacts me and created a new bug: b/269627309. I hope the details aid in fixing this issue faster. Meanwhile, there is a workaround: do not nest focus target modifiers inside a lazy layout. Regarding #39 specifically, it's faster scrolling back up because there's less items to recompose.

I am using androidx.compose.ui:ui:1.5.0. I found focus will jump to unexpected item when using LazyVerticalGrid.

@Composable
fun GridView() {
    LazyVerticalGrid(columns = GridCells.Adaptive(minSize = 128.dp)) {
        items(100) { index ->
            FocusableBox(index = index) {
                Text("$index")
            }
        }
    }
}

@Composable
private fun FocusableBox(
    modifier: Modifier = Modifier,
    index: Int,
    content: @Composable BoxScope.() -> Unit = {}
) {
    var borderColor by remember { mutableStateOf(Color.Black) }
    Box(
        modifier = modifier
            .size(100.dp)
            .padding(2.dp)
            .onFocusChanged {
                Log.d("Test", "onFocusChanged index: $index  $it")
                borderColor = if (it.isFocused) Color.Red else Color.Black
            }
            .border(2.dp, borderColor)
            .focusable(),
        content = content
    )
}

Each row has 7 items. Current focus item is 0. After press Dpad key down, the expected focus item should be 7. But it moved to 8.

Output log:

2023-08-29 14:52:01.493 23514-23514  onFocusChanged index: 0  Inactive
2023-08-29 14:52:01.504 23514-23514  onFocusChanged index: 7  Active
2023-08-29 14:52:01.550 23514-23514  onFocusChanged index: 7  Inactive
2023-08-29 14:52:01.551 23514-23514  onFocusChanged index: 8  Active