FocusOrder

Added in 1.0.0
Deprecated in 1.2.0

Specifies custom focus destinations that are used instead of the default focus traversal order.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier
                .focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item3)
                .focusProperties {
                    next = item4
                    right = item4
                    up = item1
                    previous = item2
                }
        )
        Box(
            Modifier
                .focusRequester(item4)
                .focusProperties {
                    next = item1
                    left = item3
                    up = item2
                    previous = item3
                }
        )
    }
}

Summary

Public constructors

Cmn

Public properties

FocusRequester

A custom item to be used when the user moves focus "down".

Cmn
FocusRequester

A custom item to be used when the user requests a focus moves to the "right" in LTR mode and "left" in RTL mode.

Cmn
FocusRequester

A custom item to be used when the user requests a focus moves to the "left" item.

Cmn
FocusRequester

A custom item to be used when the user requests a focus moves to the "next" item.

Cmn
FocusRequester

A custom item to be used when the user requests a focus moves to the "previous" item.

Cmn
FocusRequester

A custom item to be used when the user requests a focus moves to the "right" item.

Cmn
FocusRequester

A custom item to be used when the user requests a focus moves to the "left" in LTR mode and "right" in RTL mode.

Cmn
FocusRequester

A custom item to be used when the user moves focus "up".

Cmn

Public constructors

FocusOrder

FocusOrder()

Public properties

down

var downFocusRequester

A custom item to be used when the user moves focus "down".

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier
                .focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item3)
                .focusProperties {
                    next = item4
                    right = item4
                    up = item1
                    previous = item2
                }
        )
        Box(
            Modifier
                .focusRequester(item4)
                .focusProperties {
                    next = item1
                    left = item3
                    up = item2
                    previous = item3
                }
        )
    }
}

end

var endFocusRequester

A custom item to be used when the user requests a focus moves to the "right" in LTR mode and "left" in RTL mode.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier
                .focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item3)
                .focusProperties {
                    next = item4
                    right = item4
                    up = item1
                    previous = item2
                }
        )
        Box(
            Modifier
                .focusRequester(item4)
                .focusProperties {
                    next = item1
                    left = item3
                    up = item2
                    previous = item3
                }
        )
    }
}

left

var leftFocusRequester

A custom item to be used when the user requests a focus moves to the "left" item.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier
                .focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item3)
                .focusProperties {
                    next = item4
                    right = item4
                    up = item1
                    previous = item2
                }
        )
        Box(
            Modifier
                .focusRequester(item4)
                .focusProperties {
                    next = item1
                    left = item3
                    up = item2
                    previous = item3
                }
        )
    }
}

next

var nextFocusRequester

A custom item to be used when the user requests a focus moves to the "next" item.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier
                .focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item3)
                .focusProperties {
                    next = item4
                    right = item4
                    up = item1
                    previous = item2
                }
        )
        Box(
            Modifier
                .focusRequester(item4)
                .focusProperties {
                    next = item1
                    left = item3
                    up = item2
                    previous = item3
                }
        )
    }
}

previous

var previousFocusRequester

A custom item to be used when the user requests a focus moves to the "previous" item.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier
                .focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item3)
                .focusProperties {
                    next = item4
                    right = item4
                    up = item1
                    previous = item2
                }
        )
        Box(
            Modifier
                .focusRequester(item4)
                .focusProperties {
                    next = item1
                    left = item3
                    up = item2
                    previous = item3
                }
        )
    }
}

right

var rightFocusRequester

A custom item to be used when the user requests a focus moves to the "right" item.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier
                .focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item3)
                .focusProperties {
                    next = item4
                    right = item4
                    up = item1
                    previous = item2
                }
        )
        Box(
            Modifier
                .focusRequester(item4)
                .focusProperties {
                    next = item1
                    left = item3
                    up = item2
                    previous = item3
                }
        )
    }
}

start

var startFocusRequester

A custom item to be used when the user requests a focus moves to the "left" in LTR mode and "right" in RTL mode.

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier
                .focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item3)
                .focusProperties {
                    next = item4
                    right = item4
                    up = item1
                    previous = item2
                }
        )
        Box(
            Modifier
                .focusRequester(item4)
                .focusProperties {
                    next = item1
                    left = item3
                    up = item2
                    previous = item3
                }
        )
    }
}

up

var upFocusRequester

A custom item to be used when the user moves focus "up".

import androidx.compose.foundation.focusable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.remember
import androidx.compose.ui.focus.focusProperties
import androidx.compose.ui.focus.focusRequester

Column(Modifier.fillMaxSize(), Arrangement.SpaceEvenly) {
    val (item1, item2, item3, item4) = remember { FocusRequester.createRefs() }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item1)
                .focusProperties {
                    next = item2
                    right = item2
                    down = item3
                    previous = item4
                }
                .focusable()
        )
        Box(
            Modifier
                .focusRequester(item2)
                .focusProperties {
                    next = item3
                    right = item1
                    down = item4
                    previous = item1
                }
                .focusable()
        )
    }
    Row(Modifier.fillMaxWidth(), Arrangement.SpaceEvenly) {
        Box(
            Modifier
                .focusRequester(item3)
                .focusProperties {
                    next = item4
                    right = item4
                    up = item1
                    previous = item2
                }
        )
        Box(
            Modifier
                .focusRequester(item4)
                .focusProperties {
                    next = item1
                    left = item3
                    up = item2
                    previous = item3
                }
        )
    }
}