androidx.tv.material3

Interfaces

NavigationDrawerScope

NavigationDrawerScope is used to provide the doesNavigationDrawerHaveFocus state to the NavigationDrawerItem composable
ScrollPauseHandle

Handle returned by CarouselState.pauseAutoScroll that can be used to resume auto-scroll.
TabRowScope

TabRowScope is used to provide the doesTabRowHaveFocus state to the Tab composable

Classes

Border

Defines the border for a TV component.
ButtonBorder

Defines Border for all TV Interaction states of Button.
ButtonColors

Defines Colors for all TV Interaction states of Button.
ButtonGlow

Defines Glow for all TV Interaction states of Button.
ButtonScale

Defines the scale for all TV Interaction states of Button.
ButtonShape

Defines Shape for all TV Interaction states of Button.
CardBorder

Represents the Border of Card in different interaction states.
CardColors

Represents the Color of Card in different interaction states.
CardContainerColors

Represents the Color of content in a CardContainer for different interaction states.
CardGlow

Represents the Glow of Card in different interaction states.
CardScale

Represents the scaleFactor of Card in different interaction states.
CardShape

Represents the Shape of Card in different interaction states.
CarouselState

State of the Carousel which allows the user to specify the first item that is shown when the Carousel is instantiated in the constructor.
CheckboxColors

Represents the colors used by the three different sections (checkmark, box, and border) of a Checkbox or TriStateCheckbox in different states.
ClickableChipBorder

Defines Border for all TV Indication states of ClickableChip.
ClickableChipColors

Defines Color for all TV Indication states of ClickableChip.
ClickableChipGlow

Defines Glow for all TV Indication states of ClickableChip.
ClickableChipScale

Defines the scale for all TV states of ClickableChip.
ClickableChipShape

Defines Shape for all TV Indication states of ClickableChip.
ClickableSurfaceBorder

Defines Border for all TV states of Surface.
ClickableSurfaceColors

Defines Color for all TV Interaction states of a Clickable Surface.
ClickableSurfaceGlow

Defines Glow for all TV Interaction states of Surface.
ClickableSurfaceScale

Defines the scale for all TV indication states of Surface.
ClickableSurfaceShape

Defines Shape for all TV Interaction states of a Clickable Surface.
ColorScheme

A color scheme holds all the named color parameters for a MaterialTheme.
DrawerState

State of the NavigationDrawer or ModalNavigationDrawer composable.
Glow

Defines the shadow for a TV component.
ListItemBorder

Represents the Border of ListItem for different interaction states.
ListItemColors

Represents the container & content color Color of ListItem in different interaction states.
ListItemGlow

Represents the Glow of ListItem for different interaction states.
ListItemScale

Represents the scale Float of ListItem for different interaction states.
ListItemShape

Represents the Shape of ListItem in different interaction states.
NavigationDrawerItemBorder

Defines Border for all TV Indication states of a NavigationDrawerItem
NavigationDrawerItemColors

Defines container & content color Color for all TV Indication states of a NavigationDrawerItem
NavigationDrawerItemGlow

Defines Glow for all TV Indication states of a NavigationDrawerItem
NavigationDrawerItemScale

Defines the scale for all TV Indication states of a NavigationDrawerItem
NavigationDrawerItemShape

Defines Shape for all TV Indication states of a NavigationDrawerItem
RadioButtonColors

Represents the color used by a RadioButton in different states.
SelectableChipBorder

Defines Border for all TV Indication states of SelectableChip.
SelectableChipColors

Defines Color for all TV Indication states of SelectableChip.
SelectableChipGlow

Defines Glow for all TV Indication states of SelectableChip.
SelectableChipScale

Defines the scale for all TV states of SelectableChip.
SelectableChipShape

Defines Shape for all TV Indication states of SelectableChip.
SelectableSurfaceBorder

Defines Border for all TV states of a selectable Surface.
SelectableSurfaceColors

Defines Color for all TV Interaction states of a selectable Surface.
SelectableSurfaceGlow

Defines Glow for all TV Interaction states of a selectable Surface.
SelectableSurfaceScale

Defines the scale for all TV Interaction states of selectable Surface.
SelectableSurfaceShape

Defines Shape for all TV Interaction states of a selectable Surface.
Shapes

Material surfaces can be displayed in different shapes.
SurfaceColors

Defines the container & content color Color for a non interactive surface.
SwitchColors

Represents the colors used by a Switch in different states
TabColors

Represents the colors used in a tab in different states.
Typography

The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.
WideButtonContentColor

Defines Colors for all TV Interaction states of a WideButton

Objects

AssistChipDefaults

Contains the default values used by AssistChip
ButtonDefaults
CardContainerDefaults
CardDefaults

Contains the default values used by all card types.
CarouselDefaults
CheckboxDefaults

Defaults used in Checkbox and TriStateCheckbox.
ClickableSurfaceDefaults

Contains the default values used by clickable Surface.
FilterChipDefaults

Contains the default values used by FilterChip.
IconButtonDefaults
InputChipDefaults

Contains the default values used by InputChip.
ListItemDefaults

Contains the default values used by list items.
MaterialTheme

Contains functions to access the current theme values provided at the call site's position in the hierarchy.
NavigationDrawerItemDefaults

Contains the default values used by selectable NavigationDrawerItem
OutlinedButtonDefaults
OutlinedIconButtonDefaults
RadioButtonDefaults

Defaults used in RadioButton.
SelectableSurfaceDefaults

Contains the default values used by Selectable Surface.
ShapeDefaults

Contains the default values used by Shapes
SuggestionChipDefaults

Contains the default values used by SuggestionChip.
SurfaceDefaults

Contains the default values used by a non-interactive Surface
SwitchDefaults

Contains the default values used by Switch
TabDefaults
TabRowDefaults
WideButtonDefaults

Annotations

ExperimentalTvMaterial3Api

Enums

DrawerValue

States that the drawer can exist in.

Top-level functions summary

Unit
@ExperimentalTvMaterial3Api
@NonRestartableComposable
@Composable
AssistChip(
    onClick: () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    onLongClick: (() -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    shape: ClickableChipShape,
    colors: ClickableChipColors,
    scale: ClickableChipScale,
    border: ClickableChipBorder,
    glow: ClickableChipGlow,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

Material Design assist chip
Unit
@NonRestartableComposable
@Composable
Button(
    onClick: () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    enabled: Boolean,
    scale: ButtonScale,
    glow: ButtonGlow,
    shape: ButtonShape,
    colors: ButtonColors,
    tonalElevation: Dp,
    border: ButtonBorder,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable RowScope.() -> Unit
)

Material Design filled button for TV.
Unit
@Composable
Card(
    onClick: () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    shape: CardShape,
    colors: CardColors,
    scale: CardScale,
    border: CardBorder,
    glow: CardGlow,
    interactionSource: MutableInteractionSource?,
    content: @Composable ColumnScope.() -> Unit
)

Cards contain content and actions that relate information about a subject.
Unit
@ExperimentalTvMaterial3Api
@Composable
Carousel(
    itemCount: Int,
    modifier: Modifier,
    carouselState: CarouselState,
    autoScrollDurationMillis: Long,
    contentTransformStartToEnd: ContentTransform,
    contentTransformEndToStart: ContentTransform,
    carouselIndicator: @Composable BoxScope.() -> Unit,
    content: @Composable AnimatedContentScope.(index: Int) -> Unit
)

Composes a hero card rotator to highlight a piece of content.
Unit
@Composable
Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier,
    enabled: Boolean,
    colors: CheckboxColors,
    interactionSource: MutableInteractionSource?
)

Material Design checkbox.
Unit
@Composable
ClassicCard(
    onClick: () -> Unit,
    image: @Composable BoxScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    subtitle: @Composable () -> Unit,
    description: @Composable () -> Unit,
    shape: CardShape,
    colors: CardColors,
    scale: CardScale,
    border: CardBorder,
    glow: CardGlow,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?
)

ClassicCard is an opinionated TV Material card that offers a 4 slot layout to show information about a subject.
Unit
@Composable
CompactCard(
    onClick: () -> Unit,
    image: @Composable BoxScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    subtitle: @Composable () -> Unit,
    description: @Composable () -> Unit,
    shape: CardShape,
    colors: CardColors,
    scale: CardScale,
    border: CardBorder,
    glow: CardGlow,
    scrimBrush: Brush,
    interactionSource: MutableInteractionSource?
)

CompactCard is an opinionated TV Material card that offers a 4 slot layout to show information about a subject.
Unit
@Composable
DenseListItem(
    selected: Boolean,
    onClick: () -> Unit,
    headlineContent: @Composable () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    onLongClick: (() -> Unit)?,
    overlineContent: (@Composable () -> Unit)?,
    supportingContent: (@Composable () -> Unit)?,
    leadingContent: (@Composable BoxScope.() -> Unit)?,
    trailingContent: (@Composable () -> Unit)?,
    tonalElevation: Dp,
    shape: ListItemShape,
    colors: ListItemColors,
    scale: ListItemScale,
    border: ListItemBorder,
    glow: ListItemGlow,
    interactionSource: MutableInteractionSource?
)

Lists are continuous, vertical indexes of text or images.
Unit
@ExperimentalTvMaterial3Api
@NonRestartableComposable
@Composable
FilterChip(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    onLongClick: (() -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    shape: SelectableChipShape,
    colors: SelectableChipColors,
    scale: SelectableChipScale,
    border: SelectableChipBorder,
    glow: SelectableChipGlow,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

Material Design filter chip
Unit
@Composable
Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier,
    tint: Color
)

A Material Design icon component that draws bitmap using tint, with a default value of LocalContentColor.
Unit
@Composable
Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier,
    tint: Color
)

A Material Design icon component that draws imageVector using tint, with a default value of LocalContentColor.
Unit
@Composable
Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier,
    tint: Color
)

A Material Design icon component that draws painter using tint, with a default value of LocalContentColor.
Unit
@NonRestartableComposable
@Composable
IconButton(
    onClick: () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    enabled: Boolean,
    scale: ButtonScale,
    glow: ButtonGlow,
    shape: ButtonShape,
    colors: ButtonColors,
    border: ButtonBorder,
    interactionSource: MutableInteractionSource?,
    content: @Composable BoxScope.() -> Unit
)

