Card

Functions summary

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

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

Functions

Card

@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
): Unit

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

This Card handles click events, calling its onClick lambda.

Checkout TV Guidelines for Aspect ratios for cards

import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults

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),
) {}
 
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults

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),
) {}
 
import androidx.compose.foundation.BorderStroke
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Border
import androidx.tv.material3.Card
import androidx.tv.material3.CardDefaults

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),
) {}
Parameters
onClick: () -> Unit

called when this card is clicked.
modifier: Modifier = Modifier

the Modifier to be applied to this card.
onLongClick: (() -> Unit)? = null

called when this card is long clicked (long-pressed).
shape: CardShape = CardDefaults.shape()

CardShape defines the shape of this card's container in different interaction states. See CardDefaults.shape.
colors: CardColors = CardDefaults.colors()

CardColors defines the background & content colors used in this card for different interaction states. See CardDefaults.colors.
scale: CardScale = CardDefaults.scale()

CardScale defines size of the card relative to its original size for different interaction states. See CardDefaults.scale.
border: CardBorder = CardDefaults.border()

CardBorder defines a border around the card for different interaction states. See CardDefaults.border.
glow: CardGlow = CardDefaults.glow()

CardGlow defines a shadow to be shown behind the card for different interaction states. See CardDefaults.glow.
interactionSource: MutableInteractionSource? = null

an optional hoisted MutableInteractionSource for observing and emitting Interactions 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.
content: @Composable ColumnScope.() -> Unit

defines the Composable content inside the Card.