TitleCard

Composable Component

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.

Android

@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


onClick	Will be called when the user clicks the card
title	A slot for displaying the title of the card, expected to be one or two lines of text of `Typography.button`
modifier	Modifier to be applied to the card
enabled	Controls 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.
time	An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of end aligned text.
backgroundPainter	A 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
contentColor	The default color to use for content() slot unless explicitly set.
titleColor	The default color to use for title() slot unless explicitly set.
timeColor	The default color to use for time() slot unless explicitly set.
content	Slot for composable body content displayed on the Card

Code Examples

TitleCardStandard

@Composable
fun TitleCardStandard() {
    TitleCard(onClick = {}, title = { Text("TitleCard") }, time = { Text("now") }) {
        Text("Some body content")
        Text("and some more body content")
    }
}

TitleCardWithImageBackground

@Composable
fun TitleCardWithImageBackground() {
    TitleCard(
        onClick = { /* Do something */ },
        title = { Text("TitleCard With an ImageBackground") },
        backgroundPainter =
            CardDefaults.imageWithScrimBackgroundPainter(
                backgroundImagePainter = painterResource(id = R.drawable.backgroundimage)
            ),
        contentColor = MaterialTheme.colors.onSurface,
        titleColor = MaterialTheme.colors.onSurface,
    ) {
        // Apply 24.dp padding in bottom for TitleCard with an ImageBackground.
        // Already 12.dp padding exists. Ref - [CardDefaults.ContentPadding]
        Column(modifier = Modifier.fillMaxSize().padding(bottom = 12.dp)) {
            Text("Text coloured to stand out on the image")
        }
    }
}

Create your own Component Library

Material Components are meant to be used as is and they do not allow customizations. To build your own Jetpack Compose component library use Compose Unstyled