Compose Component

TitleCard

Opinionated Wear Material Card that offers a specific 3 slot layout to show interactive information about an application, e.g.

TitleCardStandard

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

TitleCardWithImageBackground

@Sampled
@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")
        }
    }
}
Jetpack Compose beyond MaterialFree components, screens and templates for apps that don’t look like Google’s. Copy them into your app, or let your coding agent add them.Browse for free

Content updated: