New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Tv Material Compose

Card

Android

Cards contain content and actions that relate information about a subject.

This Card handles click events, calling its [onClick] lambda.

Last updated:

Installation

dependencies {
   implementation("androidx.tv:tv-material:1.0.0-beta01")
}

Overloads

@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    shape: CardShape = CardDefaults.shape(),
    colors: CardColors = CardDefaults.colors(),
    scale: CardScale = CardDefaults.scale(),
    border: CardBorder = CardDefaults.border(),
    glow: CardGlow = CardDefaults.glow(),
    interactionSource: MutableInteractionSource? = null,
    content: @Composable ColumnScope.() -> Unit
)

Parameters

namedescription
onClickcalled when this card is clicked.
modifierthe [Modifier] to be applied to this card.
onLongClickcalled when this card is long clicked (long-pressed).
shape[CardShape] defines the shape of this card's container in different interaction states. See [CardDefaults.shape].
colors[CardColors] defines the background & content colors used in this card for different interaction states. See [CardDefaults.colors].
scale[CardScale] defines size of the card relative to its original size for different interaction states. See [CardDefaults.scale].
border[CardBorder] defines a border around the card for different interaction states. See [CardDefaults.border].
glow[CardGlow] defines a shadow to be shown behind the card for different interaction states. See [CardDefaults.glow].
interactionSourcean optional hoisted [MutableInteractionSource] for observing and emitting [Interaction]s for this card. You can use this to change the card's appearance or preview the card in different states. Note that if null is provided, interactions will still happen internally.
contentdefines the [Composable] content inside the Card.

Code Examples

HorizontalImageAspectRatioCardSample

@Composable
@Sampled
fun HorizontalImageAspectRatioCardSample() {
    Card(
        onClick = { },
        modifier = Modifier
            .width(200.dp)
            .aspectRatio(CardDefaults.HorizontalImageAspectRatio),
        border = CardDefaults.border(
            focusedBorder = Border(
                border = BorderStroke(width = 3.dp, color = Color.Green),
                shape = RoundedCornerShape(5),
            ),
        ),
        colors = CardDefaults.colors(
            containerColor = Color.Red,
            focusedContainerColor = Color.Yellow
        ),
        scale = CardDefaults.scale(
            focusedScale = 1.05f,
        )
    ) {
    }
}

VerticalImageAspectRatioCardSample

@Composable
@Sampled
fun VerticalImageAspectRatioCardSample() {
    Card(
        onClick = { },
        modifier = Modifier
            .width(200.dp)
            .aspectRatio(CardDefaults.VerticalImageAspectRatio),
        border = CardDefaults.border(
            focusedBorder = Border(
                border = BorderStroke(width = 3.dp, color = Color.Green),
                shape = RoundedCornerShape(5),
            ),
        ),
        colors = CardDefaults.colors(
            containerColor = Color.Red,
            focusedContainerColor = Color.Yellow
        ),
        scale = CardDefaults.scale(
            focusedScale = 1.05f,
        )
    ) {
    }
}

SquareImageAspectRatioCardSample

@Composable
@Sampled
fun SquareImageAspectRatioCardSample() {
    Card(
        onClick = { },
        modifier = Modifier
            .width(150.dp)
            .aspectRatio(CardDefaults.SquareImageAspectRatio),
        border = CardDefaults.border(
            focusedBorder = Border(
                border = BorderStroke(width = 3.dp, color = Color.Green)
            ),
        ),
        shape = CardDefaults.shape(
            shape = CircleShape,
        ),
        colors = CardDefaults.colors(
            containerColor = Color.Red,
            focusedContainerColor = Color.Yellow
        ),
        scale = CardDefaults.scale(
            focusedScale = 1.05f,
        )
    ) {
    }
}