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

← Back to Wear Material

TitleCard

Component
in
Wear Material
. Since 1.0.0

Overview

Code Examples

Video

Opinionated Wear Material Card that offers a specific 3 slot layout to show interactive information about an application, e.g. a message. TitleCards are designed for use within an application.

The first row of the layout has two slots. 1. a start aligned title (emphasised with the titleColor and expected to be start aligned text). The title text is expected to be a maximum of 2 lines of text. 2. An optional time that the application activity has occurred shown at the end of the row, expected to be an end aligned Text composable showing a time relevant to the contents of the Card.

The rest of the Card contains the content which is expected to be Text or a contained Image.

If the content is text it can be single or multiple line and is expected to be Top and Start aligned and of type of Typography.body1.

Overall the title and content text should be no more than 5 rows of text combined.

If more than one composable is provided in the content slot it is the responsibility of the caller to determine how to layout the contents, e.g. provide either a row or a column.

Example of a TitleCard with two lines of body text:

Overloads

TitleCard

@Composable
public fun TitleCard(
    onClick: () -> Unit,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    time: @Composable (RowScope.() -> Unit)? = null,
    backgroundPainter: Painter = CardDefaults.cardBackgroundPainter(),
    contentColor: Color = MaterialTheme.colors.onSurfaceVariant,
    titleColor: Color = MaterialTheme.colors.onSurface,
    timeColor: Color = contentColor,
    content: @Composable ColumnScope.() -> Unit,
)

Parameters

NameDescription
onClickWill be called when the user clicks the card
titleA slot for displaying the title of the card, expected to be one or two lines of text of Typography.button
modifierModifier to be applied to the card
enabledControls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable.
timeAn optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of end aligned text.
backgroundPainterA painter used to paint the background of the card. A title card can have either a gradient background or an image background, use CardDefaults.cardBackgroundPainter() or CardDefaults.imageBackgroundPainter() to obtain an appropriate painter
contentColorThe default color to use for content() slot unless explicitly set.
titleColorThe default color to use for title() slot unless explicitly set.
timeColorThe default color to use for time() slot unless explicitly set