State of Compose 2023 results are in! Click here to learn more

← Back to Tv Material

DenseListItem

Component
in
Tv Material
. Since 1.0.0-alpha08

Overview

Code Examples

Video

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.

@param selected defines whether this ListItem is selected or not @param onClick called when this ListItem is clicked @param modifier Modifier to be applied to the list item @param enabled 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. @param onLongClick called when this ListItem is long clicked (long-pressed). @param leadingContent the Composable leading content of the list item @param overlineContent the Composable content displayed above the headline content @param supportingContent the Composable content displayed below the headline content @param trailingContent the Composable trailing meta text, icon, switch or checkbox @param tonalElevation the tonal elevation of this list item @param shape ListItemShape defines the shape of ListItem's container in different interaction states. See ListItemDefaults.shape. @param colors ListItemColors defines the background and content colors used in the list item for different interaction states. See ListItemDefaults.colors @param scale ListItemScale defines the size of the list item relative to its original size in different interaction states. See ListItemDefaults.scale @param border ListItemBorder defines a border around the list item in different interaction states. See ListItemDefaults.border @param glow ListItemGlow defines a shadow to be shown behind the list item for different interaction states. See ListItemDefaults.glow @param interactionSource 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. @param headlineContent the Composable headline content of the list item

Overloads

DenseListItem

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

Parameters

NameDescription
selecteddefines whether this ListItem is selected or not
onClickcalled when this ListItem is clicked
modifierModifier 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
shapeListItemShape defines the shape of ListItem's container in different interaction states. See ListItemDefaults.shape.
colorsListItemColors defines the background and content colors used in the list item for different interaction states. See ListItemDefaults.colors
scaleListItemScale defines the size of the list item relative to its original size in different interaction states. See ListItemDefaults.scale
borderListItemBorder defines a border around the list item in different interaction states. See ListItemDefaults.border
glowListItemGlow defines a shadow to be shown behind the list item for different interaction states. See ListItemDefaults.glow
interactionSourcethe 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.
headlineContentthe Composable headline content of the list ite