CardDefaults

Artifact: androidx.wear.compose:compose-material3

Added in 1.5.0

object CardDefaults

Contains the default values used by Card

Summary

Public functions
`Unit`	`@Composable AppCardContent( appName: @Composable RowScope.() -> Unit, title: @Composable RowScope.() -> Unit, modifier: Modifier, colors: CardColors, appImage: (@Composable RowScope.() -> Unit)?, time: (@Composable RowScope.() -> Unit)?, content: @Composable ColumnScope.() -> Unit )` Lays out the content of an `AppCard` with support for an app icon, app name, time, title, and body content.
`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.
`CardColors`	`@Composable cardColors()` Creates a `CardColors` that represents the default container and content colors used in a `Card`, `AppCard` or `TitleCard`.
`CardColors`	`@Composable cardColors( containerColor: Color, contentColor: Color, appNameColor: Color, timeColor: Color, titleColor: Color, subtitleColor: Color )` Creates a `CardColors` that represents the default container and content colors used in a `Card`, `AppCard` or `TitleCard`.
`CardColors`	`@Composable cardWithContainerPainterColors()` Creates a `CardColors` that represents the default container and content colors used in a `Card` with image container painter.
`CardColors`	`@Composable cardWithContainerPainterColors( contentColor: Color, appNameColor: Color, timeColor: Color, titleColor: Color, subtitleColor: Color )` Creates a `CardColors` that represents the default container and content colors used in a `TitleCard` with Image set as a background.
`Painter`	`@Composable containerPainter( image: Painter, scrim: Brush, sizeToIntrinsics: Boolean, alignment: Alignment, contentScale: ContentScale, alpha: Float )` Creates a `Painter` for the background of an `Card` that displays an image with a scrim on top to make sure that any content above the background will be legible.
`BorderStroke`	`@Composable outlinedCardBorder(outlineColor: Color, borderWidth: Dp)` Creates a `BorderStroke` that represents the default border used in Outlined Cards.
`CardColors`	`@Composable outlinedCardColors()` Creates a `CardColors` that represents the default container and content colors used in an `OutlinedCard`, outlined `AppCard` or `TitleCard`.
`CardColors`	`@Composable outlinedCardColors( contentColor: Color, appNameColor: Color, timeColor: Color, titleColor: Color, subtitleColor: Color )` Creates a `CardColors` that represents the default container and content colors used in an `OutlinedCard`, outlined `AppCard` or `TitleCard`.
`Brush`	`@Composable scrimBrush()` Creates a `Brush` for the recommended scrim drawn on top of image container backgrounds.

Public properties
`Dp`	`AppImageSize` The default size of the app icon/image when used inside a `AppCard`.
`PaddingValues`	`CardWithContainerPainterContentPadding` ContentPadding for use cards that have an image background in order to show more of the image
`PaddingValues`	`ContentPadding` The default content padding used by `Card`
`Dp`	`Height` The default height of `Card`, `AppCard` and `TitleCard`.
`Dp`	`ImageBottomPadding` Additional bottom padding added for TitleCard with an image background
`Dp`	`minimumVerticalListContentPadding` The minimum vertical content padding for the list when a `Card` is placed at the top or bottom edge.
`Color`	`scrimColor` Returns a scrim color that can be used to draw a scrim on top of an image to ensure that any text drawn over the image is legible.
`Shape`	`shape` The default shape of `Card`, which determines its corner radius.

Public functions

AppCardContent

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

Lays out the content of an AppCard with support for an app icon, app name, time, title, and body content.

While the standard AppCard overloads provide this layout out-of-the-box, CardDefaults.AppCardContent 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 an CardDefaults.AppCardContent layout with OneHandedGestureIndicator:

import androidx.compose.foundation.Image
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.foundation.layout.size
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.AppCard
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.onehandedgesture.GestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

var label by remember { mutableStateOf("App Card") }
val onClick = remember { { label = "Gestured" } }
val interactionSource = remember { MutableInteractionSource() }
val gestureConfig = rememberOneHandedGestureConfiguration(action = GestureAction.Primary)
val indicatorState = remember { OneHandedGestureIndicatorState() }

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Card(
        onClick = onClick,
        interactionSource = interactionSource,
        modifier =
            Modifier.padding(horizontal = 12.dp)
                .fillMaxWidth()
                .oneHandedGesture(
                    gestureConfiguration = gestureConfig,
                    onGestureLabel = "click",
                    onGestureAvailable = { indicatorState.isIndicatorActive = true },
                    interactionSource = interactionSource,
                    onGesture = onClick,
                ),
    ) {
        OneHandedGestureIndicator(
            gestureConfiguration = gestureConfig,
            indicatorState = indicatorState,
            gestureIndicatorTint = MaterialTheme.colorScheme.onSurface,
        ) {
            CardDefaults.AppCardContent(
                appName = { Text("App Name") },
                title = { Text(label) },
                appImage = {
                    Icon(
                        painter = painterResource(R.drawable.ic_favorite_rounded),
                        contentDescription = "Favorite icon",
                        modifier = Modifier.size(CardDefaults.AppImageSize),
                    )
                },
                time = { Text("now") },
            ) {
                Text("Card body")
            }
        }
    }
}

Parameters
`appName: @Composable RowScope.() -> Unit`	A slot for displaying the application name, expected to be a single line of start aligned text.
`title: @Composable RowScope.() -> Unit`	A slot for displaying the title of the card, expected to be one or two lines of start aligned text.
`modifier: Modifier = Modifier`	Modifier to be applied to the card.
`colors: CardColors = cardColors()`	`CardColors` that will be used to resolve the colors used for this card in different states. See `CardDefaults.cardColors`.
`appImage: (@Composable RowScope.() -> Unit)? = null`	A slot for a small (`CardDefaults.AppImageSize`x`CardDefaults.AppImageSize` ) `Image` associated with the application.
`time: (@Composable RowScope.() -> Unit)? = null`	A slot for displaying the time relevant to the contents of the card, expected to be a short piece of end aligned text.
`content: @Composable ColumnScope.() -> Unit`	The main slot for a content of this card.

TitleCardContent

@Composable
fun TitleCardContent(
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    time: (@Composable () -> Unit)? = null,
    subtitle: (@Composable ColumnScope.() -> Unit)? = null,
    colors: CardColors = 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, CardDefaults.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 CardDefaults.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.CardDefaults
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.TitleCard
import androidx.wear.compose.material3.onehandedgesture.GestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureIndicator
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureIndicatorState
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture
import androidx.wear.compose.material3.onehandedgesture.rememberOneHandedGestureConfiguration

var label by remember { mutableStateOf("Title Card") }
val onClick = remember { { label = "Gestured" } }
val interactionSource = remember { MutableInteractionSource() }
val gestureConfig = rememberOneHandedGestureConfiguration(action = GestureAction.Primary)
val indicatorState = remember { OneHandedGestureIndicatorState() }

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Card(
        onClick = onClick,
        interactionSource = interactionSource,
        modifier =
            Modifier.padding(horizontal = 12.dp)
                .fillMaxWidth()
                .oneHandedGesture(
                    gestureConfiguration = gestureConfig,
                    onGestureLabel = "click",
                    onGestureAvailable = { indicatorState.isIndicatorActive = true },
                    interactionSource = interactionSource,
                    onGesture = onClick,
                ),
    ) {
        OneHandedGestureIndicator(
            gestureConfiguration = gestureConfig,
            indicatorState = indicatorState,
            gestureIndicatorTint = MaterialTheme.colorScheme.onSurface,
        ) {
            CardDefaults.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 or two lines of text.
`modifier: Modifier = Modifier`	Modifier to be applied to the card.
`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 = cardColors()`	`CardColors` that will be used to resolve the colors used for this card in different states. See `CardDefaults.cardColors`.
`content: (@Composable () -> Unit)? = null`	The optional body content of the card. If not provided then title and subtitle are expected to be provided.

cardColors

Added in 1.5.0

@Composable
fun cardColors(): CardColors

Creates a CardColors that represents the default container and content colors used in a Card, AppCard or TitleCard.

cardColors

Added in 1.6.0

@Composable
fun cardColors(
    containerColor: Color = Color.Unspecified,
    contentColor: Color = Color.Unspecified,
    appNameColor: Color = Color.Unspecified,
    timeColor: Color = Color.Unspecified,
    titleColor: Color = Color.Unspecified,
    subtitleColor: Color = Color.Unspecified
): CardColors

Creates a CardColors that represents the default container and content colors used in a Card, AppCard or TitleCard.

Parameters
`containerColor: Color = Color.Unspecified`	the container color of this `Card`.
`contentColor: Color = Color.Unspecified`	the content color of this `Card`.
`appNameColor: Color = Color.Unspecified`	the color used for appName, only applies to `AppCard`.
`timeColor: Color = Color.Unspecified`	the color used for time, applies to `AppCard` and `TitleCard`.
`titleColor: Color = Color.Unspecified`	the color used for title, applies to `AppCard` and `TitleCard`.
`subtitleColor: Color = Color.Unspecified`	the color used for subtitle, applies to `TitleCard`.

cardWithContainerPainterColors

Added in 1.5.0

@Composable
fun cardWithContainerPainterColors(): CardColors

Creates a CardColors that represents the default container and content colors used in a Card with image container painter.

cardWithContainerPainterColors

Added in 1.6.0

@Composable
fun cardWithContainerPainterColors(
    contentColor: Color = Color.Unspecified,
    appNameColor: Color = Color.Unspecified,
    timeColor: Color = Color.Unspecified,
    titleColor: Color = Color.Unspecified,
    subtitleColor: Color = Color.Unspecified
): CardColors

Creates a CardColors that represents the default container and content colors used in a TitleCard with Image set as a background.

Parameters
`contentColor: Color = Color.Unspecified`	the content color of this `Card`.
`appNameColor: Color = Color.Unspecified`	the color used for appName, only applies to `AppCard`.
`timeColor: Color = Color.Unspecified`	the color used for time.
`titleColor: Color = Color.Unspecified`	the color used for title.
`subtitleColor: Color = Color.Unspecified`	the color used for subtitle.

containerPainter

Added in 1.5.0

@Composable
fun containerPainter(
    image: Painter,
    scrim: Brush = scrimBrush(),
    sizeToIntrinsics: Boolean = false,
    alignment: Alignment = Alignment.Center,
    contentScale: ContentScale = ContentScale.Fit,
    alpha: Float = DefaultAlpha
): Painter

Creates a Painter for the background of an Card that displays an image with a scrim on top to make sure that any content above the background will be legible.

An Image background is a means to reinforce the meaning of information in a Card, e.g. to help to contextualize the information. Cards should have a content color that contrasts with the background image and scrim.

Parameters
`image: Painter`	The `Painter` to use to draw the container background of the `Card`
`scrim: Brush = scrimBrush()`	The `Brush` to use to paint a scrim over the container image to ensure that any text drawn over the image is legible
`sizeToIntrinsics: Boolean = false`	When false (the default), fills the available space within the container. Pass true to retain the size of the image.
`alignment: Alignment = Alignment.Center`	Specifies alignment of the container image painter relative to the container.
`contentScale: ContentScale = ContentScale.Fit`	Strategy for scaling the painter if its size does not match the container.
`alpha: Float = DefaultAlpha`	Opacity of the container image painter and scrim.

outlinedCardBorder

Added in 1.6.0

@Composable
fun outlinedCardBorder(
    outlineColor: Color = OutlinedCardTokens.ContainerBorderColor.value,
    borderWidth: Dp = OutlinedCardTokens.BorderWidth
): BorderStroke

Creates a BorderStroke that represents the default border used in Outlined Cards.

Parameters
`outlineColor: Color = OutlinedCardTokens.ContainerBorderColor.value`	The color to be used for drawing an outline.
`borderWidth: Dp = OutlinedCardTokens.BorderWidth`	width of the border in `Dp`.

outlinedCardColors

Added in 1.5.0

@Composable
fun outlinedCardColors(): CardColors

Creates a CardColors that represents the default container and content colors used in an OutlinedCard, outlined AppCard or TitleCard.

outlinedCardColors

Added in 1.6.0

@Composable
fun outlinedCardColors(
    contentColor: Color = Color.Unspecified,
    appNameColor: Color = Color.Unspecified,
    timeColor: Color = Color.Unspecified,
    titleColor: Color = Color.Unspecified,
    subtitleColor: Color = Color.Unspecified
): CardColors

Creates a CardColors that represents the default container and content colors used in an OutlinedCard, outlined AppCard or TitleCard.

Parameters
`contentColor: Color = Color.Unspecified`	the content color of this `OutlinedCard`.
`appNameColor: Color = Color.Unspecified`	the color used for appName, only applies to `AppCard`.
`timeColor: Color = Color.Unspecified`	the color used for time, applies to `AppCard` and `TitleCard`.
`titleColor: Color = Color.Unspecified`	the color used for title, applies to `AppCard` and `TitleCard`.
`subtitleColor: Color = Color.Unspecified`	the color used for subtitle, applies to `TitleCard`.

scrimBrush

Added in 1.5.0

@Composable
fun scrimBrush(): Brush

Creates a Brush for the recommended scrim drawn on top of image container backgrounds.

Public properties

AppImageSize

val AppImageSize: Dp

The default size of the app icon/image when used inside a AppCard.

CardWithContainerPainterContentPadding

Added in 1.5.0

val CardWithContainerPainterContentPadding: PaddingValues

ContentPadding for use cards that have an image background in order to show more of the image

ContentPadding

Added in 1.5.0

val ContentPadding: PaddingValues

The default content padding used by Card

Height

val Height: Dp

The default height of Card, AppCard and TitleCard. The card will increase its height to accommodate the contents, if necessary.

ImageBottomPadding

val ImageBottomPadding: Dp

Additional bottom padding added for TitleCard with an image background

minimumVerticalListContentPadding

val minimumVerticalListContentPadding: Dp

The minimum vertical content padding for the list when a Card is placed at the top or bottom edge. Recommended for use with androidx.wear.compose.foundation.lazy.TransformingLazyColumnItemScope's androidx.wear.compose.foundation.lazy.TransformingLazyColumnItemScope.minimumVerticalContentPadding, which allows items to choose a preferred content padding for the list. TransformingLazyColumn takes its contentPadding as the maximum of the preferred content padding values and its own contentPadding parameter.

import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.wear.compose.foundation.lazy.TransformingLazyColumn
import androidx.wear.compose.foundation.lazy.itemsIndexed
import androidx.wear.compose.foundation.lazy.rememberTransformingLazyColumnState
import androidx.wear.compose.material3.AppScaffold
import androidx.wear.compose.material3.Button
import androidx.wear.compose.material3.ButtonDefaults
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.CompactButton
import androidx.wear.compose.material3.CompactButtonDefaults
import androidx.wear.compose.material3.EdgeButton
import androidx.wear.compose.material3.ListHeader
import androidx.wear.compose.material3.ListHeaderDefaults
import androidx.wear.compose.material3.ScreenScaffold
import androidx.wear.compose.material3.SurfaceTransformation
import androidx.wear.compose.material3.Text
import androidx.wear.compose.material3.lazy.rememberTransformationSpec
import androidx.wear.compose.material3.lazy.transformedHeight

val transformationSpec = rememberTransformationSpec()
val state = rememberTransformingLazyColumnState()
var elements by remember { mutableStateOf(listOf(0, 1, 2, 3, 4, 5, 6, 7, 8, 9)) }
var nextElement by remember { mutableIntStateOf(10) }

fun addElementAfter(index: Int) {
    elements =
        elements.subList(0, index + 1) +
            listOf(nextElement++) +
            elements.subList(index + 1, elements.count())
}

fun removeElementAt(index: Int) {
    elements = elements.subList(0, index) + elements.subList(index + 1, elements.count())
}

AppScaffold {
    ScreenScaffold(
        state,
        edgeButton = {
            EdgeButton(onClick = { elements = elements.shuffled() }) { Text("Shuffle") }
        },
    ) { contentPadding ->
        TransformingLazyColumn(state = state, contentPadding = contentPadding) {
            itemsIndexed(elements, key = { _, key -> key }) { index, key ->
                if (key % 3 == 0) {
                    CompactButton(
                        onClick = { removeElementAt(index) },
                        modifier =
                            Modifier.minimumVerticalContentPadding(
                                    CompactButtonDefaults.minimumVerticalListContentPadding
                                )
                                .transformedHeight(this, transformationSpec)
                                .animateItem(),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("CompactButton $key")
                    }
                } else if (key % 4 == 0) {
                    ListHeader(
                        modifier =
                            Modifier.minimumVerticalContentPadding(
                                    ListHeaderDefaults.minimumTopListContentPadding,
                                    ListHeaderDefaults.minimumBottomListContentPadding,
                                )
                                .transformedHeight(this, transformationSpec),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("ListHeader heading")
                    }
                } else {
                    Card(
                        onClick = {},
                        modifier =
                            Modifier.fillMaxWidth()
                                .minimumVerticalContentPadding(
                                    CardDefaults.minimumVerticalListContentPadding
                                )
                                .transformedHeight(this, transformationSpec)
                                .animateItem(),
                        transformation = SurfaceTransformation(transformationSpec),
                    ) {
                        Text("Card $key")
                        Row {
                            Spacer(modifier = Modifier.weight(1f))
                            CompactButton(
                                onClick = { removeElementAt(index) },
                                enabled = elements.count() > 1,
                            ) {
                                Text("-")
                            }
                            CompactButton(onClick = { addElementAfter(index) }) { Text("+") }
                        }
                    }
                }
            }
        }
    }
}

scrimColor

val scrimColor: Color

Returns a scrim color that can be used to draw a scrim on top of an image to ensure that any text drawn over the image is legible.

shape

Added in 1.5.0

val shape: Shape

The default shape of Card, which determines its corner radius.