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 `Color`s 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 `Color`s 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`	`@Composable ProvideTextStyle(value: TextStyle, content: @Composable () -> 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`	`@ExperimentalTvMaterial3Api @Composable rememberCarouselState(initialActiveItemIndex: Int)` Creates a `CarouselState` that is remembered across compositions.
`DrawerState`	`@Composable rememberDrawerState(initialValue: DrawerValue)` 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`	`ColorScheme.surfaceColorAtElevation(elevation: Dp)` Computes the surface tonal color at different elevation levels e.g. surface1 through surface5.

Top-level properties summary

`ProvidableCompositionLocal<Color>`	`LocalContentColor` CompositionLocal containing the preferred content color for a given position in the hierarchy.
`ProvidableCompositionLocal<TextStyle>`	`LocalTextStyle` CompositionLocal containing the preferred `TextStyle` that will be used by `Text` components by default.

Top-level functions

AssistChip

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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.

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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

@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

Artifact: androidx.tv:tv-material

View Source

@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

Artifact: androidx.tv:tv-material

View Source

@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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

@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 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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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.

NavigationDrawer

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

Artifact: androidx.tv:tv-material

View Source

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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.

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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

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 `Interaction`s for this CardContainer. This interaction source param would also be forwarded to be used with the `imageCard` composable.

SuggestionChip

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

@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

Artifact: androidx.tv:tv-material

View Source

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

@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

Artifact: androidx.tv:tv-material

View Source

@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

Artifact: androidx.tv:tv-material

View Source

@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.

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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

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 `Interaction`s for this CardContainer. This interaction source param would also be forwarded to be used with the `imageCard` composable.

WideClassicCard

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

@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

Artifact: androidx.tv:tv-material

View Source

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

Artifact: androidx.tv:tv-material

View Source

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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@Composable
fun rememberDrawerState(initialValue: DrawerValue): DrawerState

Create and remember a DrawerState.

Parameters
`initialValue: DrawerValue`	The initial value of the state.

Extension functions

NavigationDrawerItem

Artifact: androidx.tv:tv-material

View Source

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

@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 `Interaction`s 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

Artifact: androidx.tv:tv-material

View Source

fun ColorScheme.contentColorFor(backgroundColor: Color): Color

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

Artifact: androidx.tv:tv-material

View Source

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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

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

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0

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`