{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

SegmentedButtonKt

public final class SegmentedButtonKt


Summary

Public methods

static final void

Material Segmented Button.

static final void
@Composable
@ExperimentalMaterial3Api
SegmentedButton(
    @NonNull MultiChoiceSegmentedButtonRowScope receiver,
    boolean checked,
    @NonNull Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Shape shape,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull SegmentedButtonColors colors,
    @NonNull BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> icon,
    @Composable @NonNull Function0<Unit> label
)

Material Segmented Button.

static final void
@Composable
@ExperimentalMaterial3Api
SegmentedButton(
    @NonNull SingleChoiceSegmentedButtonRowScope receiver,
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @NonNull Shape shape,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull SegmentedButtonColors colors,
    @NonNull BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> icon,
    @Composable @NonNull Function0<Unit> label
)

Material Segmented Button.

static final void

Material Segmented Button.

Public methods

MultiChoiceSegmentedButtonRow

@Composable
@ExperimentalMaterial3Api
public static final void MultiChoiceSegmentedButtonRow(
    @NonNull Modifier modifier,
    @NonNull Dp space,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull MultiChoiceSegmentedButtonRowScopeUnit> content
)

Material Segmented Button.

A Layout to correctly position, size, and add semantics to SegmentedButtons in a Row. It handles overlapping items so that strokes of the item are correctly on top of each other.

MultiChoiceSegmentedButtonRow is used when the selection allows multiple value, for correct semantics.

import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.TrendingUp
import androidx.compose.material.icons.filled.BookmarkBorder
import androidx.compose.material.icons.filled.StarBorder
import androidx.compose.material3.MultiChoiceSegmentedButtonRow
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

val checkedList = remember { mutableStateListOf<Int>() }
val options = listOf("Favorites", "Trending", "Saved")
val icons = listOf(
    Icons.Filled.StarBorder,
    Icons.AutoMirrored.Filled.TrendingUp,
    Icons.Filled.BookmarkBorder
)
MultiChoiceSegmentedButtonRow {
    options.forEachIndexed { index, label ->
        SegmentedButton(
            shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
            icon = {
                SegmentedButtonDefaults.Icon(active = index in checkedList) {
                    Icon(
                        imageVector = icons[index],
                        contentDescription = null,
                        modifier = Modifier.size(SegmentedButtonDefaults.IconSize)
                    )
                }
            },
            onCheckedChange = {
                if (index in checkedList) {
                    checkedList.remove(index)
                } else {
                    checkedList.add(index)
                }
            },
            checked = index in checkedList
        ) {
            Text(label)
        }
    }
}
Parameters
@NonNull Modifier modifier

the Modifier to be applied to this row

@NonNull Dp space

the dimension of the overlap between buttons. Should be equal to the stroke width used on the items.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull MultiChoiceSegmentedButtonRowScopeUnit> content

the content of this Segmented Button Row, typically a sequence of SegmentedButtons

SegmentedButton

@Composable
@ExperimentalMaterial3Api
public static final void SegmentedButton(
    @NonNull MultiChoiceSegmentedButtonRowScope receiver,
    boolean checked,
    @NonNull Function1<@NonNull BooleanUnit> onCheckedChange,
    @NonNull Shape shape,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull SegmentedButtonColors colors,
    @NonNull BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> icon,
    @Composable @NonNull Function0<Unit> label
)

Material Segmented Button. Segmented buttons help people select options, switch views, or sort elements.

A default Toggleable Segmented Button. Also known as Outlined Segmented Button. See Modifier.toggleable.

Toggleable segmented buttons should be used for cases where the selection is not mutually exclusive.

This should typically be used inside of a MultiChoiceSegmentedButtonRow

For a sample showing Segmented button with only checked icons see:

import androidx.compose.foundation.layout.size
import androidx.compose.material.Icon
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.TrendingUp
import androidx.compose.material.icons.filled.BookmarkBorder
import androidx.compose.material.icons.filled.StarBorder
import androidx.compose.material3.MultiChoiceSegmentedButtonRow
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateListOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier

val checkedList = remember { mutableStateListOf<Int>() }
val options = listOf("Favorites", "Trending", "Saved")
val icons = listOf(
    Icons.Filled.StarBorder,
    Icons.AutoMirrored.Filled.TrendingUp,
    Icons.Filled.BookmarkBorder
)
MultiChoiceSegmentedButtonRow {
    options.forEachIndexed { index, label ->
        SegmentedButton(
            shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
            icon = {
                SegmentedButtonDefaults.Icon(active = index in checkedList) {
                    Icon(
                        imageVector = icons[index],
                        contentDescription = null,
                        modifier = Modifier.size(SegmentedButtonDefaults.IconSize)
                    )
                }
            },
            onCheckedChange = {
                if (index in checkedList) {
                    checkedList.remove(index)
                } else {
                    checkedList.add(index)
                }
            },
            checked = index in checkedList
        ) {
            Text(label)
        }
    }
}
Parameters
boolean checked

whether this button is checked or not

@NonNull Function1<@NonNull BooleanUnit> onCheckedChange

callback to be invoked when the button is clicked. therefore the change of checked state in requested.

@NonNull Shape shape

the shape for this button

@NonNull Modifier modifier

the Modifier to be applied to this button

boolean enabled

controls the enabled state of this button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull SegmentedButtonColors colors

SegmentedButtonColors that will be used to resolve the colors used for this

@NonNull BorderStroke border

the border for this button, see SegmentedButtonColors Button in different states

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.

@Composable @NonNull Function0<Unit> icon

the icon slot for this button, you can pass null in unchecked, in which case the content will displace to show the checked icon, or pass different icon lambdas for unchecked and checked in which case the icons will crossfade.

@Composable @NonNull Function0<Unit> label

content to be rendered inside this button

SegmentedButton

@Composable
@ExperimentalMaterial3Api
public static final void SegmentedButton(
    @NonNull SingleChoiceSegmentedButtonRowScope receiver,
    boolean selected,
    @NonNull Function0<Unit> onClick,
    @NonNull Shape shape,
    @NonNull Modifier modifier,
    boolean enabled,
    @NonNull SegmentedButtonColors colors,
    @NonNull BorderStroke border,
    @NonNull MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> icon,
    @Composable @NonNull Function0<Unit> label
)

Material Segmented Button. Segmented buttons help people select options, switch views, or sort elements.

A default Toggleable Segmented Button. Also known as Outlined Segmented Button. See Modifier.selectable.

Selectable segmented buttons should be used for cases where the selection is mutually exclusive, when only one button can be selected at a time.

This should typically be used inside of a SingleChoiceSegmentedButtonRow

For a sample showing Segmented button with only checked icons see:

import androidx.compose.foundation.layout.size
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.SingleChoiceSegmentedButtonRow
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var selectedIndex by remember { mutableStateOf(0) }
val options = listOf("Day", "Month", "Week")
SingleChoiceSegmentedButtonRow {
    options.forEachIndexed { index, label ->
        SegmentedButton(
            shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
            onClick = { selectedIndex = index },
            selected = index == selectedIndex
        ) {
            Text(label)
        }
    }
}
Parameters
boolean selected

whether this button is selected or not

@NonNull Function0<Unit> onClick

callback to be invoked when the button is clicked. therefore the change of checked state in requested.

@NonNull Shape shape

the shape for this button

@NonNull Modifier modifier

the Modifier to be applied to this button

boolean enabled

controls the enabled state of this button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

@NonNull SegmentedButtonColors colors

SegmentedButtonColors that will be used to resolve the colors used for this

@NonNull BorderStroke border

the border for this button, see SegmentedButtonColors Button in different states

@NonNull MutableInteractionSource interactionSource

the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.

@Composable @NonNull Function0<Unit> icon

the icon slot for this button, you can pass null in unchecked, in which case the content will displace to show the checked icon, or pass different icon lambdas for unchecked and checked in which case the icons will crossfade.

@Composable @NonNull Function0<Unit> label

content to be rendered inside this button

SingleChoiceSegmentedButtonRow

@Composable
@ExperimentalMaterial3Api
public static final void SingleChoiceSegmentedButtonRow(
    @NonNull Modifier modifier,
    @NonNull Dp space,
    @Composable @ExtensionFunctionType @NonNull Function1<@NonNull SingleChoiceSegmentedButtonRowScopeUnit> content
)

Material Segmented Button.

A Layout to correctly position and size SegmentedButtons in a Row. It handles overlapping items so that strokes of the item are correctly on top of each other. SingleChoiceSegmentedButtonRow is used when the selection only allows one value, for correct semantics.

import androidx.compose.foundation.layout.size
import androidx.compose.material3.SegmentedButton
import androidx.compose.material3.SegmentedButtonDefaults
import androidx.compose.material3.SingleChoiceSegmentedButtonRow
import androidx.compose.material3.Text
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember

var selectedIndex by remember { mutableStateOf(0) }
val options = listOf("Day", "Month", "Week")
SingleChoiceSegmentedButtonRow {
    options.forEachIndexed { index, label ->
        SegmentedButton(
            shape = SegmentedButtonDefaults.itemShape(index = index, count = options.size),
            onClick = { selectedIndex = index },
            selected = index == selectedIndex
        ) {
            Text(label)
        }
    }
}
Parameters
@NonNull Modifier modifier

the Modifier to be applied to this row

@NonNull Dp space

the dimension of the overlap between buttons. Should be equal to the stroke width used on the items.

@Composable @ExtensionFunctionType @NonNull Function1<@NonNull SingleChoiceSegmentedButtonRowScopeUnit> content

the content of this Segmented Button Row, typically a sequence of SegmentedButtons