androidx.tv.material3

---

Kotlin |Java

Interfaces

NavigationDrawerScope	NavigationDrawerScope is used to provide the doesNavigationDrawerHaveFocus state to the NavigationDrawerItem composable
ScrollPauseHandle	Handle returned by CarouselState.pauseAutoScroll that can be used to resume auto-scroll.
TabRowScope	TabRowScope is used to provide the doesTabRowHaveFocus state to the Tab composable

Classes

Border	Defines the border for a TV component.
ButtonBorder	Defines Border for all TV Interaction states of Button.
ButtonColors	Defines Colors for all TV Interaction states of Button.
ButtonGlow	Defines Glow for all TV Interaction states of Button.
ButtonScale	Defines the scale for all TV Interaction states of Button.
ButtonShape	Defines Shape for all TV Interaction states of Button.
CardBorder	Represents the Border of Card in different interaction states.
CardColors	Represents the Color of Card in different interaction states.
CardGlow	Represents the Glow of Card in different interaction states.
CardLayoutColors	Represents the Color of content in a CardLayout for 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.
ImmersiveListBackgroundScope
ImmersiveListScope
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
NonInteractiveSurfaceColors	Defines the container & content color Color for a non interactive surface.
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.
Shapes	Material surfaces can be displayed in different shapes.
SwitchColors	Represents the colors used by a Switch in different states
TabColors	Represents the colors used in a tab in different states.
ToggleableSurfaceBorder	Defines Border for all TV states of a toggleable Surface.
ToggleableSurfaceColors	Defines Color for all TV Interaction states of a toggleable Surface.
ToggleableSurfaceGlow	Defines Glow for all TV Interaction states of a toggleable Surface.
ToggleableSurfaceScale	Defines the scale for all TV Interaction states of toggleable Surface.
ToggleableSurfaceShape	Defines Shape for all TV Interaction states of a toggleable Surface.
Typography	The Material Design type scale includes a range of contrasting styles that support the needs of your product and its content.
WideButtonContentColor	Defines Colors for all TV Interaction states of a WideButton

Objects

