New Compose Multiplatform components arrived on Composables UICheck it out →

← Component in Tv Material Compose

CompactCard

Android

[CompactCard] is an opinionated TV Material card that offers a 4 slot layout to show information about a subject.

This card provides the interactive surface [Surface] with the image slot as the background (with an overlay scrim gradient). Other slots for the title, subtitle, and description are placed over it.

Compact Card

Checkout TV design guidelines to learn more about Material Compact Card.

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 CompactCard(
    onClick: () -> Unit,
    image: @Composable BoxScope.() -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    shape: CardShape = CardDefaults.shape(),
    colors: CardColors = CardDefaults.compactCardColors(),
    scale: CardScale = CardDefaults.scale(),
    border: CardBorder = CardDefaults.border(),
    glow: CardGlow = CardDefaults.glow(),
    scrimBrush: Brush = CardDefaults.ScrimBrush,
    interactionSource: MutableInteractionSource? = null
)

Parameters

namedescription
onClickcalled when this card is clicked.
imagedefines the [Composable] image to be displayed on top of the Card.
titledefines the [Composable] title placed below the image in the Card.
modifierthe [Modifier] to be applied to this card.
onLongClickcalled when this card is long clicked (long-pressed).
subtitledefines the [Composable] supporting text placed below the title of the Card.
descriptiondefines the [Composable] description placed below the subtitle of the Card.
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.compactCardColors].
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].
scrimBrush[Brush] defines a brush/gradient to be used to draw the scrim over the image in the background. See [CardDefaults.ScrimBrush].
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.

Code Example

CompactCardSample

@Composable
@Sampled
fun CompactCardSample() {
    CompactCard(
        modifier = Modifier.size(150.dp, 120.dp),
        image = {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .height(80.dp)
                    .background(Color.Blue)
            )
        },
        title = {
            Text(
                text = "Compact Card",
                modifier = Modifier.padding(8.dp)
            )
        },
        onClick = { }
    )
}