Google is committed to advancing racial equity for Black communities. See how.

androidx.ui.foundation.selection

Enums

ToggleableState

Enum that represents possible toggleable states.

Top-level functions summary

ToggleableState

Return corresponding ToggleableState based on a Boolean representation

Extension functions summary

For Modifier
Modifier
Modifier.selectable(selected: Boolean, enabled: Boolean = true, inMutuallyExclusiveGroup: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, indication: Indication? = IndicationAmbient.current(), onClick: () -> Unit)

Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time.

Modifier
Modifier.toggleable(value: Boolean, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, indication: Indication? = IndicationAmbient.current(), onValueChange: (Boolean) -> Unit)

Configure component to make it toggleable via input and accessibility events

Modifier
Modifier.triStateToggleable(state: ToggleableState, enabled: Boolean = true, interactionState: InteractionState = remember { InteractionState() }, indication: Indication? = IndicationAmbient.current(), onClick: () -> Unit)

Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate.

Top-level functions

ToggleableState

fun ToggleableState(value: Boolean): ToggleableState

Return corresponding ToggleableState based on a Boolean representation

Parameters
value: Boolean whether the ToggleableState is on or off

Extension functions

selectable

@Composable fun Modifier.selectable(
    selected: Boolean,
    enabled: Boolean = true,
    inMutuallyExclusiveGroup: Boolean = true,
    interactionState: InteractionState = remember { InteractionState() },
    indication: Indication? = IndicationAmbient.current(),
    onClick: () -> Unit
): Modifier

Configure component to be selectable, usually as a part of a mutually exclusive group, where only one item can be selected at any point in time. A typical example of mutually exclusive set is androidx.ui.material.RadioGroup

If you want to make an item support on/off capabilities without being part of a set, consider using Modifier.toggleable

import androidx.compose.state
import androidx.ui.foundation.Box
import androidx.ui.foundation.Text
import androidx.ui.foundation.drawBackground
import androidx.ui.foundation.selection.selectable
import androidx.ui.layout.Column
import androidx.ui.layout.Row
import androidx.ui.layout.size

val option1 = Color.Red
val option2 = Color.Blue
var selectedOption by state { option1 }
Column {
    Text("Selected: $selectedOption")
    Row {
        listOf(option1, option2).forEach { color ->
            val selected = selectedOption == color
            Box(
                Modifier
                    .size(100.dp)
                    .drawBackground(color)
                    .selectable(
                        selected = selected,
                        onClick = { selectedOption = color }
                    )
            )
        }
    }
}
Parameters
selected: Boolean whether or not this item is selected in a mutually exclusion set
onClick: () -> Unit callback to invoke when this item is clicked
enabled: Boolean = true whether or not this selectable will handle input events and appear enabled from a semantics perspective
inMutuallyExclusiveGroup: Boolean = true whether or not this item is a part of mutually exclusive group, meaning that only one of these items can be selected at any point of time
interactionState: InteractionState = remember { InteractionState() } InteractionState that will be updated when this element is pressed, using Interaction.Pressed
indication: Indication? = IndicationAmbient.current() indication to be shown when the modified element is pressed. By default, the indication from IndicationAmbient will be used. Set to null to show no indication

toggleable

@Composable fun Modifier.toggleable(
    value: Boolean,
    enabled: Boolean = true,
    interactionState: InteractionState = remember { InteractionState() },
    indication: Indication? = IndicationAmbient.current(),
    onValueChange: (Boolean) -> Unit
): Modifier

Configure component to make it toggleable via input and accessibility events

import androidx.compose.state
import androidx.ui.foundation.Text
import androidx.ui.foundation.selection.toggleable

var checked by state { false }
// content that you want to make toggleable
Text(
    modifier = Modifier.toggleable(value = checked, onValueChange = { checked = it }),
    text = checked.toString()
)
Parameters
value: Boolean whether Toggleable is on or off
onValueChange: (Boolean) -> Unit callback to be invoked when toggleable is clicked, therefore the change of the state in requested.
enabled: Boolean = true whether or not this toggleable will handle input events and appear enabled for semantics purposes
interactionState: InteractionState = remember { InteractionState() } InteractionState that will be updated when this toggleable is pressed, using Interaction.Pressed
indication: Indication? = IndicationAmbient.current() indication to be shown when modified element is pressed. Be default, indication from IndicationAmbient will be used. Pass null to show no indication

triStateToggleable

@Composable fun Modifier.triStateToggleable(
    state: ToggleableState,
    enabled: Boolean = true,
    interactionState: InteractionState = remember { InteractionState() },
    indication: Indication? = IndicationAmbient.current(),
    onClick: () -> Unit
): Modifier

Configure component to make it toggleable via input and accessibility events with three states: On, Off and Indeterminate.

TriStateToggleable should be used when there are dependent Toggleables associated to this component and those can have different values.

import androidx.compose.state
import androidx.ui.foundation.Text
import androidx.ui.foundation.selection.triStateToggleable

var checked by state { ToggleableState.Indeterminate }
// content that you want to make toggleable
Text(
    modifier = Modifier.triStateToggleable(
        state = checked,
        onClick = {
            checked =
                if (checked == ToggleableState.On) ToggleableState.Off else ToggleableState.On
        }
    ),
    text = checked.toString())
Parameters
state: ToggleableState current value for the component
onClick: () -> Unit will be called when user clicks the toggleable.
enabled: Boolean = true whether or not this triStateToggleable will handle input events and appear enabled for semantics purposes
interactionState: InteractionState = remember { InteractionState() } InteractionState that will be updated when this toggleable is pressed, using Interaction.Pressed
indication: Indication? = IndicationAmbient.current() indication to be shown when modified element is pressed. Be default, indication from IndicationAmbient will be used. Pass null to show no indication