requestFocusOnHierarchyActive

Functions summary

Modifier

This Modifier is used in conjunction with hierarchicalFocusGroup and will request focus on the following focusable element when needed (i.e. this needs to be before that element in the Modifier chain).

Functions

Modifier.requestFocusOnHierarchyActive

fun Modifier.requestFocusOnHierarchyActive(): Modifier

This Modifier is used in conjunction with hierarchicalFocusGroup and will request focus on the following focusable element when needed (i.e. this needs to be before that element in the Modifier chain). The focusable element is usually a androidx.wear.compose.foundation.rotary.rotaryScrollable (or, in some rarer cases a androidx.compose.foundation.focusable or androidx.compose.ui.focus.focusTarget)

Multiple requestFocusOnHierarchyActive Modifiers shouldn't be siblings, in those cases they need to surround each with a hierarchicalFocusGroup, and at most one of them should have active = true, to inform which requestFocusOnHierarchyActive should get the focus.

NOTE: This shouldn't be used together with FocusRequester.requestFocus calls in LaunchedEffect.

Example usage:

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.wear.compose.foundation.hierarchicalFocusGroup
import androidx.wear.compose.foundation.requestFocusOnHierarchyActive

var selected by remember { mutableIntStateOf(0) }

Row(Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically) {
    repeat(5) { colIx ->
        Box(
            Modifier.hierarchicalFocusGroup(active = selected == colIx)
                .weight(1f)
                .clickable { selected = colIx }
                .then(
                    if (selected == colIx) {
                        Modifier.border(BorderStroke(2.dp, Color.Red))
                    } else {
                        Modifier
                    }
                )
        ) {
            // This is used a Gray background to the currently focused item, as seen by the
            // focus system.
            var focused by remember { mutableStateOf(false) }

            BasicText(
                "$colIx",
                style =
                    TextStyle(
                        color = Color.White,
                        fontSize = 20.sp,
                        textAlign = TextAlign.Center,
                    ),
                modifier =
                    Modifier.fillMaxWidth()
                        .requestFocusOnHierarchyActive()
                        .onFocusChanged { focused = it.isFocused }
                        .focusable()
                        .then(
                            if (focused) {
                                Modifier.background(Color.Gray)
                            } else {
                                Modifier
                            }
                        ),
            )
        }
    }
}