AssistChipDefaults	Contains the default values used by AssistChip
ButtonDefaults
CardDefaults	Contains the default values used by all card types.
CardLayoutDefaults
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
ImmersiveListDefaults
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
NonInteractiveSurfaceDefaults	Contains the default values used by a non-interactive Surface
OutlinedButtonDefaults
OutlinedIconButtonDefaults
RadioButtonDefaults	Defaults used in RadioButton.
ShapeDefaults	Contains the default values used by Shapes
SuggestionChipDefaults	Contains the default values used by SuggestionChip.
SwitchDefaults	Contains the default values used by Switch
TabDefaults
TabRowDefaults
ToggleableSurfaceDefaults	Contains the default values used by Toggleable Surface.
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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @Composable Checkbox(     checked: Boolean,     onCheckedChange: ((Boolean) -> Unit)?,     modifier: Modifier,     enabled: Boolean,     colors: CheckboxColors,     interactionSource: MutableInteractionSource ) Material Design checkbox.
Unit	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @Composable DenseListItem(     selected: Boolean,     onClick: () -> 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,     headlineContent: @Composable () -> Unit ) 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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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 @Composable ImmersiveList(     background: @Composable ImmersiveListBackgroundScope.(index: Int, listHasFocus: Boolean) -> Unit,     modifier: Modifier,     listAlignment: Alignment,     list: @Composable ImmersiveListScope.() -> Unit ) Immersive List consists of a list with multiple items and a background that displays content based on the item in focus.
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	@ExperimentalTvMaterial3Api @Composable ListItem(     selected: Boolean,     onClick: () -> 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,     headlineContent: @Composable () -> Unit ) Lists are continuous, vertical indexes of text or images.
Unit	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @Composable RadioButton(     selected: Boolean,     onClick: (() -> Unit)?,     modifier: Modifier,     enabled: Boolean,     colors: RadioButtonColors,     interactionSource: MutableInteractionSource ) Material Design radio button.
Unit	@ExperimentalTvMaterial3Api @Composable StandardCardLayout(     imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,     title: @Composable () -> Unit,     modifier: Modifier,     subtitle: @Composable () -> Unit,     description: @Composable () -> Unit,     contentColor: CardLayoutColors,     interactionSource: MutableInteractionSource ) StandardCardLayout 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	@ExperimentalTvMaterial3Api @NonRestartableComposable @Composable Surface(     modifier: Modifier,     tonalElevation: Dp,     shape: Shape,     colors: NonInteractiveSurfaceColors,     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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @Composable Surface(     checked: Boolean,     onCheckedChange: (Boolean) -> Unit,     modifier: Modifier,     enabled: Boolean,     onLongClick: (() -> Unit)?,     tonalElevation: Dp,     shape: ToggleableSurfaceShape,     colors: ToggleableSurfaceColors,     scale: ToggleableSurfaceScale,     border: ToggleableSurfaceBorder,     glow: ToggleableSurfaceGlow,     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	@ExperimentalTvMaterial3Api @Composable Switch(     checked: Boolean,     onCheckedChange: ((Boolean) -> Unit)?,     modifier: Modifier,     thumbContent: (@Composable () -> Unit)?,     enabled: Boolean,     colors: SwitchColors,     interactionSource: MutableInteractionSource ) Material Design Switch.
Unit	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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,     onTextLayout: (TextLayoutResult) -> Unit,     style: TextStyle ) High level element that displays text and provides semantics / accessibility information.
Unit	@ExperimentalTvMaterial3Api @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,     inlineContent: Map<String, InlineTextContent>,     onTextLayout: (TextLayoutResult) -> Unit,     style: TextStyle ) High level element that displays text and provides semantics / accessibility information.
Unit	@ExperimentalTvMaterial3Api @Composable TriStateCheckbox(     state: ToggleableState,     onClick: (() -> Unit)?,     modifier: Modifier,     enabled: Boolean,     colors: CheckboxColors,     interactionSource: MutableInteractionSource ) Material Design checkbox parent.
Unit	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @Composable WideCardLayout(     imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,     title: @Composable () -> Unit,     modifier: Modifier,     subtitle: @Composable () -> Unit,     description: @Composable () -> Unit,     contentColor: CardLayoutColors,     interactionSource: MutableInteractionSource ) WideCardLayout is an opinionated TV Material Card layout with an image and text content to show information about a subject.
Unit	@ExperimentalTvMaterial3Api @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 @ExperimentalTvMaterial3Api 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	@ExperimentalTvMaterial3Api 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	@ExperimentalTvMaterial3Api 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 @ExperimentalTvMaterial3Api rememberDrawerState(initialValue: DrawerValue) Create and remember a DrawerState.

Extension functions summary

Unit	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api @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	@ExperimentalTvMaterial3Api 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	@ExperimentalTvMaterial3Api ColorScheme.surfaceColorAtElevation(elevation: Dp) Computes the surface tonal color at different elevation levels e.g. surface1 through surface5.

Top-level properties summary

ProvidableCompositionLocal<Dp>	@ExperimentalTvMaterial3Api LocalAbsoluteTonalElevation CompositionLocal containing the current absolute elevation provided by Surface components.
ProvidableCompositionLocal<Color>	@ExperimentalTvMaterial3Api LocalContentColor CompositionLocal containing the preferred content color for a given position in the hierarchy.
ProvidableCompositionLocal<TextStyle>	@ExperimentalTvMaterial3Api 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-alpha10

@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 = remember { MutableInteractionSource() },
    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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this chip. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this chip in different states
content: @Composable () -> Unit	for this chip, ideally a Text composable

Button

Artifact: androidx.tv:tv-material

View Source

@ExperimentalTvMaterial3Api
@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 = remember { MutableInteractionSource() },
    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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.
content: @Composable RowScope.() -> Unit	the content of the button

Card

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

@ExperimentalTvMaterial3Api
@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 = remember { MutableInteractionSource() },
    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.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Card
import androidx.tv.material3.Text

Card(
    modifier = Modifier.size(150.dp, 120.dp),
    onClick = { }
) {
    Box(Modifier.fillMaxSize()) {
        Text(
            text = "Card",
            modifier = Modifier.align(Alignment.Center)
        )
    }
}

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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card in different states.
content: @Composable ColumnScope.() -> Unit	defines the Composable content inside the Card.

Carousel

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

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

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

Material Design checkbox.

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

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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this checkbox. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this checkbox in different states.

See also
TriStateCheckbox	if you require support for an indeterminate state.

ClassicCard

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

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

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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card in different states.

CompactCard

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

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

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.ContainerGradient	Brush defines a brush/gradient to be used to draw the scrim over the image in the background. See CardDefaults.ContainerGradient.
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card in different states.

DenseListItem

Artifact: androidx.tv:tv-material

View Source

@ExperimentalTvMaterial3Api
@Composable
fun DenseListItem(
    selected: Boolean,
    onClick: () -> 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.ListItemElevation,
    shape: ListItemShape = ListItemDefaults.shape(),
    colors: ListItemColors = ListItemDefaults.colors(),
    scale: ListItemScale = ListItemDefaults.scale(),
    border: ListItemBorder = ListItemDefaults.border(),
    glow: ListItemGlow = ListItemDefaults.glow(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    headlineContent: @Composable () -> Unit
): 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
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.ListItemElevation	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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this component. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this list item in different states.
headlineContent: @Composable () -> Unit	the Composable headline content of the list item

FilterChip

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

@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 = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
): Unit

Material Design filter chip

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

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

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

Parameters
selected: Boolean	whether this chip is selected or not
onClick: () -> Unit	called when this chip is clicked
modifier: Modifier = Modifier	the Modifier to be applied to this chip
enabled: Boolean = true	controls the enabled state of this chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services
onLongClick: (() -> Unit)? = null	callback to be called when the surface is long clicked (long-pressed)
leadingIcon: (@Composable () -> Unit)? = null	optional icon at the start of the chip, preceding the content text
trailingIcon: (@Composable () -> Unit)? = null	optional icon at the end of the chip
shape: SelectableChipShape = FilterChipDefaults.shape()	Defines the Chip's shape
colors: SelectableChipColors = FilterChipDefaults.colors()	Color to be used on background and content of the chip
scale: SelectableChipScale = FilterChipDefaults.scale()	Defines size of the chip relative to its original size
border: SelectableChipBorder = FilterChipDefaults.border()	Defines a border around the chip
glow: SelectableChipGlow = FilterChipDefaults.glow()	Shadow to be shown behind the chip
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this chip. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this chip in different states
content: @Composable () -> Unit	for this chip, ideally a Text composable

Icon

Artifact: androidx.tv:tv-material

View Source

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

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

@ExperimentalTvMaterial3Api
@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-alpha10

@ExperimentalTvMaterial3Api
@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 = remember { MutableInteractionSource() },
    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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.
content: @Composable BoxScope.() -> Unit	the content of the button, typically an Icon

ImmersiveList

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

@ExperimentalTvMaterial3Api
@Composable
fun ImmersiveList(
    background: @Composable ImmersiveListBackgroundScope.(index: Int, listHasFocus: Boolean) -> Unit,
    modifier: Modifier = Modifier,
    listAlignment: Alignment = Alignment.BottomEnd,
    list: @Composable ImmersiveListScope.() -> Unit
): Unit

Immersive List consists of a list with multiple items and a background that displays content based on the item in focus. To animate the background's entry and exit, use ImmersiveListBackgroundScope.AnimatedContent. To display the background only when the list is in focus, use ImmersiveListBackgroundScope.AnimatedVisibility.

import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.ImmersiveList

val immersiveListHeight = 300.dp
val cardSpacing = 10.dp
val cardWidth = 200.dp
val cardHeight = 150.dp
val backgrounds = listOf(
    Color.Red,
    Color.Blue,
    Color.Magenta,
)

