onClick

the [Modifier] to be applied to this button

modifier

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.

enabled

Defines size of the Button relative to its original size.

scale

glow

shape

Color to be used for background and content of the Button

colors

tonal elevation used to apply a color shift to the button to give the it higher emphasis

tonalElevation

border

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

contentPadding

the [MutableInteractionSource] representing the stream of [Interaction]s for this button. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this button in different states.

interactionSource

content

Button

the [Modifier] to be applied to this card

[CardShape] defines the shape of this card's container in different interaction states. See [CardDefaults.shape].

[CardColors] defines the background & content colors used in this card for different interaction states. See [CardDefaults.colors].

[CardScale] defines size of the card relative to its original size for different interaction states. See [CardDefaults.scale].

[CardBorder] defines a border around the card for different interaction states. See [CardDefaults.border].

[CardGlow] defines a shadow to be shown behind the card for different interaction states. See [CardDefaults.glow].

the [MutableInteractionSource] representing the stream of [Interaction]s for this card. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this card in different states.

defines the [Composable] content inside the Card

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

Card

total number of items present in the carousel.

itemCount

carouselState

duration for which item should be visible before moving to the next item.

autoScrollDurationMillis

animation transform applied when we are moving from start to end in the carousel while scrolling to the next item

contentTransformStartToEnd

animation transform applied when we are moving from end to start in the carousel while scrolling to the next item

contentTransformEndToStart

indicator showing the position of the current item among all items.

carouselIndicator

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

Carousel

time between the rendering of the background and the overlay.

overlayEnterTransitionStartDelayMillis

animation used to bring the overlay into view.

overlayEnterTransition

animation used to remove the overlay from view.

overlayExitTransition

composable defining the background of the slide.

background

composable defining the content overlaid on the background

overlay

This composable is intended for use in Carousel.

CarouselItem

defines the [Composable] image to be displayed on top of the Card.

image

defines the [Composable] title placed below the image in the Card.

title

the [Modifier] to be applied to this card.

defines the [Composable] supporting text placed below the title of the Card.

subtitle

defines the [Composable] description placed below the subtitle of the Card.

description

[PaddingValues] defines the inner padding applied to the card's content.

the [MutableInteractionSource] representing the stream of [Interaction]s for this card. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this card in different states

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

ClassicCard

[CardColors] defines the background & content colors used in this card for different interaction states. See [CardDefaults.compactCardColors].

[Brush] defines a brush/gradient to be used to draw the scrim over the image in the background. See [CardDefaults.ContainerGradient].

scrimBrush

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

CompactCard

imageVector

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

contentDescription

the [Modifier] to be applied to this icon

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

tint

Icon

the content of the button, typically an [Icon

Material Design standard icon button for TV.

IconButton

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

Alignment of the List with respect to the Immersive List.

listAlignment

composable defining the list of items that has to be rendered

list

Immersive List consists of a list with multiple items and a background that displays content based on the item in focus.

ImmersiveList

A complete definition of the Material Color theme for this hierarchy

colorScheme

A set of corner shapes to be used as this hierarchy's shape system

shapes

A set of text styles to be used as this hierarchy's typography system

typography

The composable content that will be displayed with this them

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

MaterialTheme

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.

drawerContent

the [Modifier] to be applied to this drawer

drawerState

color of the scrim that obscures content when the drawer is open

scrimColor

Navigation drawers provide ergonomic access to destinations in an app.

ModalNavigationDrawer

NavigationDrawer

OutlinedButton

Defines size of the Button relative to its original size

OutlinedIconButton

This function is used to set the current value of [LocalTextStyle], merging the given style with the current style values for any missing attributes.

ProvideTextStyle

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.

imageCard

defines the [Composable] title placed below the image card in the CardLayout.

the [Modifier] to be applied to this CardLayout.

defines the [Composable] supporting text placed below the title in CardLayout.

defines the [Composable] description placed below the subtitle in CardLayout.

[CardLayoutColors] defines the content color used in the CardLayout for different interaction states. See [CardLayoutDefaults.contentColor].

contentColor

the [MutableInteractionSource] representing the stream of [Interaction]s for this CardLayout. You can create and pass in your own `remember`ed instance to observe [Interaction]s 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

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

StandardCardLayout

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

Modifier to be applied to the layout corresponding to the surface

Controls the enabled state of the surface. When `false`, this Surface will not be clickable or focusable.

When [color] is [ColorScheme.surface], a higher the elevation will result in a darker color in light theme and lighter color in dark theme.

Color to be used on background of the Surface

color

The preferred content color provided by this Surface to its children.

Defines size of the Surface relative to its original size.

Diffused shadow to be shown behind the Surface.

the [MutableInteractionSource] representing the stream of [Interaction]s for this Surface. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this Surface in different [Interaction]s.

defines the [Composable] content inside the surfac

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

Surface

selected

onFocus

called when this tab is clicked (with D-Pad Center)

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.

these will be used by the tab when in different states (focused, selected, etc.)

the [MutableInteractionSource] representing the stream of [Interaction]s for this tab. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this tab in different states.

selectedTabIndex

the [Modifier] to be applied to this tab row

the color used for the background of this tab row

containerColor

use this composable to add a separator between the tabs

separator

used to indicate which tab is currently selected and/or focused

indicator

a composable which will render all the tab

tabs

TabRow

text

the [Modifier] to be applied to this layout node

[Color] to apply to the text. If [Color.Unspecified], and [style] has no color set, this will be [LocalContentColor].

the size of glyphs to use when painting the text. See [TextStyle.fontSize].

fontStyle

the typeface thickness to use when painting the text (e.g., [FontWeight.Bold]).

fontWeight

the font family to be used when rendering the text. See [TextStyle.fontFamily].

fontFamily

the amount of space to add between each letter. See [TextStyle.letterSpacing].

letterSpacing

the decorations to paint on the text (e.g., an underline). See [TextStyle.textDecoration].

textDecoration

the alignment of the text within the lines of the paragraph. See [TextStyle.textAlign].

textAlign

line height for the [Paragraph] in [TextUnit] unit, e.g. SP or EM. See [TextStyle.lineHeight].

lineHeight

overflow

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.

softWrap

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.

maxLines

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.

onTextLayout

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

style

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

Text

the background to be applied to the [WideButton]

Color to be used for the text content of the Button

WideButton

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.

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

WideCardLayout

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

WideClassicCard

We extracted all components found in the Tv Material library in one place. Explore all available and add them to your project.

Jetpack Compose Tv Material components

Bring your next idea to life with Compose UI