{% setvar book_path %}/reference/androidx/_book.yaml{% endsetvar %} {% include "_shared/_reference-head-tags.html" %}

ListItemKt

public final class ListItemKt


Summary

Public methods

static final void
@Composable
ListItem(
    @Composable @NonNull Function0<Unit> headlineContent,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> overlineContent,
    @Composable Function0<Unit> supportingContent,
    @Composable Function0<Unit> leadingContent,
    @Composable Function0<Unit> trailingContent,
    @NonNull ListItemColors colors,
    @NonNull Dp tonalElevation,
    @NonNull Dp shadowElevation
)

Material Design list item.

Public methods

ListItem

@Composable
public static final void ListItem(
    @Composable @NonNull Function0<Unit> headlineContent,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> overlineContent,
    @Composable Function0<Unit> supportingContent,
    @Composable Function0<Unit> leadingContent,
    @Composable Function0<Unit> trailingContent,
    @NonNull ListItemColors colors,
    @NonNull Dp tonalElevation,
    @NonNull Dp shadowElevation
)

Material Design list item.

Lists are continuous, vertical indexes of text or images.

Lists image

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. For example:

import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text

Column {
    ListItem(
        headlineContent = { Text("One line list item with 24x24 icon") },
        leadingContent = {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = "Localized description",
            )
        }
    )
    HorizontalDivider()
}
import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text

Column {
    ListItem(
        headlineContent = { Text("Two line list item with trailing") },
        supportingContent = { Text("Secondary text") },
        trailingContent = { Text("meta") },
        leadingContent = {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = "Localized description",
            )
        }
    )
    HorizontalDivider()
}
import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text

Column {
    ListItem(
        headlineContent = { Text("Three line list item") },
        overlineContent = { Text("OVERLINE") },
        supportingContent = { Text("Secondary text") },
        leadingContent = {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = "Localized description",
            )
        },
        trailingContent = { Text("meta") }
    )
    HorizontalDivider()
}
import androidx.compose.foundation.layout.Column
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.material3.HorizontalDivider
import androidx.compose.material3.Icon
import androidx.compose.material3.ListItem
import androidx.compose.material3.Text

Column {
    ListItem(
        headlineContent = { Text("Three line list item") },
        supportingContent = {
            Text("Secondary text that is long and perhaps goes onto another line")
        },
        leadingContent = {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = "Localized description",
            )
        },
        trailingContent = { Text("meta") }
    )
    HorizontalDivider()
}
Parameters
@Composable @NonNull Function0<Unit> headlineContent

the headline content of the list item

@NonNull Modifier modifier

Modifier to be applied to the list item

@Composable Function0<Unit> overlineContent

the content displayed above the headline content

@Composable Function0<Unit> supportingContent

the supporting content of the list item

@Composable Function0<Unit> leadingContent

the leading content of the list item

@Composable Function0<Unit> trailingContent

the trailing meta text, icon, switch or checkbox

@NonNull ListItemColors colors

ListItemColors that will be used to resolve the background and content color for this list item in different states. See ListItemDefaults.colors

@NonNull Dp tonalElevation

the tonal elevation of this list item

@NonNull Dp shadowElevation

the shadow elevation of this list item