ImmersiveList(
    modifier = Modifier
        .height(immersiveListHeight + cardHeight / 2)
        .fillMaxWidth(),
    background = { index, _ ->
        Box(
            modifier = Modifier
                .background(backgrounds[index].copy(alpha = 0.3f))
                .height(immersiveListHeight)
                .fillMaxWidth()
        )
    }
) {
    Row(horizontalArrangement = Arrangement.spacedBy(cardSpacing)) {
        backgrounds.forEachIndexed { index, backgroundColor ->
            var isFocused by remember { mutableStateOf(false) }

            Box(
                modifier = Modifier
                    .background(backgroundColor)
                    .width(cardWidth)
                    .height(cardHeight)
                    .border(5.dp, Color.White.copy(alpha = if (isFocused) 1f else 0.3f))
                    .onFocusChanged { isFocused = it.isFocused }
                    .immersiveListItem(index)
                    .clickable {
                        Log.d("ImmersiveList", "Item $index was clicked")
                    }
            )
        }
    }
}

Parameters
background: @Composable ImmersiveListBackgroundScope.(index: Int, listHasFocus: Boolean) -> Unit	Composable defining the background to be displayed for a given item's index. listHasFocus argument can be used to hide the background when the list is not in focus
modifier: Modifier = Modifier	applied to Immersive List.
listAlignment: Alignment = Alignment.BottomEnd	Alignment of the List with respect to the Immersive List.
list: @Composable ImmersiveListScope.() -> Unit	composable defining the list of items that has to be rendered.

InputChip

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

@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 = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
): Unit

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

Input chips represent discrete pieces of information entered by a user

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

Parameters
selected: Boolean	whether this chip is selected or not
onClick: () -> Unit	called when this chip is clicked
modifier: Modifier = Modifier	the Modifier to be applied to this chip
enabled: Boolean = true	controls the enabled state of this chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services
onLongClick: (() -> Unit)? = null	callback to be called when the surface is long clicked (long-pressed)
leadingIcon: (@Composable () -> Unit)? = null	optional icon at the start of the chip, preceding the content text
avatar: (@Composable () -> Unit)? = null	optional avatar at the start of the chip, preceding the content text
trailingIcon: (@Composable () -> Unit)? = null	optional icon at the end of the chip
shape: SelectableChipShape = InputChipDefaults.shape(hasAvatar = avatar != null)	Defines the Chip's shape
colors: SelectableChipColors = InputChipDefaults.colors()	Color to be used on background and content of the chip
scale: SelectableChipScale = InputChipDefaults.scale()	Defines size of the chip relative to its original size
border: SelectableChipBorder = InputChipDefaults.border(hasAvatar = avatar != null)	Defines a border around the chip
glow: SelectableChipGlow = InputChipDefaults.glow()	Shadow to be shown behind the chip
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this chip. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this chip in different states
content: @Composable () -> Unit	for this chip, ideally a Text composable

ListItem

Artifact: androidx.tv:tv-material

View Source

