New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Tv Material Compose

ListItem

Android

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.

Last updated:

Installation

dependencies {
   implementation("androidx.tv:tv-material:1.0.0-beta01")
}

Overloads

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

Parameters

namedescription
selecteddefines whether this ListItem is selected or not
onClickcalled when this ListItem is clicked
headlineContentthe [Composable] headline content of the list item
modifier[Modifier] to be applied to the list item
enabledcontrols 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.
onLongClickcalled when this ListItem is long clicked (long-pressed).
leadingContentthe [Composable] leading content of the list item
overlineContentthe [Composable] content displayed above the headline content
supportingContentthe [Composable] content displayed below the headline content
trailingContentthe [Composable] trailing meta text, icon, switch or checkbox
tonalElevationthe tonal elevation of this list item
shape[ListItemShape] defines the shape of ListItem's container in different interaction states. See [ListItemDefaults.shape].
colors[ListItemColors] defines the background and content colors used in the list item for different interaction states. See [ListItemDefaults.colors]
scale[ListItemScale] defines the size of the list item relative to its original size in different interaction states. See [ListItemDefaults.scale]
border[ListItemBorder] defines a border around the list item in different interaction states. See [ListItemDefaults.border]
glow[ListItemGlow] defines a shadow to be shown behind the list item for different interaction states. See [ListItemDefaults.glow]
interactionSourcean optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this list item. You can use this to change the list item's appearance or preview the list item in different states. Note that if null is provided, interactions will still happen internally.