Material Design standard icon button for TV.
Unit
@ExperimentalTvMaterial3Api
@NonRestartableComposable
@Composable
InputChip(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    onLongClick: (() -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    avatar: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    shape: SelectableChipShape,
    colors: SelectableChipColors,
    scale: SelectableChipScale,
    border: SelectableChipBorder,
    glow: SelectableChipGlow,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

Chips help people enter information, make selections, filter content, or trigger actions.
Unit
@Composable
ListItem(
    selected: Boolean,
    onClick: () -> Unit,
    headlineContent: @Composable () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    onLongClick: (() -> Unit)?,
    overlineContent: (@Composable () -> Unit)?,
    supportingContent: (@Composable () -> Unit)?,
    leadingContent: (@Composable BoxScope.() -> Unit)?,
    trailingContent: (@Composable () -> Unit)?,
    tonalElevation: Dp,
    shape: ListItemShape,
    colors: ListItemColors,
    scale: ListItemScale,
    border: ListItemBorder,
    glow: ListItemGlow,
    interactionSource: MutableInteractionSource?
)

Lists are continuous, vertical indexes of text or images.
Unit
@Composable
MaterialTheme(
    colorScheme: ColorScheme,
    shapes: Shapes,
    typography: Typography,
    content: @Composable () -> Unit
)

Material Theming refers to the customization of your Material Design app to better reflect your product’s brand.
Unit
@Composable
ModalNavigationDrawer(
    drawerContent: @Composable NavigationDrawerScope.(DrawerValue) -> Unit,
    modifier: Modifier,
    drawerState: DrawerState,
    scrimBrush: Brush,
    content: @Composable () -> Unit
)

Navigation drawers provide ergonomic access to destinations in an app.
Unit
@Composable
NavigationDrawer(
    drawerContent: @Composable NavigationDrawerScope.(DrawerValue) -> Unit,
    modifier: Modifier,
    drawerState: DrawerState,
    content: @Composable () -> Unit
)

Navigation drawers provide ergonomic access to destinations in an app.
Unit
@NonRestartableComposable
@Composable
OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    enabled: Boolean,
    scale: ButtonScale,
    glow: ButtonGlow,
    shape: ButtonShape,
    colors: ButtonColors,
    tonalElevation: Dp,
    border: ButtonBorder,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable RowScope.() -> Unit
)

Material Design outlined button for TV.
Unit
@NonRestartableComposable
@Composable
OutlinedIconButton(
    onClick: () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    enabled: Boolean,
    scale: ButtonScale,
    glow: ButtonGlow,
    shape: ButtonShape,
    colors: ButtonColors,
    border: ButtonBorder,
    interactionSource: MutableInteractionSource?,
    content: @Composable BoxScope.() -> Unit
)

Material Design standard icon button for TV.
Unit

This function is used to set the current value of LocalTextStyle, merging the given style with the current style values for any missing attributes.
Unit
@Composable
RadioButton(
    selected: Boolean,
    onClick: (() -> Unit)?,
    modifier: Modifier,
    enabled: Boolean,
    colors: RadioButtonColors,
    interactionSource: MutableInteractionSource?
)

Material Design radio button.
Unit
@Composable
StandardCardContainer(
    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier,
    subtitle: @Composable () -> Unit,
    description: @Composable () -> Unit,
    contentColor: CardContainerColors,
    interactionSource: MutableInteractionSource
)

StandardCardContainer is an opinionated TV Material Card layout with an image and text content to show information about a subject.
Unit
@ExperimentalTvMaterial3Api
@NonRestartableComposable
@Composable
SuggestionChip(
    onClick: () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    onLongClick: (() -> Unit)?,
    shape: ClickableChipShape,
    colors: ClickableChipColors,
    scale: ClickableChipScale,
    border: ClickableChipBorder,
    glow: ClickableChipGlow,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

Material Design suggestion chip
Unit
@NonRestartableComposable
@Composable
Surface(
    modifier: Modifier,
    tonalElevation: Dp,
    shape: Shape,
    colors: SurfaceColors,
    border: Border,
    glow: Glow,
    content: @Composable BoxScope.() -> Unit
)

The Surface is a building block component that will be used for any element on TV such as buttons, cards, navigation, or a simple background etc.
Unit
@Composable
Surface(
    onClick: () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    enabled: Boolean,
    tonalElevation: Dp,
    shape: ClickableSurfaceShape,
    colors: ClickableSurfaceColors,
    scale: ClickableSurfaceScale,
    border: ClickableSurfaceBorder,
    glow: ClickableSurfaceGlow,
    interactionSource: MutableInteractionSource?,
    content: @Composable BoxScope.() -> Unit
)

The Surface is a building block component that will be used for any focusable element on TV such as buttons, cards, navigation, etc.
Unit
@Composable
Surface(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    onLongClick: (() -> Unit)?,
    tonalElevation: Dp,
    shape: SelectableSurfaceShape,
    colors: SelectableSurfaceColors,
    scale: SelectableSurfaceScale,
    border: SelectableSurfaceBorder,
    glow: SelectableSurfaceGlow,
    interactionSource: MutableInteractionSource?,
    content: @Composable BoxScope.() -> Unit
)

The Surface is a building block component that will be used for any focusable element on TV such as buttons, cards, navigation, etc.
Unit
@Composable
Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier,
    thumbContent: (@Composable () -> Unit)?,
    enabled: Boolean,
    colors: SwitchColors,
    interactionSource: MutableInteractionSource?
)

Material Design Switch.
Unit
@Composable
TabRow(
    selectedTabIndex: Int,
    modifier: Modifier,
    containerColor: Color,
    contentColor: Color,
    separator: @Composable () -> Unit,
    indicator: @Composable (tabPositions: List<DpRect>, doesTabRowHaveFocus: Boolean) -> Unit,
    tabs: @Composable TabRowScope.() -> Unit
)

TV-Material Design Horizontal TabRow
Unit
@Composable
Text(
    text: String,
    modifier: Modifier,
    color: Color,
    fontSize: TextUnit,
    fontStyle: FontStyle?,
    fontWeight: FontWeight?,
    fontFamily: FontFamily?,
    letterSpacing: TextUnit,
    textDecoration: TextDecoration?,
    textAlign: TextAlign?,
    lineHeight: TextUnit,
    overflow: TextOverflow,
    softWrap: Boolean,
    maxLines: Int,
    minLines: Int,
    onTextLayout: (TextLayoutResult) -> Unit,
    style: TextStyle
)

High level element that displays text and provides semantics / accessibility information.
Unit
@Composable
Text(
    text: AnnotatedString,
    modifier: Modifier,
    color: Color,
    fontSize: TextUnit,
    fontStyle: FontStyle?,
    fontWeight: FontWeight?,
    fontFamily: FontFamily?,
    letterSpacing: TextUnit,
    textDecoration: TextDecoration?,
    textAlign: TextAlign?,
    lineHeight: TextUnit,
    overflow: TextOverflow,
    softWrap: Boolean,
    maxLines: Int,
    minLines: Int,
    inlineContent: Map<String, InlineTextContent>,
    onTextLayout: (TextLayoutResult) -> Unit,
    style: TextStyle
)

High level element that displays text and provides semantics / accessibility information.
Unit
@Composable
TriStateCheckbox(
    state: ToggleableState,
    onClick: (() -> Unit)?,
    modifier: Modifier,
    enabled: Boolean,
    colors: CheckboxColors,
    interactionSource: MutableInteractionSource?
)

Material Design checkbox parent.
Unit
@NonRestartableComposable
@Composable
WideButton(
    onClick: () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    enabled: Boolean,
    interactionSource: MutableInteractionSource,
    background: @Composable () -> Unit,
    scale: ButtonScale,
    glow: ButtonGlow,
    shape: ButtonShape,
    contentColor: WideButtonContentColor,
    tonalElevation: Dp,
    border: ButtonBorder,
    contentPadding: PaddingValues,
    content: @Composable RowScope.() -> Unit
)

Material Design wide button for TV.
Unit
@NonRestartableComposable
@Composable
WideButton(
    onClick: () -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    enabled: Boolean,
    icon: (@Composable () -> Unit)?,
    subtitle: (@Composable () -> Unit)?,
    interactionSource: MutableInteractionSource,
    background: @Composable () -> Unit,
    scale: ButtonScale,
    glow: ButtonGlow,
    shape: ButtonShape,
    contentColor: WideButtonContentColor,
    tonalElevation: Dp,
    border: ButtonBorder,
    contentPadding: PaddingValues
)

Material Design wide button for TV.
Unit
@Composable
WideCardContainer(
    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier,
    subtitle: @Composable () -> Unit,
    description: @Composable () -> Unit,
    contentColor: CardContainerColors,
    interactionSource: MutableInteractionSource
)

WideCardContainer is an opinionated TV Material Card layout with an image and text content to show information about a subject.
Unit
@Composable
WideClassicCard(
    onClick: () -> Unit,
    image: @Composable BoxScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier,
    onLongClick: (() -> Unit)?,
    subtitle: @Composable () -> Unit,
    description: @Composable () -> Unit,
    shape: CardShape,
    colors: CardColors,
    scale: CardScale,
    border: CardBorder,
    glow: CardGlow,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?
)

WideClassicCard is an opinionated TV Material card that offers a 4 slot layout to show information about a subject.
Color
@Composable
contentColorFor(backgroundColor: Color)

The Material color system contains pairs of colors that are typically used for the background and content color inside a component.
ColorScheme
darkColorScheme(
    primary: Color,
    onPrimary: Color,
    primaryContainer: Color,
    onPrimaryContainer: Color,
    inversePrimary: Color,
    secondary: Color,
    onSecondary: Color,
    secondaryContainer: Color,
    onSecondaryContainer: Color,
    tertiary: Color,
    onTertiary: Color,
    tertiaryContainer: Color,
    onTertiaryContainer: Color,
    background: Color,
    onBackground: Color,
    surface: Color,
    onSurface: Color,
    surfaceVariant: Color,
    onSurfaceVariant: Color,
    surfaceTint: Color,
    inverseSurface: Color,
    inverseOnSurface: Color,
    error: Color,
    onError: Color,
    errorContainer: Color,
    onErrorContainer: Color,
    border: Color,
    borderVariant: Color,
    scrim: Color
)

Returns a dark Material color scheme.
ColorScheme
lightColorScheme(
    primary: Color,
    onPrimary: Color,
    primaryContainer: Color,
    onPrimaryContainer: Color,
    inversePrimary: Color,
    secondary: Color,
    onSecondary: Color,
    secondaryContainer: Color,
    onSecondaryContainer: Color,
    tertiary: Color,
    onTertiary: Color,
    tertiaryContainer: Color,
    onTertiaryContainer: Color,
    background: Color,
    onBackground: Color,
    surface: Color,
    onSurface: Color,
    surfaceVariant: Color,
    onSurfaceVariant: Color,
    surfaceTint: Color,
    inverseSurface: Color,
    inverseOnSurface: Color,
    error: Color,
    onError: Color,
    errorContainer: Color,
    onErrorContainer: Color,
    border: Color,
    borderVariant: Color,
    scrim: Color
)

Returns a light Material color scheme.
CarouselState

Creates a CarouselState that is remembered across compositions.
DrawerState

Create and remember a DrawerState.

Extension functions summary

Unit
@Composable
NavigationDrawerScope.NavigationDrawerItem(
    selected: Boolean,
    onClick: () -> Unit,
    leadingContent: @Composable () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    onLongClick: (() -> Unit)?,
    supportingContent: (@Composable () -> Unit)?,
    trailingContent: (@Composable () -> Unit)?,
    tonalElevation: Dp,
    shape: NavigationDrawerItemShape,
    colors: NavigationDrawerItemColors,
    scale: NavigationDrawerItemScale,
    border: NavigationDrawerItemBorder,
    glow: NavigationDrawerItemGlow,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

TV Material Design navigation drawer item.
Unit
@Composable
TabRowScope.Tab(
    selected: Boolean,
    onFocus: () -> Unit,
    modifier: Modifier,
    onClick: () -> Unit,
    enabled: Boolean,
    colors: TabColors,
    interactionSource: MutableInteractionSource?,
    content: @Composable RowScope.() -> Unit
)

Material Design tab.
Color
ColorScheme.contentColorFor(backgroundColor: Color)

The Material color system contains pairs of colors that are typically used for the background and content color inside a component.
Color

Computes the surface tonal color at different elevation levels e.g. surface1 through surface5.

Top-level properties summary

ProvidableCompositionLocal<Color>

CompositionLocal containing the preferred content color for a given position in the hierarchy.
ProvidableCompositionLocal<TextStyle>

CompositionLocal containing the preferred TextStyle that will be used by Text components by default.

Top-level functions

AssistChip

@ExperimentalTvMaterial3Api
@NonRestartableComposable
@Composable
fun AssistChip(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: ClickableChipShape = AssistChipDefaults.shape(),
    colors: ClickableChipColors = AssistChipDefaults.colors(),
    scale: ClickableChipScale = AssistChipDefaults.scale(),
    border: ClickableChipBorder = AssistChipDefaults.border(),
    glow: ClickableChipGlow = AssistChipDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

Material Design assist chip

Chips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts

Assist chips represent smart or automated actions that can span multiple apps, such as opening a calendar event from the home screen. Assist chips function as though the user asked an assistant to complete the action. They should appear dynamically and contextually in a UI

Parameters
onClick: () -> Unit

called when this chip is clicked
modifier: Modifier = Modifier

the Modifier to be applied to this chip
enabled: Boolean = true

controls the enabled state of this chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services
onLongClick: (() -> Unit)? = null

callback to be called when the surface is long clicked (long-pressed)
leadingIcon: (@Composable () -> Unit)? = null

optional icon at the start of the chip, preceding the content text
trailingIcon: (@Composable () -> Unit)? = null

optional icon at the end of the chip
shape: ClickableChipShape = AssistChipDefaults.shape()

Defines the Chip's shape
colors: ClickableChipColors = AssistChipDefaults.colors()

Color to be used on background and content of the chip
scale: ClickableChipScale = AssistChipDefaults.scale()

Defines size of the chip relative to its original size
border: ClickableChipBorder = AssistChipDefaults.border()

Defines a border around the chip
glow: ClickableChipGlow = AssistChipDefaults.glow()

Shadow to be shown behind the chip
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this chip. You can use this to change the chip's appearance or preview the chip in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit

for this chip, ideally a Text composable

Button

@NonRestartableComposable
@Composable
fun Button(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    scale: ButtonScale = ButtonDefaults.scale(),
    glow: ButtonGlow = ButtonDefaults.glow(),
    shape: ButtonShape = ButtonDefaults.shape(),
    colors: ButtonColors = ButtonDefaults.colors(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = ButtonDefaults.border(),
    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design filled button for TV.

Filled buttons are for high emphasis (important, final actions that complete a flow).

Choose the best button for an action based on the amount of emphasis it needs. The more important an action is, the higher emphasis its button should be.

  • See Button for high emphasis (important, final actions that complete a flow).

  • See OutlinedButton for a medium-emphasis button with a border.

The default text style for internal Text components will be set to Typography.labelLarge.

Samples:

import androidx.tv.material3.Button
import androidx.tv.material3.Text

Button(onClick = {}) { Text("Button") }
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.ui.Modifier
import androidx.tv.material3.Button
import androidx.tv.material3.ButtonDefaults
import androidx.tv.material3.Icon
import androidx.tv.material3.Text

Button(
    onClick = { /* Do something! */ },
    contentPadding = ButtonDefaults.ButtonWithIconContentPadding
) {
    Icon(
        Icons.Filled.Favorite,
        contentDescription = "Localized description",
        modifier = Modifier.size(ButtonDefaults.IconSize)
    )
    Spacer(Modifier.size(ButtonDefaults.IconSpacing))
    Text("Like")
}
Parameters
onClick: () -> Unit

called when this button is clicked
modifier: Modifier = Modifier

the Modifier to be applied to this button
onLongClick: (() -> Unit)? = null

called when this button is long clicked (long-pressed).
enabled: Boolean = true

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.
scale: ButtonScale = ButtonDefaults.scale()

Defines size of the Button relative to its original size.
glow: ButtonGlow = ButtonDefaults.glow()

Shadow to be shown behind the Button.
shape: ButtonShape = ButtonDefaults.shape()

Defines the Button's shape.
colors: ButtonColors = ButtonDefaults.colors()

Color to be used for background and content of the Button
tonalElevation: Dp = Elevation.Level0

tonal elevation used to apply a color shift to the button to give the it higher emphasis
border: ButtonBorder = ButtonDefaults.border()

Defines a border around the Button.
contentPadding: PaddingValues = ButtonDefaults.ContentPadding

the spacing values to apply internally between the container and the content
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this button. You can use this to change the button's appearance or preview the button in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable RowScope.() -> Unit

the content of the button

Card

@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    shape: CardShape = CardDefaults.shape(),
    colors: CardColors = CardDefaults.colors(),
    scale: CardScale = CardDefaults.scale(),
    border: CardBorder = CardDefaults.border(),
    glow: CardGlow = CardDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Cards contain content and actions that relate information about a subject.

This Card handles click events, calling its onClick lambda.

Checkout TV Guidelines for Aspect ratios for cards

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults

Card(
    onClick = {},
    modifier = Modifier.width(200.dp).aspectRatio(CardDefaults.HorizontalImageAspectRatio),
    border =
        CardDefaults.border(
            focusedBorder =
                Border(
                    border = BorderStroke(width = 3.dp, color = Color.Green),
                    shape = RoundedCornerShape(5),
                ),
        ),
    colors =
        CardDefaults.colors(containerColor = Color.Red, focusedContainerColor = Color.Yellow),
    scale =
        CardDefaults.scale(
            focusedScale = 1.05f,
        )
) {}
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults

Card(
    onClick = {},
    modifier = Modifier.width(200.dp).aspectRatio(CardDefaults.VerticalImageAspectRatio),
    border =
        CardDefaults.border(
            focusedBorder =
                Border(
                    border = BorderStroke(width = 3.dp, color = Color.Green),
                    shape = RoundedCornerShape(5),
                ),
        ),
    colors =
        CardDefaults.colors(containerColor = Color.Red, focusedContainerColor = Color.Yellow),
    scale =
        CardDefaults.scale(
            focusedScale = 1.05f,
        )
) {}
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults

Card(
    onClick = {},
    modifier = Modifier.width(150.dp).aspectRatio(CardDefaults.SquareImageAspectRatio),
    border =
        CardDefaults.border(
            focusedBorder = Border(border = BorderStroke(width = 3.dp, color = Color.Green)),
        ),
    shape =
        CardDefaults.shape(
            shape = CircleShape,
        ),
    colors =
        CardDefaults.colors(containerColor = Color.Red, focusedContainerColor = Color.Yellow),
    scale =
        CardDefaults.scale(
            focusedScale = 1.05f,
        )
) {}
Parameters
onClick: () -> Unit

called when this card is clicked.
modifier: Modifier = Modifier

the Modifier to be applied to this card.
onLongClick: (() -> Unit)? = null

called when this card is long clicked (long-pressed).
shape: CardShape = CardDefaults.shape()

CardShape defines the shape of this card's container in different interaction states. See CardDefaults.shape.
colors: CardColors = CardDefaults.colors()

CardColors defines the background & content colors used in this card for different interaction states. See CardDefaults.colors.
scale: CardScale = CardDefaults.scale()

CardScale defines size of the card relative to its original size for different interaction states. See CardDefaults.scale.
border: CardBorder = CardDefaults.border()

CardBorder defines a border around the card for different interaction states. See CardDefaults.border.
glow: CardGlow = CardDefaults.glow()

CardGlow defines a shadow to be shown behind the card for different interaction states. See CardDefaults.glow.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this card. You can use this to change the card's appearance or preview the card in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable ColumnScope.() -> Unit

defines the Composable content inside the Card.

Carousel

@ExperimentalTvMaterial3Api
@Composable
fun Carousel(
    itemCount: Int,
    modifier: Modifier = Modifier,
    carouselState: CarouselState = rememberCarouselState(),
    autoScrollDurationMillis: Long = CarouselDefaults.TimeToDisplayItemMillis,
    contentTransformStartToEnd: ContentTransform = CarouselDefaults.contentTransform,
    contentTransformEndToStart: ContentTransform = CarouselDefaults.contentTransform,
    carouselIndicator: @Composable BoxScope.() -> Unit = {
        CarouselDefaults.IndicatorRow(
            itemCount = itemCount,
            activeItemIndex = carouselState.activeItemIndex,
            modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp),
        )
    },
    content: @Composable AnimatedContentScope.(index: Int) -> Unit
): Unit

Composes a hero card rotator to highlight a piece of content.

Note: The animations and focus management features have been dropped temporarily due to some technical challenges. If you need them, consider using the previous version of the library (1.0.0-alpha10) or kindly wait until the next alpha version (1.1.0-alpha01).

Examples:

import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.FocusRequester
import androidx.compose.ui.focus.focusRequester
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.layout.onPlaced
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Carousel

@Composable
fun Modifier.onFirstGainingVisibility(onGainingVisibility: () -> Unit): Modifier {
    var isVisible by remember { mutableStateOf(false) }
    LaunchedEffect(isVisible) { if (isVisible) onGainingVisibility() }

    return onPlaced { isVisible = true }
}

@Composable
fun Modifier.requestFocusOnFirstGainingVisibility(): Modifier {
    val focusRequester = remember { FocusRequester() }
    return focusRequester(focusRequester).onFirstGainingVisibility {
        focusRequester.requestFocus()
    }
}

val backgrounds =
    listOf(
        Color.Red.copy(alpha = 0.3f),
        Color.Yellow.copy(alpha = 0.3f),
        Color.Green.copy(alpha = 0.3f)
    )

var carouselFocused by remember { mutableStateOf(false) }
Carousel(
    itemCount = backgrounds.size,
    modifier =
        Modifier.height(300.dp).fillMaxWidth().onFocusChanged {
            carouselFocused = it.isFocused
        },
    contentTransformEndToStart = fadeIn(tween(1000)).togetherWith(fadeOut(tween(1000))),
    contentTransformStartToEnd = fadeIn(tween(1000)).togetherWith(fadeOut(tween(1000)))
) { itemIndex ->
    Box(
        modifier =
            Modifier.background(backgrounds[itemIndex])
                .border(2.dp, Color.White.copy(alpha = 0.5f))
                .fillMaxSize()
    ) {
        var buttonFocused by remember { mutableStateOf(false) }
        val buttonModifier =
            if (carouselFocused) {
                Modifier.requestFocusOnFirstGainingVisibility()
            } else {
                Modifier
            }

        Button(
            onClick = {},
            modifier =
                buttonModifier
                    .onFocusChanged { buttonFocused = it.isFocused }
                    .padding(40.dp)
                    .border(
                        width = 2.dp,
                        color = if (buttonFocused) Color.Red else Color.Transparent,
                        shape = RoundedCornerShape(50)
                    )
                    // Duration of animation here should be less than or equal to carousel's
                    // contentTransform duration to ensure the item below does not disappear
                    // abruptly.
                    .animateEnterExit(
                        enter = slideInHorizontally(animationSpec = tween(1000)) { it / 2 },
                        exit = slideOutHorizontally(animationSpec = tween(1000))
                    )
                    .padding(vertical = 2.dp, horizontal = 5.dp)
        ) {
            Text(text = "Play")
        }
    }
}
import androidx.compose.animation.core.tween
import androidx.compose.animation.fadeIn
import androidx.compose.animation.fadeOut
import androidx.compose.animation.slideInHorizontally
import androidx.compose.animation.slideOutHorizontally
import androidx.compose.animation.togetherWith
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material3.Button
import androidx.compose.material3.Text
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.graphics.RectangleShape
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Carousel
import androidx.tv.material3.CarouselDefaults
import androidx.tv.material3.rememberCarouselState

val backgrounds =
    listOf(
        Color.Red.copy(alpha = 0.3f),
        Color.Yellow.copy(alpha = 0.3f),
        Color.Green.copy(alpha = 0.3f)
    )
val carouselState = rememberCarouselState()

Carousel(
    itemCount = backgrounds.size,
    modifier = Modifier.height(300.dp).fillMaxWidth(),
    carouselState = carouselState,
    carouselIndicator = {
        CarouselDefaults.IndicatorRow(
            itemCount = backgrounds.size,
            activeItemIndex = carouselState.activeItemIndex,
            modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp),
            indicator = { isActive ->
                val activeColor = Color.Red
                val inactiveColor = activeColor.copy(alpha = 0.5f)
                Box(
                    modifier =
                        Modifier.size(8.dp)
                            .background(
                                color = if (isActive) activeColor else inactiveColor,
                                shape = RectangleShape,
                            ),
                )
            }
        )
    },
    contentTransformEndToStart = fadeIn(tween(1000)).togetherWith(fadeOut(tween(1000))),
    contentTransformStartToEnd = fadeIn(tween(1000)).togetherWith(fadeOut(tween(1000)))
) { itemIndex ->
    Box(
        modifier =
            Modifier.background(backgrounds[itemIndex])
                .border(2.dp, Color.White.copy(alpha = 0.5f))
                .fillMaxSize()
    ) {
        var isFocused by remember { mutableStateOf(false) }
        Button(
            onClick = {},
            modifier =
                Modifier.onFocusChanged { isFocused = it.isFocused }
                    // Duration of animation here should be less than or equal to carousel's
                    // contentTransform duration to ensure the item below does not disappear
                    // abruptly.
                    .animateEnterExit(
                        enter = slideInHorizontally(animationSpec = tween(1000)) { it / 2 },
                        exit = slideOutHorizontally(animationSpec = tween(1000))
                    )
                    .padding(40.dp)
                    .border(
                        width = 2.dp,
                        color = if (isFocused) Color.Red else Color.Transparent,
                        shape = RoundedCornerShape(50)
                    )
                    .padding(vertical = 2.dp, horizontal = 5.dp)
        ) {
            Text(text = "Play")
        }
    }
}
Parameters
itemCount: Int

total number of items present in the carousel.
modifier: Modifier = Modifier

Modifier applied to the Carousel.
carouselState: CarouselState = rememberCarouselState()

state associated with this carousel.
autoScrollDurationMillis: Long = CarouselDefaults.TimeToDisplayItemMillis

duration for which item should be visible before moving to the next item.
contentTransformStartToEnd: ContentTransform = CarouselDefaults.contentTransform

animation transform applied when we are moving from start to end in the carousel while scrolling to the next item
contentTransformEndToStart: ContentTransform = CarouselDefaults.contentTransform

animation transform applied when we are moving from end to start in the carousel while scrolling to the next item
carouselIndicator: @Composable BoxScope.() -> Unit = { CarouselDefaults.IndicatorRow( itemCount = itemCount, activeItemIndex = carouselState.activeItemIndex, modifier = Modifier.align(Alignment.BottomEnd).padding(16.dp), ) }

indicator showing the position of the current item among all items.
content: @Composable AnimatedContentScope.(index: Int) -> Unit

defines the items for a given index.

Checkbox

@Composable
fun Checkbox(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

Material Design checkbox.

Checkboxes allow users to select one or more items from a set. Checkboxes can turn an option on or off.

![Checkbox

  • image](https://developer.android.com/images/reference/androidx/compose/material3/checkbox.png)

import androidx.tv.material3.Checkbox

Checkbox(checked = true, onCheckedChange = {})
Parameters
checked: Boolean

whether this checkbox is checked or unchecked
onCheckedChange: ((Boolean) -> Unit)?

called when this checkbox is clicked. If null, then this checkbox will not be interactable, unless something else handles its input events and updates its state.
modifier: Modifier = Modifier

the Modifier to be applied to this checkbox
enabled: Boolean = true

controls the enabled state of this checkbox. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
colors: CheckboxColors = CheckboxDefaults.colors()

CheckboxColors that will be used to resolve the colors used for this checkbox in different states. See CheckboxDefaults.colors.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this checkbox. You can use this to change the checkbox's appearance or preview the checkbox in different states. Note that if null is provided, interactions will still happen internally.
See also
TriStateCheckbox

if you require support for an indeterminate state.

ClassicCard

@Composable
fun ClassicCard(
    onClick: () -> Unit,
    image: @Composable BoxScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    shape: CardShape = CardDefaults.shape(),
    colors: CardColors = CardDefaults.colors(),
    scale: CardScale = CardDefaults.scale(),
    border: CardBorder = CardDefaults.border(),
    glow: CardGlow = CardDefaults.glow(),
    contentPadding: PaddingValues = PaddingValues(),
    interactionSource: MutableInteractionSource? = null
): Unit

ClassicCard is an opinionated TV Material card that offers a 4 slot layout to show information about a subject.

This card has a vertical layout with the interactive surface Surface, which provides the image slot at the top, followed by the title, subtitle, and description slots.

![Classic

  • Card](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/classic-card.webp)

Checkout TV design guidelines to learn more about Material Classic Card.

This Card handles click events, calling its onClick lambda.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Card
import androidx.tv.material3.ClassicCard
import androidx.tv.material3.Text

ClassicCard(
    modifier = Modifier.size(150.dp, 120.dp),
    image = { Box(modifier = Modifier.fillMaxWidth().height(80.dp).background(Color.Blue)) },
    title = { Text("Classic Card") },
    contentPadding = PaddingValues(8.dp),
    onClick = {}
)
Parameters
onClick: () -> Unit

called when this card is clicked.
image: @Composable BoxScope.() -> Unit

defines the Composable image to be displayed on top of the Card.
title: @Composable () -> Unit

defines the Composable title placed below the image in the Card.
modifier: Modifier = Modifier

the Modifier to be applied to this card.
onLongClick: (() -> Unit)? = null

called when this card is long clicked (long-pressed).
subtitle: @Composable () -> Unit = {}

defines the Composable supporting text placed below the title of the Card.
description: @Composable () -> Unit = {}

defines the Composable description placed below the subtitle of the Card.
shape: CardShape = CardDefaults.shape()

CardShape defines the shape of this card's container in different interaction states. See CardDefaults.shape.
colors: CardColors = CardDefaults.colors()

CardColors defines the background & content colors used in this card for different interaction states. See CardDefaults.colors.
scale: CardScale = CardDefaults.scale()

CardScale defines size of the card relative to its original size for different interaction states. See CardDefaults.scale.
border: CardBorder = CardDefaults.border()

CardBorder defines a border around the card for different interaction states. See CardDefaults.border.
glow: CardGlow = CardDefaults.glow()

CardGlow defines a shadow to be shown behind the card for different interaction states. See CardDefaults.glow.
contentPadding: PaddingValues = PaddingValues()

PaddingValues defines the inner padding applied to the card's content.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this card. You can use this to change the card's appearance or preview the card in different states. Note that if null is provided, interactions will still happen internally.

CompactCard

@Composable
fun CompactCard(
    onClick: () -> Unit,
    image: @Composable BoxScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    shape: CardShape = CardDefaults.shape(),
    colors: CardColors = CardDefaults.compactCardColors(),
    scale: CardScale = CardDefaults.scale(),
    border: CardBorder = CardDefaults.border(),
    glow: CardGlow = CardDefaults.glow(),
    scrimBrush: Brush = CardDefaults.ScrimBrush,
    interactionSource: MutableInteractionSource? = null
): Unit

CompactCard is an opinionated TV Material card that offers a 4 slot layout to show information about a subject.

This card provides the interactive surface Surface with the image slot as the background (with an overlay scrim gradient). Other slots for the title, subtitle, and description are placed over it.

![Compact

  • Card](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/compact-card.webp)

Checkout TV design guidelines to learn more about Material Compact Card.

This Card handles click events, calling its onClick lambda.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Card
import androidx.tv.material3.CompactCard
import androidx.tv.material3.Text

CompactCard(
    modifier = Modifier.size(150.dp, 120.dp),
    image = { Box(modifier = Modifier.fillMaxWidth().height(80.dp).background(Color.Blue)) },
    title = { Text(text = "Compact Card", modifier = Modifier.padding(8.dp)) },
    onClick = {}
)
Parameters
onClick: () -> Unit

called when this card is clicked.
image: @Composable BoxScope.() -> Unit

defines the Composable image to be displayed on top of the Card.
title: @Composable () -> Unit

defines the Composable title placed below the image in the Card.
modifier: Modifier = Modifier

the Modifier to be applied to this card.
onLongClick: (() -> Unit)? = null

called when this card is long clicked (long-pressed).
subtitle: @Composable () -> Unit = {}

defines the Composable supporting text placed below the title of the Card.
description: @Composable () -> Unit = {}

defines the Composable description placed below the subtitle of the Card.
shape: CardShape = CardDefaults.shape()

CardShape defines the shape of this card's container in different interaction states. See CardDefaults.shape.
colors: CardColors = CardDefaults.compactCardColors()

CardColors defines the background & content colors used in this card for different interaction states. See CardDefaults.compactCardColors.
scale: CardScale = CardDefaults.scale()

CardScale defines size of the card relative to its original size for different interaction states. See CardDefaults.scale.
border: CardBorder = CardDefaults.border()

CardBorder defines a border around the card for different interaction states. See CardDefaults.border.
glow: CardGlow = CardDefaults.glow()

CardGlow defines a shadow to be shown behind the card for different interaction states. See CardDefaults.glow.
scrimBrush: Brush = CardDefaults.ScrimBrush

Brush defines a brush/gradient to be used to draw the scrim over the image in the background. See CardDefaults.ScrimBrush.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this card. You can use this to change the card's appearance or preview the card in different states. Note that if null is provided, interactions will still happen internally.

DenseListItem

@Composable
fun DenseListItem(
    selected: Boolean,
    onClick: () -> Unit,
    headlineContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    overlineContent: (@Composable () -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    leadingContent: (@Composable BoxScope.() -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    tonalElevation: Dp = ListItemDefaults.TonalElevation,
    shape: ListItemShape = ListItemDefaults.shape(),
    colors: ListItemColors = ListItemDefaults.colors(),
    scale: ListItemScale = ListItemDefaults.scale(),
    border: ListItemBorder = ListItemDefaults.border(),
    glow: ListItemGlow = ListItemDefaults.glow(),
    interactionSource: MutableInteractionSource? = null
): Unit

Lists are continuous, vertical indexes of text or images.

DenseListItem is a smaller/denser version of the Material ListItem.

This component can be used to achieve the list item templates existing in the spec. One-line list items have a singular line of headline content. Two-line list items additionally have either supporting or overline content. Three-line list items have either both supporting and overline content, or extended (two-line) supporting text.

This ListItem handles click events, calling its onClick lambda. It also support selected state which can be toggled using the selected param.

Parameters
selected: Boolean

defines whether this ListItem is selected or not
onClick: () -> Unit

called when this ListItem is clicked
headlineContent: @Composable () -> Unit

the Composable headline content of the list item
modifier: Modifier = Modifier

Modifier to be applied to the list item
enabled: Boolean = true

controls the enabled state of this list item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
onLongClick: (() -> Unit)? = null

called when this ListItem is long clicked (long-pressed).
overlineContent: (@Composable () -> Unit)? = null

the Composable content displayed above the headline content
supportingContent: (@Composable () -> Unit)? = null

the Composable content displayed below the headline content
leadingContent: (@Composable BoxScope.() -> Unit)? = null

the Composable leading content of the list item
trailingContent: (@Composable () -> Unit)? = null

the Composable trailing meta text, icon, switch or checkbox
tonalElevation: Dp = ListItemDefaults.TonalElevation

the tonal elevation of this list item
shape: ListItemShape = ListItemDefaults.shape()

ListItemShape defines the shape of ListItem's container in different interaction states. See ListItemDefaults.shape.
colors: ListItemColors = ListItemDefaults.colors()

ListItemColors defines the background and content colors used in the list item for different interaction states. See ListItemDefaults.colors
scale: ListItemScale = ListItemDefaults.scale()

ListItemScale defines the size of the list item relative to its original size in different interaction states. See ListItemDefaults.scale
border: ListItemBorder = ListItemDefaults.border()

ListItemBorder defines a border around the list item in different interaction states. See ListItemDefaults.border
glow: ListItemGlow = ListItemDefaults.glow()

ListItemGlow defines a shadow to be shown behind the list item for different interaction states. See ListItemDefaults.glow
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if null is provided, interactions will still happen internally.

FilterChip

@ExperimentalTvMaterial3Api
@NonRestartableComposable
@Composable
fun FilterChip(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: SelectableChipShape = FilterChipDefaults.shape(),
    colors: SelectableChipColors = FilterChipDefaults.colors(),
    scale: SelectableChipScale = FilterChipDefaults.scale(),
    border: SelectableChipBorder = FilterChipDefaults.border(),
    glow: SelectableChipGlow = FilterChipDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

Material Design filter chip

Chips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts

Filter chips use tags or descriptive words to filter content. They can be a good alternative to toggle buttons or checkboxes

Tapping on a filter chip toggles its selection state. A selection state leadingIcon can be provided (e.g. a checkmark) to be appended at the starting edge of the chip's label

Parameters
selected: Boolean

whether this chip is selected or not
onClick: () -> Unit

called when this chip is clicked
modifier: Modifier = Modifier

the Modifier to be applied to this chip
enabled: Boolean = true

controls the enabled state of this chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services
onLongClick: (() -> Unit)? = null

callback to be called when the surface is long clicked (long-pressed)
leadingIcon: (@Composable () -> Unit)? = null

optional icon at the start of the chip, preceding the content text
trailingIcon: (@Composable () -> Unit)? = null

optional icon at the end of the chip
shape: SelectableChipShape = FilterChipDefaults.shape()

Defines the Chip's shape
colors: SelectableChipColors = FilterChipDefaults.colors()

Color to be used on background and content of the chip
scale: SelectableChipScale = FilterChipDefaults.scale()

Defines size of the chip relative to its original size
border: SelectableChipBorder = FilterChipDefaults.border()

Defines a border around the chip
glow: SelectableChipGlow = FilterChipDefaults.glow()

Shadow to be shown behind the chip
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this chip. You can use this to change the chip's appearance or preview the chip in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit

for this chip, ideally a Text composable

Icon

@Composable
fun Icon(
    bitmap: ImageBitmap,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
): Unit

A Material Design icon component that draws bitmap using tint, with a default value of LocalContentColor. If bitmap has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead.

To learn more about icons, see Material Design icons

Parameters
bitmap: ImageBitmap

ImageBitmap to draw inside this icon
contentDescription: String?

text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
modifier: Modifier = Modifier

the Modifier to be applied to this icon
tint: Color = LocalContentColor.current

tint to be applied to bitmap. If Color.Unspecified is provided, then no tint is applied.

Icon

@Composable
fun Icon(
    imageVector: ImageVector,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
): Unit

A Material Design icon component that draws imageVector using tint, with a default value of LocalContentColor. If imageVector has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead.

To learn more about icons, see Material Design icons

Parameters
imageVector: ImageVector

ImageVector to draw inside this icon
contentDescription: String?

text used by accessibility services to describe what this icon represents. This should always be gprovided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
modifier: Modifier = Modifier

the Modifier to be applied to this icon
tint: Color = LocalContentColor.current

tint to be applied to imageVector. If Color.Unspecified is provided, then no tint is applied.

Icon

@Composable
fun Icon(
    painter: Painter,
    contentDescription: String?,
    modifier: Modifier = Modifier,
    tint: Color = LocalContentColor.current
): Unit

A Material Design icon component that draws painter using tint, with a default value of LocalContentColor. If painter has no intrinsic size, this component will use the recommended default size. Icon is an opinionated component designed to be used with single-color icons so that they can be tinted correctly for the component they are placed in. For multicolored icons and icons that should not be tinted, use Color.Unspecified for tint. For generic images that should not be tinted, and do not follow the recommended icon size, use the generic androidx.compose.foundation.Image instead.

To learn more about icons, see Material Design icons

Parameters
painter: Painter

Painter to draw inside this icon
contentDescription: String?

text used by accessibility services to describe what this icon represents. This should always be provided unless this icon is used for decorative purposes, and does not represent a meaningful action that a user can take. This text should be localized, such as by using androidx.compose.ui.res.stringResource or similar
modifier: Modifier = Modifier

the Modifier to be applied to this icon
tint: Color = LocalContentColor.current

tint to be applied to painter. If Color.Unspecified is provided, then no tint is applied.

IconButton

@NonRestartableComposable
@Composable
fun IconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    scale: ButtonScale = IconButtonDefaults.scale(),
    glow: ButtonGlow = IconButtonDefaults.glow(),
    shape: ButtonShape = IconButtonDefaults.shape(),
    colors: ButtonColors = IconButtonDefaults.colors(),
    border: ButtonBorder = IconButtonDefaults.border(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

Material Design standard icon button for TV.

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

content should typically be an Icon. If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp.

The default text style for internal Text components will be set to Typography.labelLarge.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.tv.material3.Icon
import androidx.tv.material3.IconButton

IconButton(onClick = { /* doSomething() */ }) {
    Icon(Icons.Filled.Favorite, contentDescription = "Localized description")
}
Parameters
onClick: () -> Unit

called when this button is clicked.
modifier: Modifier = Modifier

the Modifier to be applied to this button.
onLongClick: (() -> Unit)? = null

called when this button is long clicked (long-pressed).
enabled: Boolean = true

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.
scale: ButtonScale = IconButtonDefaults.scale()

Defines size of the Button relative to its original size.
glow: ButtonGlow = IconButtonDefaults.glow()

Shadow to be shown behind the Button.
shape: ButtonShape = IconButtonDefaults.shape()

Defines the Button's shape.
colors: ButtonColors = IconButtonDefaults.colors()

Color to be used for background and content of the Button
border: ButtonBorder = IconButtonDefaults.border()

Defines a border around the Button.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this button. You can use this to change the button's appearance or preview the button in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable BoxScope.() -> Unit

the content of the button, typically an Icon

InputChip

@ExperimentalTvMaterial3Api
@NonRestartableComposable
@Composable
fun InputChip(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    avatar: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: SelectableChipShape = InputChipDefaults.shape(hasAvatar = avatar != null),
    colors: SelectableChipColors = InputChipDefaults.colors(),
    scale: SelectableChipScale = InputChipDefaults.scale(),
    border: SelectableChipBorder = InputChipDefaults.border(hasAvatar = avatar != null),
    glow: SelectableChipGlow = InputChipDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

Chips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts

Input chips represent discrete pieces of information entered by a user

An Input Chip can have a leading icon or an avatar at its start. In case both are provided, the avatar will take precedence and will be displayed

Parameters
selected: Boolean

whether this chip is selected or not
onClick: () -> Unit

called when this chip is clicked
modifier: Modifier = Modifier

the Modifier to be applied to this chip
enabled: Boolean = true

controls the enabled state of this chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services
onLongClick: (() -> Unit)? = null

callback to be called when the surface is long clicked (long-pressed)
leadingIcon: (@Composable () -> Unit)? = null

optional icon at the start of the chip, preceding the content text
avatar: (@Composable () -> Unit)? = null

optional avatar at the start of the chip, preceding the content text
trailingIcon: (@Composable () -> Unit)? = null

optional icon at the end of the chip
shape: SelectableChipShape = InputChipDefaults.shape(hasAvatar = avatar != null)

Defines the Chip's shape
colors: SelectableChipColors = InputChipDefaults.colors()

Color to be used on background and content of the chip
scale: SelectableChipScale = InputChipDefaults.scale()

Defines size of the chip relative to its original size
border: SelectableChipBorder = InputChipDefaults.border(hasAvatar = avatar != null)

Defines a border around the chip
glow: SelectableChipGlow = InputChipDefaults.glow()

Shadow to be shown behind the chip
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this chip. You can use this to change the chip's appearance or preview the chip in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit

for this chip, ideally a Text composable

ListItem

@Composable
fun ListItem(
    selected: Boolean,
    onClick: () -> Unit,
    headlineContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    overlineContent: (@Composable () -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    leadingContent: (@Composable BoxScope.() -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    tonalElevation: Dp = ListItemDefaults.TonalElevation,
    shape: ListItemShape = ListItemDefaults.shape(),
    colors: ListItemColors = ListItemDefaults.colors(),
    scale: ListItemScale = ListItemDefaults.scale(),
    border: ListItemBorder = ListItemDefaults.border(),
    glow: ListItemGlow = ListItemDefaults.glow(),
    interactionSource: MutableInteractionSource? = null
): Unit

Lists are continuous, vertical indexes of text or images.

This component can be used to achieve the list item templates existing in the spec. One-line list items have a singular line of headline content. Two-line list items additionally have either supporting or overline content. Three-line list items have either both supporting and overline content, or extended (two-line) supporting text.

This ListItem handles click events, calling its onClick lambda. It also support selected state which can be toggled using the selected param.

Parameters
selected: Boolean

defines whether this ListItem is selected or not
onClick: () -> Unit

called when this ListItem is clicked
headlineContent: @Composable () -> Unit

the Composable headline content of the list item
modifier: Modifier = Modifier

Modifier to be applied to the list item
enabled: Boolean = true

controls the enabled state of this list item. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
onLongClick: (() -> Unit)? = null

called when this ListItem is long clicked (long-pressed).
overlineContent: (@Composable () -> Unit)? = null

the Composable content displayed above the headline content
supportingContent: (@Composable () -> Unit)? = null

the Composable content displayed below the headline content
leadingContent: (@Composable BoxScope.() -> Unit)? = null

the Composable leading content of the list item
trailingContent: (@Composable () -> Unit)? = null

the Composable trailing meta text, icon, switch or checkbox
tonalElevation: Dp = ListItemDefaults.TonalElevation

the tonal elevation of this list item
shape: ListItemShape = ListItemDefaults.shape()

ListItemShape defines the shape of ListItem's container in different interaction states. See ListItemDefaults.shape.
colors: ListItemColors = ListItemDefaults.colors()

ListItemColors defines the background and content colors used in the list item for different interaction states. See ListItemDefaults.colors
scale: ListItemScale = ListItemDefaults.scale()

ListItemScale defines the size of the list item relative to its original size in different interaction states. See ListItemDefaults.scale
border: ListItemBorder = ListItemDefaults.border()

ListItemBorder defines a border around the list item in different interaction states. See ListItemDefaults.border
glow: ListItemGlow = ListItemDefaults.glow()

ListItemGlow defines a shadow to be shown behind the list item for different interaction states. See ListItemDefaults.glow
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if null is provided, interactions will still happen internally.

MaterialTheme

@Composable
fun MaterialTheme(
    colorScheme: ColorScheme = MaterialTheme.colorScheme,
    shapes: Shapes = MaterialTheme.shapes,
    typography: Typography = MaterialTheme.typography,
    content: @Composable () -> Unit
): Unit

Material Theming refers to the customization of your Material Design app to better reflect your product’s brand.

Material components such as Button and Checkbox use values provided here when retrieving default values.

All values may be set by providing this component with the colorScheme, typography attributes. Use this to configure the overall theme of elements within this MaterialTheme.

Any values that are not set will inherit the current value from the theme, falling back to the defaults if there is no parent MaterialTheme. This allows using a MaterialTheme at the top of your application, and then separate MaterialTheme(s) for different screens / parts of your UI, overriding only the parts of the theme definition that need to change.

Parameters
colorScheme: ColorScheme = MaterialTheme.colorScheme

A complete definition of the Material Color theme for this hierarchy
shapes: Shapes = MaterialTheme.shapes

A set of corner shapes to be used as this hierarchy's shape system
typography: Typography = MaterialTheme.typography

A set of text styles to be used as this hierarchy's typography system
content: @Composable () -> Unit

The composable content that will be displayed with this theme

ModalNavigationDrawer

@Composable
fun ModalNavigationDrawer(
    drawerContent: @Composable NavigationDrawerScope.(DrawerValue) -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    scrimBrush: Brush = SolidColor(LocalColorScheme.current.scrim.copy(alpha = 0.5f)),
    content: @Composable () -> Unit
): Unit

Navigation drawers provide ergonomic access to destinations in an app. Modal navigation drawers are good for infrequent, but more focused, switching to different destinations.

It displays content associated with the closed state when the drawer is not in focus and displays content associated with the open state when the drawer or its contents are focused on. Modal navigation drawers are elevated above most of the app’s UI and don’t affect the screen’s layout grid.

Example:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Icon
import androidx.tv.material3.ModalNavigationDrawer
import androidx.tv.material3.NavigationDrawer
import androidx.tv.material3.NavigationDrawerItem
import androidx.tv.material3.Text

var selectedIndex by remember { mutableIntStateOf(0) }

val items =
    listOf(
        "Home" to Icons.Default.Home,
        "Settings" to Icons.Default.Settings,
        "Favourites" to Icons.Default.Favorite,
    )

val closeDrawerWidth = 80.dp
val backgroundContentPadding = 10.dp
ModalNavigationDrawer(
    drawerContent = {
        Column(
            Modifier.background(Color.Gray).fillMaxHeight().padding(12.dp).selectableGroup(),
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items.forEachIndexed { index, item ->
                val (text, icon) = item

                NavigationDrawerItem(
                    selected = selectedIndex == index,
                    onClick = { selectedIndex = index },
                    leadingContent = {
                        Icon(
                            imageVector = icon,
                            contentDescription = null,
                        )
                    }
                ) {
                    Text(text)
                }
            }
        }
    }
) {
    Button(
        modifier =
            Modifier.padding(closeDrawerWidth + backgroundContentPadding)
                .height(100.dp)
                .fillMaxWidth(),
        onClick = {}
    ) {
        Text("BUTTON")
    }
}
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Icon
import androidx.tv.material3.ModalNavigationDrawer
import androidx.tv.material3.NavigationDrawer
import androidx.tv.material3.NavigationDrawerItem
import androidx.tv.material3.Text

var selectedIndex by remember { mutableIntStateOf(0) }

val items =
    listOf(
        "Home" to Icons.Default.Home,
        "Settings" to Icons.Default.Settings,
        "Favourites" to Icons.Default.Favorite,
    )

val closeDrawerWidth = 80.dp
val backgroundContentPadding = 10.dp

ModalNavigationDrawer(
    drawerContent = {
        Column(
            Modifier.background(Color.Gray).fillMaxHeight().padding(12.dp).selectableGroup(),
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items.forEachIndexed { index, item ->
                val (text, icon) = item

                NavigationDrawerItem(
                    selected = selectedIndex == index,
                    onClick = { selectedIndex = index },
                    leadingContent = {
                        Icon(
                            imageVector = icon,
                            contentDescription = null,
                        )
                    }
                ) {
                    Text(text)
                }
            }
        }
    },
    scrimBrush = Brush.horizontalGradient(listOf(Color.DarkGray, Color.Transparent))
) {
    Button(
        modifier =
            Modifier.padding(closeDrawerWidth + backgroundContentPadding)
                .height(100.dp)
                .fillMaxWidth(),
        onClick = {}
    ) {
        Text("BUTTON")
    }
}
Parameters
drawerContent: @Composable NavigationDrawerScope.(DrawerValue) -> Unit

Content that needs to be displayed on the drawer based on whether the drawer is DrawerValue.Open or DrawerValue.Closed. Drawer-entries can be animated when the drawer moves from Closed to Open state and vice-versa. For, e.g., the entry could show only an icon in the Closed state and slide in text to form (icon + text) when in the Open state.

To limit the width of the drawer in the open or closed state, wrap the content in a box with the required width.
modifier: Modifier = Modifier

the Modifier to be applied to this drawer
drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed)

state of the drawer
scrimBrush: Brush = SolidColor(LocalColorScheme.current.scrim.copy(alpha = 0.5f))

brush to paint the scrim that obscures content when the drawer is open
content: @Composable () -> Unit

content of the rest of the UI. The content extends to the edge of the container under the modal navigation drawer. Focusable content that is not part of the background must have start-padding sufficient to prevent it from being drawn under the drawer in the Closed state.

 
@Composable
fun NavigationDrawer(
    drawerContent: @Composable NavigationDrawerScope.(DrawerValue) -> Unit,
    modifier: Modifier = Modifier,
    drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed),
    content: @Composable () -> Unit
): Unit

Navigation drawers provide ergonomic access to destinations in an app. They’re often next to app content and affect the screen’s layout grid. Standard navigation drawers are good for frequent switching to different destinations.

It displays content associated with the closed state when the drawer is not in focus and displays content associated with the open state when the drawer or its contents are focused on. The drawer is at the same level as the app's UI an reduces the screen size available to the remaining content.

Example:

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Icon
import androidx.tv.material3.NavigationDrawer
import androidx.tv.material3.NavigationDrawerItem
import androidx.tv.material3.Text

var selectedIndex by remember { mutableIntStateOf(0) }

val items =
    listOf(
        "Home" to Icons.Default.Home,
        "Settings" to Icons.Default.Settings,
        "Favourites" to Icons.Default.Favorite,
    )

NavigationDrawer(
    drawerContent = {
        Column(
            Modifier.background(Color.Gray).fillMaxHeight().padding(12.dp).selectableGroup(),
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items.forEachIndexed { index, item ->
                val (text, icon) = item

                NavigationDrawerItem(
                    selected = selectedIndex == index,
                    onClick = { selectedIndex = index },
                    leadingContent = {
                        Icon(
                            imageVector = icon,
                            contentDescription = null,
                        )
                    }
                ) {
                    Text(text)
                }
            }
        }
    }
) {
    Button(modifier = Modifier.height(100.dp).fillMaxWidth(), onClick = {}) { Text("BUTTON") }
}
Parameters
drawerContent: @Composable NavigationDrawerScope.(DrawerValue) -> Unit

Content that needs to be displayed on the drawer based on whether the drawer is DrawerValue.Open or DrawerValue.Closed. Drawer-entries can be animated when the drawer moves from Closed to Open state and vice-versa. For, e.g., the entry could show only an icon in the Closed state and slide in text to form (icon + text) when in the Open state.

To limit the width of the drawer in the open or closed state, wrap the content in a box with the required width.
modifier: Modifier = Modifier

the Modifier to be applied to this drawer
drawerState: DrawerState = rememberDrawerState(DrawerValue.Closed)

state of the drawer
content: @Composable () -> Unit

content of the rest of the UI

OutlinedButton

@NonRestartableComposable
@Composable
fun OutlinedButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    scale: ButtonScale = OutlinedButtonDefaults.scale(),
    glow: ButtonGlow = OutlinedButtonDefaults.glow(),
    shape: ButtonShape = OutlinedButtonDefaults.shape(),
    colors: ButtonColors = OutlinedButtonDefaults.colors(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = OutlinedButtonDefaults.border(),
    contentPadding: PaddingValues = OutlinedButtonDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design outlined button for TV.

Outlined buttons are medium-emphasis buttons. They contain actions that are important, but are not the primary action in an app. Outlined buttons pair well with Buttons to indicate an alternative, secondary action.

Choose the best button for an action based on the amount of emphasis it needs. The more important an action is, the higher emphasis its button should be.

  • See Button for high emphasis (important, final actions that complete a flow).

  • See OutlinedButton for a medium-emphasis button with a border.

The default text style for internal Text components will be set to Typography.labelLarge.

Samples:

import androidx.tv.material3.Button
import androidx.tv.material3.OutlinedButton
import androidx.tv.material3.Text

OutlinedButton(onClick = {}) { Text("Outlined Button") }
Parameters
onClick: () -> Unit

called when this button is clicked
modifier: Modifier = Modifier

the Modifier to be applied to this button
onLongClick: (() -> Unit)? = null

called when this button is long clicked (long-pressed).
enabled: Boolean = true

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.
scale: ButtonScale = OutlinedButtonDefaults.scale()

Defines size of the Button relative to its original size.
glow: ButtonGlow = OutlinedButtonDefaults.glow()

Shadow to be shown behind the Button.
shape: ButtonShape = OutlinedButtonDefaults.shape()

Defines the Button's shape.
colors: ButtonColors = OutlinedButtonDefaults.colors()

Color to be used for background and content of the Button
tonalElevation: Dp = Elevation.Level0

tonal elevation used to apply a color shift to the button to give the it higher emphasis
border: ButtonBorder = OutlinedButtonDefaults.border()

Defines a border around the Button.
contentPadding: PaddingValues = OutlinedButtonDefaults.ContentPadding

the spacing values to apply internally between the container and the content
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this button. You can use this to change the button's appearance or preview the button in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable RowScope.() -> Unit

the content of the button

OutlinedIconButton

@NonRestartableComposable
@Composable
fun OutlinedIconButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    scale: ButtonScale = OutlinedIconButtonDefaults.scale(),
    glow: ButtonGlow = OutlinedIconButtonDefaults.glow(),
    shape: ButtonShape = OutlinedIconButtonDefaults.shape(),
    colors: ButtonColors = OutlinedIconButtonDefaults.colors(),
    border: ButtonBorder = OutlinedIconButtonDefaults.border(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

Material Design standard icon button for TV.

Icon buttons help people take supplementary actions with a single tap. They’re used when a compact button is required, such as in a toolbar or image list.

content should typically be an Icon. If using a custom icon, note that the typical size for the internal icon is 24 x 24 dp. This icon button has an overall minimum touch target size of 48 x 48dp, to meet accessibility guidelines.

The default text style for internal Text components will be set to Typography.labelLarge.

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.outlined.FavoriteBorder
import androidx.tv.material3.Icon
import androidx.tv.material3.IconButton
import androidx.tv.material3.OutlinedIconButton

OutlinedIconButton(onClick = { /* doSomething() */ }) {
    Icon(Icons.Outlined.FavoriteBorder, contentDescription = "Localized description")
}
Parameters
onClick: () -> Unit

called when this button is clicked.
modifier: Modifier = Modifier

the Modifier to be applied to this button.
onLongClick: (() -> Unit)? = null

called when this card is long clicked (long-pressed).
enabled: Boolean = true

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.
scale: ButtonScale = OutlinedIconButtonDefaults.scale()

Defines size of the Button relative to its original size
glow: ButtonGlow = OutlinedIconButtonDefaults.glow()

Shadow to be shown behind the Button.
shape: ButtonShape = OutlinedIconButtonDefaults.shape()

Defines the Button's shape.
colors: ButtonColors = OutlinedIconButtonDefaults.colors()

Color to be used for background and content of the Button
border: ButtonBorder = OutlinedIconButtonDefaults.border()

Defines a border around the Button.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this button. You can use this to change the button's appearance or preview the button in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable BoxScope.() -> Unit

the content of the button, typically an Icon

ProvideTextStyle

@Composable
fun ProvideTextStyle(value: TextStyle, content: @Composable () -> Unit): Unit

This function is used to set the current value of LocalTextStyle, merging the given style with the current style values for any missing attributes. Any Text components included in this component's content will be styled with this style unless styled explicitly.

See also
LocalTextStyle

RadioButton

@Composable
fun RadioButton(
    selected: Boolean,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: RadioButtonColors = RadioButtonDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

Material Design radio button.

Radio buttons allow users to select one option from a set.

![Radio button

  • image](https://developer.android.com/images/reference/androidx/compose/material3/radio-button.png)

import androidx.tv.material3.RadioButton

RadioButton(selected = true, onClick = {})
Parameters
selected: Boolean

whether this radio button is selected or not
onClick: (() -> Unit)?

called when this radio button is clicked. If null, then this radio button will not be interactable, unless something else handles its input events and updates its state.
modifier: Modifier = Modifier

the Modifier to be applied to this radio button
enabled: Boolean = true

controls the enabled state of this radio button. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
colors: RadioButtonColors = RadioButtonDefaults.colors()

RadioButtonColors that will be used to resolve the color used for this radio button in different states. See RadioButtonDefaults.colors.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this radio button. You can use this to change the radio button's appearance or preview the radio button in different states. Note that if null is provided, interactions will still happen internally.

StandardCardContainer

@Composable
fun StandardCardContainer(
    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    contentColor: CardContainerColors = CardContainerDefaults.contentColor(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
): Unit

StandardCardContainer is an opinionated TV Material Card layout with an image and text content to show information about a subject.

It provides a vertical layout with an image card slot at the top. And below that, there are slots for the title, subtitle and description.

![Standard

  • Card](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/standard-card.webp)

Checkout TV design guidelines to learn more about Material Standard Card.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Card
import androidx.tv.material3.StandardCardContainer
import androidx.tv.material3.Text

StandardCardContainer(
    modifier = Modifier.size(150.dp, 120.dp),
    imageCard = { interactionSource ->
        Card(onClick = {}, interactionSource = interactionSource) {
            Box(modifier = Modifier.fillMaxWidth().height(80.dp).background(Color.Blue))
        }
    },
    title = { Text("Standard Card") }
)
Parameters
imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit

defines the Composable to be used for the image card.
title: @Composable () -> Unit

defines the Composable title placed below the image card in the CardContainer.
modifier: Modifier = Modifier

the Modifier to be applied to this CardContainer.
subtitle: @Composable () -> Unit = {}

defines the Composable supporting text placed below the title in CardContainer.
description: @Composable () -> Unit = {}

defines the Composable description placed below the subtitle in CardContainer.
contentColor: CardContainerColors = CardContainerDefaults.contentColor()

CardContainerColors defines the content color used in the CardContainer for different interaction states. See CardContainerDefaults.contentColor.
interactionSource: MutableInteractionSource

a hoisted MutableInteractionSource for observing and emitting Interactions for this CardContainer. This interaction source param would also be forwarded to be used with the imageCard composable.

SuggestionChip

@ExperimentalTvMaterial3Api
@NonRestartableComposable
@Composable
fun SuggestionChip(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    shape: ClickableChipShape = SuggestionChipDefaults.shape(),
    colors: ClickableChipColors = SuggestionChipDefaults.colors(),
    scale: ClickableChipScale = SuggestionChipDefaults.scale(),
    border: ClickableChipBorder = SuggestionChipDefaults.border(),
    glow: ClickableChipGlow = SuggestionChipDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

Material Design suggestion chip

Chips help people enter information, make selections, filter content, or trigger actions. Chips can show multiple interactive elements together in the same area, such as a list of selectable movie times, or a series of email contacts

Suggestion chips help narrow a user's intent by presenting dynamically generated suggestions, such as possible responses or search filters

Parameters
onClick: () -> Unit

called when this chip is clicked
modifier: Modifier = Modifier

the Modifier to be applied to this chip
enabled: Boolean = true

controls the enabled state of this chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services
onLongClick: (() -> Unit)? = null

callback to be called when the surface is long clicked (long-pressed)
shape: ClickableChipShape = SuggestionChipDefaults.shape()

Defines the Chip's shape
colors: ClickableChipColors = SuggestionChipDefaults.colors()

Color to be used on background and content of the chip
scale: ClickableChipScale = SuggestionChipDefaults.scale()

Defines size of the chip relative to its original size
border: ClickableChipBorder = SuggestionChipDefaults.border()

Defines a border around the chip
glow: ClickableChipGlow = SuggestionChipDefaults.glow()

Shadow to be shown behind the chip
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this chip. You can use this to change the chip's appearance or preview the chip in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit

content for this chip, ideally a Text composable

Surface

@NonRestartableComposable
@Composable
fun Surface(
    modifier: Modifier = Modifier,
    tonalElevation: Dp = 0.dp,
    shape: Shape = SurfaceDefaults.shape,
    colors: SurfaceColors = SurfaceDefaults.colors(),
    border: Border = SurfaceDefaults.border,
    glow: Glow = SurfaceDefaults.glow,
    content: @Composable BoxScope.() -> Unit
): Unit

The Surface is a building block component that will be used for any element on TV such as buttons, cards, navigation, or a simple background etc. This non-interactive Surface is similar to Compose Material's Surface composable

Parameters
modifier: Modifier = Modifier

Modifier to be applied to the layout corresponding to the surface
tonalElevation: Dp = 0.dp

When color is ColorScheme.surface, a higher the elevation will result in a darker color in light theme and lighter color in dark theme.
shape: Shape = SurfaceDefaults.shape

Defines the surface's shape.
colors: SurfaceColors = SurfaceDefaults.colors()

Defines the background & content color to be used in this Surface. See SurfaceDefaults.colors.
border: Border = SurfaceDefaults.border

Defines a border around the Surface.
glow: Glow = SurfaceDefaults.glow

Diffused shadow to be shown behind the Surface. Note that glow is disabled for API levels below 28 as it is not supported by the underlying OS
content: @Composable BoxScope.() -> Unit

defines the Composable content inside the surface

Surface

@Composable
fun Surface(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    tonalElevation: Dp = 0.dp,
    shape: ClickableSurfaceShape = ClickableSurfaceDefaults.shape(),
    colors: ClickableSurfaceColors = ClickableSurfaceDefaults.colors(),
    scale: ClickableSurfaceScale = ClickableSurfaceDefaults.scale(),
    border: ClickableSurfaceBorder = ClickableSurfaceDefaults.border(),
    glow: ClickableSurfaceGlow = ClickableSurfaceDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

The Surface is a building block component that will be used for any focusable element on TV such as buttons, cards, navigation, etc. This clickable Surface is similar to Compose Material's Surface composable but will have more functionality that will make focus management easier. Surface will automatically apply the relevant modifier(s) based on the current interaction state.

Parameters
onClick: () -> Unit

callback to be called when the surface is clicked. Note: DPad Enter button won't work if this value is null
modifier: Modifier = Modifier

Modifier to be applied to the layout corresponding to the surface
onLongClick: (() -> Unit)? = null

callback to be called when the surface is long clicked (long-pressed).
enabled: Boolean = true

Controls the enabled state of the surface. When false, this Surface will not be clickable. A disabled surface will still be focusable (reason: https://issuetracker.google.com/302955429). If you still want it to not be focusable, consider using the Non-interactive variant of the Surface.
tonalElevation: Dp = 0.dp

When color is ColorScheme.surface, a higher the elevation will result in a darker color in light theme and lighter color in dark theme.
shape: ClickableSurfaceShape = ClickableSurfaceDefaults.shape()

Defines the surface's shape.
colors: ClickableSurfaceColors = ClickableSurfaceDefaults.colors()

Defines the background & content colors to be used in this surface for different interaction states. See ClickableSurfaceDefaults.colors.
scale: ClickableSurfaceScale = ClickableSurfaceDefaults.scale()

Defines size of the Surface relative to its original size.
border: ClickableSurfaceBorder = ClickableSurfaceDefaults.border()

Defines a border around the Surface.
glow: ClickableSurfaceGlow = ClickableSurfaceDefaults.glow()

Diffused shadow to be shown behind the Surface. Note that glow is disabled for API levels below 28 as it is not supported by the underlying OS
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this surface. You can use this to change the surface's appearance or preview the surface in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable BoxScope.() -> Unit

defines the Composable content inside the surface

Surface

@Composable
fun Surface(
    selected: Boolean,
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    tonalElevation: Dp = Elevation.Level0,
    shape: SelectableSurfaceShape = SelectableSurfaceDefaults.shape(),
    colors: SelectableSurfaceColors = SelectableSurfaceDefaults.colors(),
    scale: SelectableSurfaceScale = SelectableSurfaceDefaults.scale(),
    border: SelectableSurfaceBorder = SelectableSurfaceDefaults.border(),
    glow: SelectableSurfaceGlow = SelectableSurfaceDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable BoxScope.() -> Unit
): Unit

The Surface is a building block component that will be used for any focusable element on TV such as buttons, cards, navigation, etc.

This version of Surface is responsible for a toggling its selected state as well as everything else that a regular Surface does:

This version of surface will react to the select toggles, calling onClick lambda, updating the interactionSource when PressInteraction occurs.

To manually retrieve the content color inside a surface, use LocalContentColor.

Parameters
selected: Boolean

whether or not this Surface is selected
onClick: () -> Unit

callback to be invoked when the selectable Surface is clicked.
modifier: Modifier = Modifier

Modifier to be applied to the layout corresponding to the surface
enabled: Boolean = true

Controls the enabled state of the surface. When false, this Surface will not be clickable. A disabled surface will still be focusable (reason: https://issuetracker.google.com/302955429). If you still want it to not be focusable, consider using the Non-interactive variant of the Surface.
onLongClick: (() -> Unit)? = null

callback to be called when the selectable surface is long clicked (long-pressed).
tonalElevation: Dp = Elevation.Level0

When color is ColorScheme.surface, a higher the elevation will result in a darker color in light theme and lighter color in dark theme.
shape: SelectableSurfaceShape = SelectableSurfaceDefaults.shape()

Defines the surface's shape.
colors: SelectableSurfaceColors = SelectableSurfaceDefaults.colors()

Defines the background & content colors to be used in this surface for different interaction states. See SelectableSurfaceDefaults.colors.
scale: SelectableSurfaceScale = SelectableSurfaceDefaults.scale()

Defines size of the Surface relative to its original size.
border: SelectableSurfaceBorder = SelectableSurfaceDefaults.border()

Defines a border around the Surface.
glow: SelectableSurfaceGlow = SelectableSurfaceDefaults.glow()

Diffused shadow to be shown behind the Surface. Note that glow is disabled for API levels below 28 as it is not supported by the underlying OS
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this surface. You can use this to change the surface's appearance or preview the surface in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable BoxScope.() -> Unit

defines the Composable content inside the surface

Switch

@Composable
fun Switch(
    checked: Boolean,
    onCheckedChange: ((Boolean) -> Unit)?,
    modifier: Modifier = Modifier,
    thumbContent: (@Composable () -> Unit)? = null,
    enabled: Boolean = true,
    colors: SwitchColors = SwitchDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

Material Design Switch.

Switches toggle the state of a single item on or off.

![Switch

  • image](https://developer.android.com/images/reference/androidx/compose/material3/switch.png)

Switch can be used with a custom icon via thumbContent parameter

import androidx.tv.material3.Switch

Switch(checked = true, onCheckedChange = {})
Parameters
checked: Boolean

whether or not this switch is checked
onCheckedChange: ((Boolean) -> Unit)?

called when this switch is clicked. If null, then this switch will not be interactable, unless something else handles its input events and updates its state.
modifier: Modifier = Modifier

the Modifier to be applied to this switch
thumbContent: (@Composable () -> Unit)? = null

content that will be drawn inside the thumb, expected to measure SwitchDefaults.IconSize
enabled: Boolean = true

controls the enabled state of this switch. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
colors: SwitchColors = SwitchDefaults.colors()

SwitchColors that will be used to resolve the colors used for this switch in different states. See SwitchDefaults.colors.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this switch. You can use this to change the switch's appearance or preview the switch in different states. Note that if null is provided, interactions will still happen internally.

TabRow

@Composable
fun TabRow(
    selectedTabIndex: Int,
    modifier: Modifier = Modifier,
    containerColor: Color = TabRowDefaults.ContainerColor,
    contentColor: Color = TabRowDefaults.contentColor(),
    separator: @Composable () -> Unit = { TabRowDefaults.TabSeparator() },
    indicator: @Composable (tabPositions: List<DpRect>, doesTabRowHaveFocus: Boolean) -> Unit = @Composable { tabPositions, doesTabRowHaveFocus ->
            tabPositions.getOrNull(selectedTabIndex)?.let { currentTabPosition ->
                TabRowDefaults.PillIndicator(
                    currentTabPosition = currentTabPosition,
                    doesTabRowHaveFocus = doesTabRowHaveFocus
                )
            }
        },
    tabs: @Composable TabRowScope.() -> Unit
): Unit

TV-Material Design Horizontal TabRow

Display all tabs in a set simultaneously and if the tabs exceed the container size, it has scrolling to navigate to next tab. They are best for switching between related content quickly, such as between transportation methods in a map. To navigate between tabs, use d-pad left or d-pad right when focused.

A TvTabRow contains a row of []s, and displays an indicator underneath the currently selected tab. A TvTabRow places its tabs offset from the starting edge, and allows scrolling to tabs that are placed off screen.

Examples:

import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusRestorer
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.tv.material3.Tab
import androidx.tv.material3.TabRow
import androidx.tv.material3.Text

val tabs = listOf("Tab 1", "Tab 2", "Tab 3")
var selectedTabIndex by remember { mutableStateOf(0) }

TabRow(selectedTabIndex = selectedTabIndex, modifier = Modifier.focusRestorer()) {
    tabs.forEachIndexed { index, tab ->
        key(index) {
            Tab(
                selected = index == selectedTabIndex,
                onFocus = { selectedTabIndex = index },
            ) {
                Text(
                    text = tab,
                    fontSize = 12.sp,
                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp)
                )
            }
        }
    }
}
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusRestorer
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.tv.material3.Tab
import androidx.tv.material3.TabDefaults
import androidx.tv.material3.TabRow
import androidx.tv.material3.TabRowDefaults
import androidx.tv.material3.Text

val tabs = listOf("Tab 1", "Tab 2", "Tab 3")
var selectedTabIndex by remember { mutableStateOf(0) }

TabRow(
    selectedTabIndex = selectedTabIndex,
    indicator = { tabPositions, doesTabRowHaveFocus ->
        TabRowDefaults.UnderlinedIndicator(
            currentTabPosition = tabPositions[selectedTabIndex],
            doesTabRowHaveFocus = doesTabRowHaveFocus,
        )
    },
    modifier = Modifier.focusRestorer()
) {
    tabs.forEachIndexed { index, tab ->
        key(index) {
            Tab(
                selected = index == selectedTabIndex,
                onFocus = { selectedTabIndex = index },
                colors = TabDefaults.underlinedIndicatorTabColors(),
            ) {
                Text(
                    text = tab,
                    fontSize = 12.sp,
                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp)
                )
            }
        }
    }
}
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusRestorer
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.tv.material3.Tab
import androidx.tv.material3.TabRow
import androidx.tv.material3.Text

val tabs = listOf("Tab 1", "Tab 2", "Tab 3")
var selectedTabIndex by remember { mutableStateOf(0) }

// This index will be used to show a panel
var tabPanelIndex by remember { mutableStateOf(selectedTabIndex) }

// Change the tab-panel only after some delay
LaunchedEffect(selectedTabIndex) {
    delay(250.microseconds)
    tabPanelIndex = selectedTabIndex
}

TabRow(selectedTabIndex = selectedTabIndex, modifier = Modifier.focusRestorer()) {
    tabs.forEachIndexed { index, tab ->
        key(index) {
            Tab(
                selected = index == selectedTabIndex,
                onFocus = { selectedTabIndex = index },
            ) {
                Text(
                    text = tab,
                    fontSize = 12.sp,
                    modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp)
                )
            }
        }
    }
}
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.key
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.focusRestorer
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import androidx.tv.material3.Tab
import androidx.tv.material3.TabRow
import androidx.tv.material3.TabRowDefaults
import androidx.tv.material3.Text

val bgColors =
    listOf(
        Color(0x6a, 0x16, 0x16),
        Color(0x6a, 0x40, 0x16),
        Color(0x6a, 0x6a, 0x16),
        Color(0x40, 0x6a, 0x16),
    )

var focusedTabIndex by remember { mutableStateOf(0) }
var activeTabIndex by remember { mutableStateOf(focusedTabIndex) }

Box(modifier = Modifier.fillMaxSize().background(bgColors[activeTabIndex])) {
    TabRow(
        selectedTabIndex = focusedTabIndex,
        indicator = { tabPositions, doesTabRowHaveFocus ->
            // FocusedTab's indicator
            TabRowDefaults.PillIndicator(
                currentTabPosition = tabPositions[focusedTabIndex],
                activeColor = Color.Blue.copy(alpha = 0.4f),
                inactiveColor = Color.Transparent,
                doesTabRowHaveFocus = doesTabRowHaveFocus,
            )

            // SelectedTab's indicator
            TabRowDefaults.PillIndicator(
                currentTabPosition = tabPositions[activeTabIndex],
                doesTabRowHaveFocus = doesTabRowHaveFocus,
            )
        },
        modifier = Modifier.focusRestorer()
    ) {
        repeat(bgColors.size) {
            key(it) {
                Tab(
                    selected = activeTabIndex == it,
                    onFocus = { focusedTabIndex = it },
                    onClick = {
                        focusedTabIndex = it
                        activeTabIndex = it
                    }
                ) {
                    Text(
                        text = "Tab ${it + 1}",
                        fontSize = 12.sp,
                        modifier = Modifier.padding(horizontal = 16.dp, vertical = 6.dp)
                    )
                }
            }
        }
    }
}
Parameters
selectedTabIndex: Int

the index of the currently selected tab
modifier: Modifier = Modifier

the Modifier to be applied to this tab row
containerColor: Color = TabRowDefaults.ContainerColor

the color used for the background of this tab row
contentColor: Color = TabRowDefaults.contentColor()

the primary color used in the tabs
separator: @Composable () -> Unit = { TabRowDefaults.TabSeparator() }

use this composable to add a separator between the tabs
indicator: @Composable (tabPositions: List<DpRect>, doesTabRowHaveFocus: Boolean) -> Unit = @Composable { tabPositions, doesTabRowHaveFocus -> tabPositions.getOrNull(selectedTabIndex)?.let { currentTabPosition -> TabRowDefaults.PillIndicator( currentTabPosition = currentTabPosition, doesTabRowHaveFocus = doesTabRowHaveFocus ) } }

used to indicate which tab is currently selected and/or focused. This lambda provides 2 values:

  • tabPositions: list of DpRect which provides the position of each tab

  • doesTabRowHaveFocus: whether any Tab within TabRow is focused
tabs: @Composable TabRowScope.() -> Unit

a composable which will render all the tabs

Text

@Composable
fun Text(
    text: String,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
): Unit

High level element that displays text and provides semantics / accessibility information.

The default style uses the LocalTextStyle provided by the MaterialTheme / components. If you are setting your own style, you may want to consider first retrieving LocalTextStyle, and using TextStyle.copy to keep any theme defined attributes, only modifying the specific attributes you want to override.

For ease of use, commonly used parameters from TextStyle are also present here. The order of precedence is as follows:

  • If a parameter is explicitly set here (i.e, it is not null or TextUnit.Unspecified), then this parameter will always be used.

  • If a parameter is not set, (null or TextUnit.Unspecified), then the corresponding value from style will be used instead.

Additionally, for color, if color is not set, and style does not have a color, then LocalContentColor will be used.

Parameters
text: String

the text to be displayed
modifier: Modifier = Modifier

the Modifier to be applied to this layout node
color: Color = Color.Unspecified

Color to apply to the text. If Color.Unspecified, and style has no color set, this will be LocalContentColor.
fontSize: TextUnit = TextUnit.Unspecified

the size of glyphs to use when painting the text. See TextStyle.fontSize.
fontStyle: FontStyle? = null

the typeface variant to use when drawing the letters (e.g., italic). See TextStyle.fontStyle.
fontWeight: FontWeight? = null

the typeface thickness to use when painting the text (e.g., FontWeight.Bold).
fontFamily: FontFamily? = null

the font family to be used when rendering the text. See TextStyle.fontFamily.
letterSpacing: TextUnit = TextUnit.Unspecified

the amount of space to add between each letter. See TextStyle.letterSpacing.
textDecoration: TextDecoration? = null

the decorations to paint on the text (e.g., an underline). See TextStyle.textDecoration.
textAlign: TextAlign? = null

the alignment of the text within the lines of the paragraph. See TextStyle.textAlign.
lineHeight: TextUnit = TextUnit.Unspecified

line height for the Paragraph in TextUnit unit, e.g. SP or EM. See TextStyle.lineHeight.
overflow: TextOverflow = TextOverflow.Clip

how visual overflow should be handled.
softWrap: Boolean = true

whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If softWrap is false, overflow and TextAlign may have unexpected effects.
maxLines: Int = Int.MAX_VALUE

an optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow and softWrap. If it is not null, then it must be greater than zero.
minLines: Int = 1

The minimum height in terms of minimum number of visible lines. It is required that 1 <= minLines<= maxLines.
onTextLayout: (TextLayoutResult) -> Unit = {}

callback that is executed when a new text layout is calculated. A TextLayoutResult object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
style: TextStyle = LocalTextStyle.current

style configuration for the text such as color, font, line height etc.

Text

@Composable
fun Text(
    text: AnnotatedString,
    modifier: Modifier = Modifier,
    color: Color = Color.Unspecified,
    fontSize: TextUnit = TextUnit.Unspecified,
    fontStyle: FontStyle? = null,
    fontWeight: FontWeight? = null,
    fontFamily: FontFamily? = null,
    letterSpacing: TextUnit = TextUnit.Unspecified,
    textDecoration: TextDecoration? = null,
    textAlign: TextAlign? = null,
    lineHeight: TextUnit = TextUnit.Unspecified,
    overflow: TextOverflow = TextOverflow.Clip,
    softWrap: Boolean = true,
    maxLines: Int = Int.MAX_VALUE,
    minLines: Int = 1,
    inlineContent: Map<String, InlineTextContent> = mapOf(),
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
): Unit

High level element that displays text and provides semantics / accessibility information.

The default style uses the LocalTextStyle provided by the MaterialTheme / components. If you are setting your own style, you may want to consider first retrieving LocalTextStyle, and using TextStyle.copy to keep any theme defined attributes, only modifying the specific attributes you want to override.

For ease of use, commonly used parameters from TextStyle are also present here. The order of precedence is as follows:

  • If a parameter is explicitly set here (i.e, it is not null or TextUnit.Unspecified), then this parameter will always be used.

  • If a parameter is not set, (null or TextUnit.Unspecified), then the corresponding value from style will be used instead.

Additionally, for color, if color is not set, and style does not have a color, then LocalContentColor will be used.

Parameters
text: AnnotatedString

the text to be displayed
modifier: Modifier = Modifier

the Modifier to be applied to this layout node
color: Color = Color.Unspecified

Color to apply to the text. If Color.Unspecified, and style has no color set, this will be LocalContentColor.
fontSize: TextUnit = TextUnit.Unspecified

the size of glyphs to use when painting the text. See TextStyle.fontSize.
fontStyle: FontStyle? = null

the typeface variant to use when drawing the letters (e.g., italic). See TextStyle.fontStyle.
fontWeight: FontWeight? = null

the typeface thickness to use when painting the text (e.g., FontWeight.Bold).
fontFamily: FontFamily? = null

the font family to be used when rendering the text. See TextStyle.fontFamily.
letterSpacing: TextUnit = TextUnit.Unspecified

the amount of space to add between each letter. See TextStyle.letterSpacing.
textDecoration: TextDecoration? = null

the decorations to paint on the text (e.g., an underline). See TextStyle.textDecoration.
textAlign: TextAlign? = null

the alignment of the text within the lines of the paragraph. See TextStyle.textAlign.
lineHeight: TextUnit = TextUnit.Unspecified

line height for the Paragraph in TextUnit unit, e.g. SP or EM. See TextStyle.lineHeight.
overflow: TextOverflow = TextOverflow.Clip

how visual overflow should be handled.
softWrap: Boolean = true

whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If softWrap is false, overflow and TextAlign may have unexpected effects.
maxLines: Int = Int.MAX_VALUE

an optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow and softWrap. If it is not null, then it must be greater than zero.
minLines: Int = 1

The minimum height in terms of minimum number of visible lines. It is required that 1 <= minLines<= maxLines.
inlineContent: Map<String, InlineTextContent> = mapOf()

a map storing composables that replaces certain ranges of the text, used to insert composables into text layout. See InlineTextContent.
onTextLayout: (TextLayoutResult) -> Unit = {}

callback that is executed when a new text layout is calculated. A TextLayoutResult object that callback provides contains paragraph information, size of the text, baselines and other details. The callback can be used to add additional decoration or functionality to the text. For example, to draw selection around the text.
style: TextStyle = LocalTextStyle.current

style configuration for the text such as color, font, line height etc.

TriStateCheckbox

@Composable
fun TriStateCheckbox(
    state: ToggleableState,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource? = null
): Unit

Material Design checkbox parent.

Checkboxes can have a parent-child relationship with other checkboxes. When the parent checkbox is checked, all child checkboxes are checked. If a parent checkbox is unchecked, all child checkboxes are unchecked. If some, but not all, child checkboxes are checked, the parent checkbox becomes an indeterminate checkbox.

![Checkbox

  • image](https://developer.android.com/images/reference/androidx/compose/material3/indeterminate-checkbox.png)

Parameters
state: ToggleableState

whether this checkbox is checked, unchecked, or in an indeterminate state
onClick: (() -> Unit)?

called when this checkbox is clicked. If null, then this checkbox will not be interactable, unless something else handles its input events and updates its state.
modifier: Modifier = Modifier

the Modifier to be applied to this checkbox
enabled: Boolean = true

controls the enabled state of this checkbox. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
colors: CheckboxColors = CheckboxDefaults.colors()

CheckboxColors that will be used to resolve the colors used for this checkbox in different states. See CheckboxDefaults.colors.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this checkbox. You can use this to change the checkbox's appearance or preview the checkbox in different states. Note that if null is provided, interactions will still happen internally.
See also
Checkbox

if you want a simple component that represents Boolean state

WideButton

@NonRestartableComposable
@Composable
fun WideButton(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    background: @Composable () -> Unit = {
        WideButtonDefaults.Background(
            enabled = enabled,
            interactionSource = interactionSource,
        )
    },
    scale: ButtonScale = WideButtonDefaults.scale(),
    glow: ButtonGlow = WideButtonDefaults.glow(),
    shape: ButtonShape = WideButtonDefaults.shape(),
    contentColor: WideButtonContentColor = WideButtonDefaults.contentColor(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = WideButtonDefaults.border(),
    contentPadding: PaddingValues = WideButtonDefaults.ContentPadding,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design wide button for TV.

Samples:

import androidx.compose.material.icons.filled.Settings
import androidx.tv.material3.Text
import androidx.tv.material3.WideButton

WideButton(onClick = {}) { Text("Settings") }
Parameters
onClick: () -> Unit

called when this button is clicked
modifier: Modifier = Modifier

the Modifier to be applied to this button
onLongClick: (() -> Unit)? = null

called when this button is long clicked (long-pressed).
enabled: Boolean = true

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.
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

a hoisted MutableInteractionSource for observing and emitting Interactions for this button. You can use this to change the button's appearance or preview the button in different states.
background: @Composable () -> Unit = { WideButtonDefaults.Background( enabled = enabled, interactionSource = interactionSource, ) }

the background to be applied to the WideButton
scale: ButtonScale = WideButtonDefaults.scale()

Defines size of the Button relative to its original size.
glow: ButtonGlow = WideButtonDefaults.glow()

Shadow to be shown behind the Button.
shape: ButtonShape = WideButtonDefaults.shape()

Defines the Button's shape.
contentColor: WideButtonContentColor = WideButtonDefaults.contentColor()

Color to be used for the text content of the Button
tonalElevation: Dp = Elevation.Level0

tonal elevation used to apply a color shift to the button to give the it higher emphasis
border: ButtonBorder = WideButtonDefaults.border()

Defines a border around the Button.
contentPadding: PaddingValues = WideButtonDefaults.ContentPadding

the spacing values to apply internally between the container and the content
content: @Composable RowScope.() -> Unit

the content of the button

WideButton

@NonRestartableComposable
@Composable
fun WideButton(
    onClick: () -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    enabled: Boolean = true,
    icon: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    background: @Composable () -> Unit = {
        WideButtonDefaults.Background(enabled = enabled, interactionSource = interactionSource)
    },
    scale: ButtonScale = WideButtonDefaults.scale(),
    glow: ButtonGlow = WideButtonDefaults.glow(),
    shape: ButtonShape = WideButtonDefaults.shape(),
    contentColor: WideButtonContentColor = WideButtonDefaults.contentColor(),
    tonalElevation: Dp = Elevation.Level0,
    border: ButtonBorder = WideButtonDefaults.border(),
    contentPadding: PaddingValues = WideButtonDefaults.ContentPadding
): Unit

Material Design wide button for TV.

Samples:

import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.tv.material3.Icon
import androidx.tv.material3.Text
import androidx.tv.material3.WideButton

WideButton(
    onClick = {},
    title = { Text("Settings") },
    icon = { Icon(imageVector = Icons.Default.Settings, contentDescription = "Settings") }
)
import androidx.compose.material.icons.filled.Settings
import androidx.tv.material3.Text
import androidx.tv.material3.WideButton

WideButton(
    onClick = {},
    title = { Text("Settings") },
    subtitle = { Text(text = "Update device preferences") },
)
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Settings
import androidx.tv.material3.Icon
import androidx.tv.material3.Text
import androidx.tv.material3.WideButton

WideButton(
    onClick = {},
    title = { Text("Settings") },
    subtitle = { Text(text = "Update device preferences") },
    icon = { Icon(imageVector = Icons.Default.Settings, contentDescription = "Settings") }
)
Parameters
onClick: () -> Unit

called when this button is clicked
title: @Composable () -> Unit

the title content of the button, typically a Text
modifier: Modifier = Modifier

the Modifier to be applied to this button
onLongClick: (() -> Unit)? = null

called when this button is long clicked (long-pressed).
enabled: Boolean = true

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.
icon: (@Composable () -> Unit)? = null

the leading icon content of the button, typically an Icon
subtitle: (@Composable () -> Unit)? = null

the subtitle content of the button, typically a Text
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }

a hoisted MutableInteractionSource for observing and emitting Interactions for this button. You can use this to change the button's appearance or preview the button in different states.
background: @Composable () -> Unit = { WideButtonDefaults.Background(enabled = enabled, interactionSource = interactionSource) }

the background to be applied to the WideButton
scale: ButtonScale = WideButtonDefaults.scale()

Defines size of the Button relative to its original size.
glow: ButtonGlow = WideButtonDefaults.glow()

Shadow to be shown behind the Button.
shape: ButtonShape = WideButtonDefaults.shape()

Defines the Button's shape.
contentColor: WideButtonContentColor = WideButtonDefaults.contentColor()

Color to be used for the text content of the Button
tonalElevation: Dp = Elevation.Level0

tonal elevation used to apply a color shift to the button to give the it higher emphasis
border: ButtonBorder = WideButtonDefaults.border()

Defines a border around the Button.
contentPadding: PaddingValues = WideButtonDefaults.ContentPadding

the spacing values to apply internally between the container and the content

WideCardContainer

@Composable
fun WideCardContainer(
    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    contentColor: CardContainerColors = CardContainerDefaults.contentColor(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
): Unit

WideCardContainer is an opinionated TV Material Card layout with an image and text content to show information about a subject.

It provides a horizontal layout with an image card slot at the start, followed by the title, subtitle and description at the end.

![Wide Card

  • Container](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/wide-card.webp)

Checkout TV design guidelines to learn more about Material Wide Standard Card.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Card
import androidx.tv.material3.Text
import androidx.tv.material3.WideCardContainer

WideCardContainer(
    modifier = Modifier.size(180.dp, 100.dp),
    imageCard = { interactionSource ->
        Card(onClick = {}, interactionSource = interactionSource) {
            Box(modifier = Modifier.fillMaxWidth().height(90.dp).background(Color.Blue))
        }
    },
    title = { Text("Wide Card", Modifier.padding(start = 8.dp)) },
)
Parameters
imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit

defines the Composable to be used for the image card.
title: @Composable () -> Unit

defines the Composable title placed below the image card in the CardContainer.
modifier: Modifier = Modifier

the Modifier to be applied to this CardContainer.
subtitle: @Composable () -> Unit = {}

defines the Composable supporting text placed below the title in CardContainer.
description: @Composable () -> Unit = {}

defines the Composable description placed below the subtitle in CardContainer.
contentColor: CardContainerColors = CardContainerDefaults.contentColor()

CardContainerColors defines the content color used in the CardContainer for different interaction states. See CardContainerDefaults.contentColor.
interactionSource: MutableInteractionSource

a hoisted MutableInteractionSource for observing and emitting Interactions for this CardContainer. This interaction source param would also be forwarded to be used with the imageCard composable.

WideClassicCard

@Composable
fun WideClassicCard(
    onClick: () -> Unit,
    image: @Composable BoxScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    shape: CardShape = CardDefaults.shape(),
    colors: CardColors = CardDefaults.colors(),
    scale: CardScale = CardDefaults.scale(),
    border: CardBorder = CardDefaults.border(),
    glow: CardGlow = CardDefaults.glow(),
    contentPadding: PaddingValues = PaddingValues(),
    interactionSource: MutableInteractionSource? = null
): Unit

WideClassicCard is an opinionated TV Material card that offers a 4 slot layout to show information about a subject.

This card has a horizontal layout with the interactive surface Surface, which provides the image slot at the start, followed by the title, subtitle, and description slots at the end.

This Card handles click events, calling its onClick lambda.

![Wide classic

  • card](https://developer.android.com/static/design/ui/tv/guides/components/images/cards/wide-classic.webp)

Checkout TV design guidelines to learn more about Material Wide Classic Card.

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Card
import androidx.tv.material3.ClassicCard
import androidx.tv.material3.Text
import androidx.tv.material3.WideClassicCard

WideClassicCard(
    modifier = Modifier.size(180.dp, 100.dp),
    image = { Box(modifier = Modifier.fillMaxWidth().height(80.dp).background(Color.Blue)) },
    title = { Text(text = "Wide Classic Card", modifier = Modifier.padding(start = 8.dp)) },
    contentPadding = PaddingValues(8.dp),
    onClick = {}
)
Parameters
onClick: () -> Unit

called when this card is clicked.
image: @Composable BoxScope.() -> Unit

defines the Composable image to be displayed on top of the Card.
title: @Composable () -> Unit

defines the Composable title placed below the image in the Card.
modifier: Modifier = Modifier

the Modifier to be applied to this card.
onLongClick: (() -> Unit)? = null

called when this card is long clicked (long-pressed).
subtitle: @Composable () -> Unit = {}

defines the Composable supporting text placed below the title of the Card.
description: @Composable () -> Unit = {}

defines the Composable description placed below the subtitle of the Card.
shape: CardShape = CardDefaults.shape()

CardShape defines the shape of this card's container in different interaction states. See CardDefaults.shape.
colors: CardColors = CardDefaults.colors()

CardColors defines the background & content colors used in this card for different interaction states. See CardDefaults.colors.
scale: CardScale = CardDefaults.scale()

CardScale defines size of the card relative to its original size for different interaction states. See CardDefaults.scale.
border: CardBorder = CardDefaults.border()

CardBorder defines a border around the card for different interaction states. See CardDefaults.border.
glow: CardGlow = CardDefaults.glow()

CardGlow defines a shadow to be shown behind the card for different interaction states. See CardDefaults.glow.
contentPadding: PaddingValues = PaddingValues()

PaddingValues defines the inner padding applied to the card's content.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this card. You can use this to change the card's appearance or preview the card in different states. Note that if null is provided, interactions will still happen internally.

contentColorFor

@Composable
fun contentColorFor(backgroundColor: Color): Color

The Material color system contains pairs of colors that are typically used for the background and content color inside a component. For example, a Button typically uses primary for its background, and onPrimary for the color of its content (usually text or iconography).

This function tries to match the provided backgroundColor to a 'background' color in this ColorScheme, and then will return the corresponding color used for content. For example, when backgroundColor is ColorScheme.primary, this will return ColorScheme.onPrimary.

If backgroundColor does not match a background color in the theme, this will return the current value of LocalContentColor as a best-effort color.

Returns
Color

the matching content color for backgroundColor. If backgroundColor is not present in the theme's ColorScheme, then returns the current value of LocalContentColor.
See also
contentColorFor

darkColorScheme

fun darkColorScheme(
    primary: Color = ColorDarkTokens.Primary,
    onPrimary: Color = ColorDarkTokens.OnPrimary,
    primaryContainer: Color = ColorDarkTokens.PrimaryContainer,
    onPrimaryContainer: Color = ColorDarkTokens.OnPrimaryContainer,
    inversePrimary: Color = ColorDarkTokens.InversePrimary,
    secondary: Color = ColorDarkTokens.Secondary,
    onSecondary: Color = ColorDarkTokens.OnSecondary,
    secondaryContainer: Color = ColorDarkTokens.SecondaryContainer,
    onSecondaryContainer: Color = ColorDarkTokens.OnSecondaryContainer,
    tertiary: Color = ColorDarkTokens.Tertiary,
    onTertiary: Color = ColorDarkTokens.OnTertiary,
    tertiaryContainer: Color = ColorDarkTokens.TertiaryContainer,
    onTertiaryContainer: Color = ColorDarkTokens.OnTertiaryContainer,
    background: Color = ColorDarkTokens.Background,
    onBackground: Color = ColorDarkTokens.OnBackground,
    surface: Color = ColorDarkTokens.Surface,
    onSurface: Color = ColorDarkTokens.OnSurface,
    surfaceVariant: Color = ColorDarkTokens.SurfaceVariant,
    onSurfaceVariant: Color = ColorDarkTokens.OnSurfaceVariant,
    surfaceTint: Color = primary,
    inverseSurface: Color = ColorDarkTokens.InverseSurface,
    inverseOnSurface: Color = ColorDarkTokens.InverseOnSurface,
    error: Color = ColorDarkTokens.Error,
    onError: Color = ColorDarkTokens.OnError,
    errorContainer: Color = ColorDarkTokens.ErrorContainer,
    onErrorContainer: Color = ColorDarkTokens.OnErrorContainer,
    border: Color = ColorDarkTokens.Border,
    borderVariant: Color = ColorDarkTokens.BorderVariant,
    scrim: Color = ColorDarkTokens.Scrim
): ColorScheme

Returns a dark Material color scheme.

lightColorScheme

fun lightColorScheme(
    primary: Color = ColorLightTokens.Primary,
    onPrimary: Color = ColorLightTokens.OnPrimary,
    primaryContainer: Color = ColorLightTokens.PrimaryContainer,
    onPrimaryContainer: Color = ColorLightTokens.OnPrimaryContainer,
    inversePrimary: Color = ColorLightTokens.InversePrimary,
    secondary: Color = ColorLightTokens.Secondary,
    onSecondary: Color = ColorLightTokens.OnSecondary,
    secondaryContainer: Color = ColorLightTokens.SecondaryContainer,
    onSecondaryContainer: Color = ColorLightTokens.OnSecondaryContainer,
    tertiary: Color = ColorLightTokens.Tertiary,
    onTertiary: Color = ColorLightTokens.OnTertiary,
    tertiaryContainer: Color = ColorLightTokens.TertiaryContainer,
    onTertiaryContainer: Color = ColorLightTokens.OnTertiaryContainer,
    background: Color = ColorLightTokens.Background,
    onBackground: Color = ColorLightTokens.OnBackground,
    surface: Color = ColorLightTokens.Surface,
    onSurface: Color = ColorLightTokens.OnSurface,
    surfaceVariant: Color = ColorLightTokens.SurfaceVariant,
    onSurfaceVariant: Color = ColorLightTokens.OnSurfaceVariant,
    surfaceTint: Color = primary,
    inverseSurface: Color = ColorLightTokens.InverseSurface,
    inverseOnSurface: Color = ColorLightTokens.InverseOnSurface,
    error: Color = ColorLightTokens.Error,
    onError: Color = ColorLightTokens.OnError,
    errorContainer: Color = ColorLightTokens.ErrorContainer,
    onErrorContainer: Color = ColorLightTokens.OnErrorContainer,
    border: Color = ColorLightTokens.Border,
    borderVariant: Color = ColorLightTokens.BorderVariant,
    scrim: Color = ColorLightTokens.Scrim
): ColorScheme

Returns a light Material color scheme.

rememberCarouselState

@ExperimentalTvMaterial3Api
@Composable
fun rememberCarouselState(initialActiveItemIndex: Int = 0): CarouselState

Creates a CarouselState that is remembered across compositions.

Changes to the provided initial values will not result in the state being recreated or changed in any way if it has already been created.

Parameters
initialActiveItemIndex: Int = 0

the index of the first active item

rememberDrawerState

@Composable
fun rememberDrawerState(initialValue: DrawerValue): DrawerState

Create and remember a DrawerState.

Parameters
initialValue: DrawerValue

The initial value of the state.

Extension functions

NavigationDrawerItem

@Composable
fun NavigationDrawerScope.NavigationDrawerItem(
    selected: Boolean,
    onClick: () -> Unit,
    leadingContent: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    supportingContent: (@Composable () -> Unit)? = null,
    trailingContent: (@Composable () -> Unit)? = null,
    tonalElevation: Dp = NavigationDrawerItemDefaults.NavigationDrawerItemElevation,
    shape: NavigationDrawerItemShape = NavigationDrawerItemDefaults.shape(),
    colors: NavigationDrawerItemColors = NavigationDrawerItemDefaults.colors(),
    scale: NavigationDrawerItemScale = NavigationDrawerItemScale.None,
    border: NavigationDrawerItemBorder = NavigationDrawerItemDefaults.border(),
    glow: NavigationDrawerItemGlow = NavigationDrawerItemDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

TV Material Design navigation drawer item.

A NavigationDrawerItem represents a destination within drawers, either NavigationDrawer or ModalNavigationDrawer

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Icon
import androidx.tv.material3.NavigationDrawer
import androidx.tv.material3.NavigationDrawerItem
import androidx.tv.material3.Text

var selectedIndex by remember { mutableIntStateOf(0) }

val items =
    listOf(
        "Home" to Icons.Default.Home,
        "Settings" to Icons.Default.Settings,
        "Favourites" to Icons.Default.Favorite,
    )

NavigationDrawer(
    drawerContent = {
        Column(
            Modifier.background(Color.Gray).fillMaxHeight().padding(12.dp).selectableGroup(),
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items.forEachIndexed { index, item ->
                val (text, icon) = item

                NavigationDrawerItem(
                    selected = selectedIndex == index,
                    onClick = { selectedIndex = index },
                    leadingContent = {
                        Icon(
                            imageVector = icon,
                            contentDescription = null,
                        )
                    }
                ) {
                    Text(text)
                }
            }
        }
    }
) {
    Button(modifier = Modifier.height(100.dp).fillMaxWidth(), onClick = {}) { Text("BUTTON") }
}
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Icon
import androidx.tv.material3.ModalNavigationDrawer
import androidx.tv.material3.NavigationDrawer
import androidx.tv.material3.NavigationDrawerItem
import androidx.tv.material3.Text

var selectedIndex by remember { mutableIntStateOf(0) }

val items =
    listOf(
        "Home" to Icons.Default.Home,
        "Settings" to Icons.Default.Settings,
        "Favourites" to Icons.Default.Favorite,
    )

val closeDrawerWidth = 80.dp
val backgroundContentPadding = 10.dp
ModalNavigationDrawer(
    drawerContent = {
        Column(
            Modifier.background(Color.Gray).fillMaxHeight().padding(12.dp).selectableGroup(),
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items.forEachIndexed { index, item ->
                val (text, icon) = item

                NavigationDrawerItem(
                    selected = selectedIndex == index,
                    onClick = { selectedIndex = index },
                    leadingContent = {
                        Icon(
                            imageVector = icon,
                            contentDescription = null,
                        )
                    }
                ) {
                    Text(text)
                }
            }
        }
    }
) {
    Button(
        modifier =
            Modifier.padding(closeDrawerWidth + backgroundContentPadding)
                .height(100.dp)
                .fillMaxWidth(),
        onClick = {}
    ) {
        Text("BUTTON")
    }
}
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material.icons.filled.Home
import androidx.compose.material.icons.filled.Settings
import androidx.compose.material3.Button
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Brush
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Icon
import androidx.tv.material3.ModalNavigationDrawer
import androidx.tv.material3.NavigationDrawer
import androidx.tv.material3.NavigationDrawerItem
import androidx.tv.material3.Text

var selectedIndex by remember { mutableIntStateOf(0) }

val items =
    listOf(
        "Home" to Icons.Default.Home,
        "Settings" to Icons.Default.Settings,
        "Favourites" to Icons.Default.Favorite,
    )

val closeDrawerWidth = 80.dp
val backgroundContentPadding = 10.dp

ModalNavigationDrawer(
    drawerContent = {
        Column(
            Modifier.background(Color.Gray).fillMaxHeight().padding(12.dp).selectableGroup(),
            horizontalAlignment = Alignment.Start,
            verticalArrangement = Arrangement.spacedBy(10.dp)
        ) {
            items.forEachIndexed { index, item ->
                val (text, icon) = item

                NavigationDrawerItem(
                    selected = selectedIndex == index,
                    onClick = { selectedIndex = index },
                    leadingContent = {
                        Icon(
                            imageVector = icon,
                            contentDescription = null,
                        )
                    }
                ) {
                    Text(text)
                }
            }
        }
    },
    scrimBrush = Brush.horizontalGradient(listOf(Color.DarkGray, Color.Transparent))
) {
    Button(
        modifier =
            Modifier.padding(closeDrawerWidth + backgroundContentPadding)
                .height(100.dp)
                .fillMaxWidth(),
        onClick = {}
    ) {
        Text("BUTTON")
    }
}
Parameters
selected: Boolean

defines whether this composable is selected or not
onClick: () -> Unit

called when this composable is clicked
leadingContent: @Composable () -> Unit

the leading content of the list item
modifier: Modifier = Modifier

to be applied to the list item
enabled: Boolean = true

controls the enabled state of this composable. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services
onLongClick: (() -> Unit)? = null

called when this composable is long clicked (long-pressed)
supportingContent: (@Composable () -> Unit)? = null

the content displayed below the headline content
trailingContent: (@Composable () -> Unit)? = null

the trailing meta badge or icon
tonalElevation: Dp = NavigationDrawerItemDefaults.NavigationDrawerItemElevation

the tonal elevation of this composable
shape: NavigationDrawerItemShape = NavigationDrawerItemDefaults.shape()

defines the shape of Composable's container in different interaction states
colors: NavigationDrawerItemColors = NavigationDrawerItemDefaults.colors()

defines the background and content colors used in the composable for different interaction states
scale: NavigationDrawerItemScale = NavigationDrawerItemScale.None

defines the size of the composable relative to its original size in different interaction states
border: NavigationDrawerItemBorder = NavigationDrawerItemDefaults.border()

defines a border around the composable in different interaction states
glow: NavigationDrawerItemGlow = NavigationDrawerItemDefaults.glow()

defines a shadow to be shown behind the composable for different interaction states
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this composable. You can use this to change the composable's appearance or preview the composable in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable () -> Unit

main content of this composable

Tab

@Composable
fun TabRowScope.Tab(
    selected: Boolean,
    onFocus: () -> Unit,
    modifier: Modifier = Modifier,
    onClick: () -> Unit = {},
    enabled: Boolean = true,
    colors: TabColors = TabDefaults.pillIndicatorTabColors(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable RowScope.() -> Unit
): Unit

Material Design tab.

A default Tab, also known as a Primary Navigation Tab. Tabs organize content across different screens, data sets, and other interactions.

This should typically be used inside of a TabRow, see the corresponding documentation for example usage.

Parameters
selected: Boolean

whether this tab is selected or not
onFocus: () -> Unit

called when this tab is focused
modifier: Modifier = Modifier

the Modifier to be applied to this tab
onClick: () -> Unit = {}

called when this tab is clicked (with D-Pad Center)
enabled: Boolean = true

controls the enabled state of this tab. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.
colors: TabColors = TabDefaults.pillIndicatorTabColors()

these will be used by the tab when in different states (focused, selected, etc.)
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions for this tab. You can use this to change the tab's appearance or preview the tab in different states. Note that if null is provided, interactions will still happen internally.
content: @Composable RowScope.() -> Unit

content of the Tab

contentColorFor

fun ColorScheme.contentColorFor(backgroundColor: Color): Color

The Material color system contains pairs of colors that are typically used for the background and content color inside a component. For example, a Button typically uses primary for its background, and onPrimary for the color of its content (usually text or iconography).

This function tries to match the provided backgroundColor to a 'background' color in this ColorScheme, and then will return the corresponding color used for content. For example, when backgroundColor is ColorScheme.primary, this will return ColorScheme.onPrimary.

If backgroundColor does not match a background color in the theme, this will return Color.Unspecified.

Returns
Color

the matching content color for backgroundColor. If backgroundColor is not present in the theme's ColorScheme, then returns Color.Unspecified.
See also
contentColorFor

surfaceColorAtElevation

fun ColorScheme.surfaceColorAtElevation(elevation: Dp): Color

Computes the surface tonal color at different elevation levels e.g. surface1 through surface5.

Parameters
elevation: Dp

Elevation value used to compute alpha of the color overlay layer.
Returns
Color

the ColorScheme.surface color with an alpha of the ColorScheme.surfaceTint color overlaid on top of it.

Top-level properties

LocalContentColor

val LocalContentColor: ProvidableCompositionLocal<Color>

CompositionLocal containing the preferred content color for a given position in the hierarchy. This typically represents the on color for a color in ColorScheme. For example, if the background color is surface, this color is typically set to onSurface.

This color should be used for any typography / iconography, to ensure that the color of these adjusts when the background color changes. For example, on a dark background, text should be light, and on a light background, text should be dark.

Defaults to Color.Black if no color has been explicitly set.

LocalTextStyle

val LocalTextStyle: ProvidableCompositionLocal<TextStyle>

CompositionLocal containing the preferred TextStyle that will be used by Text components by default. To set the value for this CompositionLocal, see ProvideTextStyle which will merge any missing TextStyle properties with the existing TextStyle set in this CompositionLocal.

See also
ProvideTextStyle