TitleCardContent

Functions summary

Unit
@Composable
TitleCardContent(
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier,
    time: (@Composable () -> Unit)?,
    subtitle: (@Composable ColumnScope.() -> Unit)?,
    colors: CardColors,
    content: (@Composable () -> Unit)?
)

Lays out the content of a TitleCard with support for a title, time, subtitle, and body content.

Functions

TitleCardContent

@Composable
fun TitleCardContent(
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    time: (@Composable () -> Unit)? = null,
    subtitle: (@Composable ColumnScope.() -> Unit)? = null,
    colors: CardColors = CardDefaults.cardColors(),
    content: (@Composable () -> Unit)? = null
): Unit

Lays out the content of a TitleCard with support for a title, time, subtitle, and body content.

While the standard TitleCard overloads provide this layout out-of-the-box, TitleCardContent can be used inside the Card overload that takes a generic content to build custom card layouts (for example, to wrap the content in a gesture hint indicator like OneHandedGestureIndicator) while maintaining standard typography, colors, and spacing.

Example of a TitleCardContent layout with OneHandedGestureIndicator:

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TitleCard
import androidx.wear.compose.material3.TitleCardContent
import androidx.wear.compose.material3.onehandedgesture.GestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureIndicator
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture

var label by remember { mutableStateOf("Title Card") }
val onClick = remember { { label = "Gestured" } }
val interactionSource = remember { MutableInteractionSource() }

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Card(
        onClick = onClick,
        interactionSource = interactionSource,
        modifier =
            Modifier.padding(horizontal = 12.dp)
                .fillMaxWidth()
                .oneHandedGesture(
                    action = GestureAction.Primary,
                    interactionSource = interactionSource,
                    onGesture = onClick,
                ),
    ) {
        OneHandedGestureIndicator(
            interactionSource = interactionSource,
            gestureIndicatorTint = MaterialTheme.colorScheme.onSurface,
        ) {
            TitleCardContent(
                title = { Text(label) },
                time = { Text("now") },
                subtitle = { Text("Subtitle") },
            ) {
                Text("Card body")
            }
        }
    }
}
Parameters
title: @Composable RowScope.() -> Unit

A slot for displaying the title of the card, expected to be one of two lines of text.
modifier: Modifier = Modifier

Modifier to be applied to the title card content layout.
time: (@Composable () -> Unit)? = null

An optional slot for displaying the time relevant to the contents of the card, expected to be a short piece of text. Depending on whether we have a content or not, can be placed at the end of the title line or above it.
subtitle: (@Composable ColumnScope.() -> Unit)? = null

An optional slot for displaying the subtitle of the card, expected to be one line of text.
colors: CardColors = CardDefaults.cardColors()

CardColors that will be used to resolve the colors used for this card.
content: (@Composable () -> Unit)? = null

The optional body content of the card.