@ExperimentalTvMaterial3Api
@Composable
fun ListItem(
    selected: Boolean,
    onClick: () -> 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.ListItemElevation,
    shape: ListItemShape = ListItemDefaults.shape(),
    colors: ListItemColors = ListItemDefaults.colors(),
    scale: ListItemScale = ListItemDefaults.scale(),
    border: ListItemBorder = ListItemDefaults.border(),
    glow: ListItemGlow = ListItemDefaults.glow(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    headlineContent: @Composable () -> Unit
): Unit

Lists are continuous, vertical indexes of text or images.

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

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

Parameters
selected: Boolean	defines whether this ListItem is selected or not
onClick: () -> Unit	called when this ListItem is clicked
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.ListItemElevation	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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this component. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this list item in different states.
headlineContent: @Composable () -> Unit	the Composable headline content of the list item

MaterialTheme

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

@ExperimentalTvMaterial3Api
@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-alpha10

@ExperimentalTvMaterial3Api
@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-alpha10

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

@ExperimentalTvMaterial3Api
@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 = remember { MutableInteractionSource() },
    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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.
content: @Composable RowScope.() -> Unit	the content of the button

OutlinedIconButton

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

@ExperimentalTvMaterial3Api
@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 = remember { MutableInteractionSource() },
    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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.
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-alpha10

@ExperimentalTvMaterial3Api
@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-alpha10

@ExperimentalTvMaterial3Api
@Composable
fun RadioButton(
    selected: Boolean,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: RadioButtonColors = RadioButtonDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
): 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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this radio button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this radio button in different states.

StandardCardLayout

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

@ExperimentalTvMaterial3Api
@Composable
fun StandardCardLayout(
    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    contentColor: CardLayoutColors = CardLayoutDefaults.contentColor(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
): Unit

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

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.CardLayoutDefaults
import androidx.tv.material3.StandardCardLayout
import androidx.tv.material3.Text

StandardCardLayout(
    modifier = Modifier.size(150.dp, 120.dp),
    imageCard = { interactionSource ->
        CardLayoutDefaults.ImageCard(
            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. See CardLayoutDefaults.ImageCard to create an image card. The interactionSource param provided in the lambda function should be forwarded and used with the image card composable.
title: @Composable () -> Unit	defines the Composable title placed below the image card in the CardLayout.
modifier: Modifier = Modifier	the Modifier to be applied to this CardLayout.
subtitle: @Composable () -> Unit = {}	defines the Composable supporting text placed below the title in CardLayout.
description: @Composable () -> Unit = {}	defines the Composable description placed below the subtitle in CardLayout.
contentColor: CardLayoutColors = CardLayoutDefaults.contentColor()	CardLayoutColors defines the content color used in the CardLayout for different interaction states. See CardLayoutDefaults.contentColor.
interactionSource: MutableInteractionSource	the MutableInteractionSource representing the stream of Interactions for this CardLayout. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card layout in different states. 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-alpha10

@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 = remember { MutableInteractionSource() },
    content: @Composable () -> Unit
): Unit

Material Design suggestion chip

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

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

Parameters
onClick: () -> Unit	called when this chip is clicked
modifier: Modifier = Modifier	the Modifier to be applied to this chip
enabled: Boolean = true	controls the enabled state of this chip. When false, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services
onLongClick: (() -> Unit)? = null	callback to be called when the surface is long clicked (long-pressed)
shape: ClickableChipShape = SuggestionChipDefaults.shape()	Defines the Chip's shape
colors: ClickableChipColors = SuggestionChipDefaults.colors()	Color to be used on background and content of the chip
scale: ClickableChipScale = SuggestionChipDefaults.scale()	Defines size of the chip relative to its original size
border: ClickableChipBorder = SuggestionChipDefaults.border()	Defines a border around the chip
glow: ClickableChipGlow = SuggestionChipDefaults.glow()	Shadow to be shown behind the chip
interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this chip. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this chip in different states
content: @Composable () -> Unit	content for this chip, ideally a Text composable

Surface

Artifact: androidx.tv:tv-material

View Source

@ExperimentalTvMaterial3Api
@NonRestartableComposable
@Composable
fun Surface(
    modifier: Modifier = Modifier,
    tonalElevation: Dp = 0.dp,
    shape: Shape = NonInteractiveSurfaceDefaults.shape,
    colors: NonInteractiveSurfaceColors = NonInteractiveSurfaceDefaults.colors(),
    border: Border = NonInteractiveSurfaceDefaults.border,
    glow: Glow = NonInteractiveSurfaceDefaults.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 = NonInteractiveSurfaceDefaults.shape	Defines the surface's shape.
colors: NonInteractiveSurfaceColors = NonInteractiveSurfaceDefaults.colors()	Defines the background & content color to be used in this Surface. See NonInteractiveSurfaceDefaults.colors.
border: Border = NonInteractiveSurfaceDefaults.border	Defines a border around the Surface.
glow: Glow = NonInteractiveSurfaceDefaults.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

@ExperimentalTvMaterial3Api
@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 = remember { MutableInteractionSource() },
    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 or focusable.
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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this Surface. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this Surface in different Interactions.
content: @Composable BoxScope.() -> Unit	defines the Composable content inside the surface

Surface

Artifact: androidx.tv:tv-material

View Source

@ExperimentalTvMaterial3Api
@Composable
fun Surface(
    checked: Boolean,
    onCheckedChange: (Boolean) -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    onLongClick: (() -> Unit)? = null,
    tonalElevation: Dp = Elevation.Level0,
    shape: ToggleableSurfaceShape = ToggleableSurfaceDefaults.shape(),
    colors: ToggleableSurfaceColors = ToggleableSurfaceDefaults.colors(),
    scale: ToggleableSurfaceScale = ToggleableSurfaceDefaults.scale(),
    border: ToggleableSurfaceBorder = ToggleableSurfaceDefaults.border(),
    glow: ToggleableSurfaceGlow = ToggleableSurfaceDefaults.glow(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    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 checked state as well as everything else that a regular Surface does:

This version of surface will react to the check toggles, calling onCheckedChange lambda, updating the interactionSource when PressInteraction occurs, and showing ripple indication in response to press events. If you don't need check handling, consider using a Surface function that doesn't require onCheckedChange param.

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

Parameters
checked: Boolean	whether or not this Surface is toggled on or off
onCheckedChange: (Boolean) -> Unit	callback to be invoked when the toggleable 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 or focusable.
onLongClick: (() -> Unit)? = null	callback to be called when the toggleable 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: ToggleableSurfaceShape = ToggleableSurfaceDefaults.shape()	Defines the surface's shape.
colors: ToggleableSurfaceColors = ToggleableSurfaceDefaults.colors()	Defines the background & content colors to be used in this surface for different interaction states. See ToggleableSurfaceDefaults.colors.
scale: ToggleableSurfaceScale = ToggleableSurfaceDefaults.scale()	Defines size of the Surface relative to its original size.
border: ToggleableSurfaceBorder = ToggleableSurfaceDefaults.border()	Defines a border around the Surface.
glow: ToggleableSurfaceGlow = ToggleableSurfaceDefaults.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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this Surface. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this Surface in different Interactions.
content: @Composable BoxScope.() -> Unit	defines the Composable content inside the surface

Switch

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

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

Material Design Switch.

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

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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this switch. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this switch in different states.

TabRow

Artifact: androidx.tv:tv-material

View Source

@ExperimentalTvMaterial3Api
@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.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
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,
  separator = { Spacer(modifier = Modifier.width(12.dp)) },
  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.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
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,
  separator = { Spacer(modifier = Modifier.width(12.dp)) },
  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(bottom = 4.dp)
        )
      }
    }
  }
}

import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.width
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,
  separator = { Spacer(modifier = Modifier.width(12.dp)) },
  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

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

@ExperimentalTvMaterial3Api
@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,
    inlineContent: Map<String, InlineTextContent> = mapOf(),
    onTextLayout: (TextLayoutResult) -> Unit = {},
    style: TextStyle = LocalTextStyle.current
): Unit

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

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

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

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

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

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

Parameters
text: AnnotatedString	the text to be displayed
modifier: Modifier = Modifier	the Modifier to be applied to this layout node
color: Color = Color.Unspecified	Color to apply to the text. If Color.Unspecified, and style has no color set, this will be LocalContentColor.
fontSize: TextUnit = TextUnit.Unspecified	the size of glyphs to use when painting the text. See TextStyle.fontSize.
fontStyle: FontStyle? = null	the typeface variant to use when drawing the letters (e.g., italic). See TextStyle.fontStyle.
fontWeight: FontWeight? = null	the typeface thickness to use when painting the text (e.g., FontWeight.Bold).
fontFamily: FontFamily? = null	the font family to be used when rendering the text. See TextStyle.fontFamily.
letterSpacing: TextUnit = TextUnit.Unspecified	the amount of space to add between each letter. See TextStyle.letterSpacing.
textDecoration: TextDecoration? = null	the decorations to paint on the text (e.g., an underline). See TextStyle.textDecoration.
textAlign: TextAlign? = null	the alignment of the text within the lines of the paragraph. See TextStyle.textAlign.
lineHeight: TextUnit = TextUnit.Unspecified	line height for the Paragraph in TextUnit unit, e.g. SP or EM. See TextStyle.lineHeight.
overflow: TextOverflow = TextOverflow.Clip	how visual overflow should be handled.
softWrap: Boolean = true	whether the text should break at soft line breaks. If false, the glyphs in the text will be positioned as if there was unlimited horizontal space. If softWrap is false, overflow and TextAlign may have unexpected effects.
maxLines: Int = Int.MAX_VALUE	an optional maximum number of lines for the text to span, wrapping if necessary. If the text exceeds the given number of lines, it will be truncated according to overflow and softWrap. If it is not null, then it must be greater than zero.
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-alpha10

@ExperimentalTvMaterial3Api
@Composable
fun TriStateCheckbox(
    state: ToggleableState,
    onClick: (() -> Unit)?,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    colors: CheckboxColors = CheckboxDefaults.colors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
): 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.

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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this checkbox. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this checkbox in different states.

See also
Checkbox	if you want a simple component that represents Boolean state

WideButton

Artifact: androidx.tv:tv-material

View Source

@ExperimentalTvMaterial3Api
@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() }	the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.
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

@ExperimentalTvMaterial3Api
@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() }	the MutableInteractionSource representing the stream of Interactions for this button. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this button in different states.
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

WideCardLayout

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

@ExperimentalTvMaterial3Api
@Composable
fun WideCardLayout(
    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    contentColor: CardLayoutColors = CardLayoutDefaults.contentColor(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
): Unit

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

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.CardLayoutDefaults
import androidx.tv.material3.Text
import androidx.tv.material3.WideCardLayout

WideCardLayout(
    modifier = Modifier.size(180.dp, 100.dp),
    imageCard = { interactionSource ->
        CardLayoutDefaults.ImageCard(
            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. See CardLayoutDefaults.ImageCard to create an image card. The interactionSource param provided in the lambda function should to be forwarded and used with the image card composable.
title: @Composable () -> Unit	defines the Composable title placed below the image card in the CardLayout.
modifier: Modifier = Modifier	the Modifier to be applied to this CardLayout.
subtitle: @Composable () -> Unit = {}	defines the Composable supporting text placed below the title in CardLayout.
description: @Composable () -> Unit = {}	defines the Composable description placed below the subtitle in CardLayout.
contentColor: CardLayoutColors = CardLayoutDefaults.contentColor()	CardLayoutColors defines the content color used in the CardLayout for different interaction states. See CardLayoutDefaults.contentColor.
interactionSource: MutableInteractionSource	the MutableInteractionSource representing the stream of Interactions for this CardLayout. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card layout in different states. 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-alpha10

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

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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this card in different states.

contentColorFor

Artifact: androidx.tv:tv-material

View Source

@Composable
@ExperimentalTvMaterial3Api
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

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

@ExperimentalTvMaterial3Api
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-alpha10

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

@Composable
@ExperimentalTvMaterial3Api
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

@ExperimentalTvMaterial3Api
@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 = remember { MutableInteractionSource() },
    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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this component. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this composable in different states
content: @Composable () -> Unit	main content of this composable

Tab

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

@ExperimentalTvMaterial3Api
@Composable
fun TabRowScope.Tab(
    selected: Boolean,
    onFocus: () -> Unit,
    modifier: Modifier = Modifier,
    onClick: () -> Unit = { },
    enabled: Boolean = true,
    colors: TabColors = TabDefaults.pillIndicatorTabColors(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    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 = remember { MutableInteractionSource() }	the MutableInteractionSource representing the stream of Interactions for this tab. You can create and pass in your own remembered instance to observe Interactions and customize the appearance / behavior of this tab in different states.
content: @Composable RowScope.() -> Unit	content of the Tab

contentColorFor

Artifact: androidx.tv:tv-material

View Source

@ExperimentalTvMaterial3Api
fun ColorScheme.contentColorFor(backgroundColor: Color): Color

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

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

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

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

See also
contentColorFor

surfaceColorAtElevation

Artifact: androidx.tv:tv-material

View Source

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

LocalAbsoluteTonalElevation

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

@ExperimentalTvMaterial3Api
val LocalAbsoluteTonalElevation: ProvidableCompositionLocal<Dp>

CompositionLocal containing the current absolute elevation provided by Surface components. This absolute elevation is a sum of all the previous elevations. Absolute elevation is only used for calculating surface tonal colors, and is not used for drawing the shadow in a SurfaceImpl.

LocalContentColor

Artifact: androidx.tv:tv-material

View Source

Added in 1.0.0-alpha10

@ExperimentalTvMaterial3Api
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-alpha10

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