StandardCardContainer

Functions summary

Unit
@Composable
StandardCardContainer(
    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier,
    subtitle: @Composable () -> Unit,
    description: @Composable () -> Unit,
    contentColor: CardContainerColors,
    interactionSource: MutableInteractionSource
)

StandardCardContainer is an opinionated TV Material Card layout with an image and text content to show information about a subject.

Functions

StandardCardContainer

@Composable
fun StandardCardContainer(
    imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit,
    title: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    subtitle: @Composable () -> Unit = {},
    description: @Composable () -> Unit = {},
    contentColor: CardContainerColors = CardContainerDefaults.contentColor(),
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() }
): Unit

StandardCardContainer is an opinionated TV Material Card layout with an image and text content to show information about a subject.

It provides a vertical layout with an image card slot at the top. And below that, there are slots for the title, subtitle and description.

Standard Card

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

import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.size
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.tv.material3.Card
import androidx.tv.material3.StandardCardContainer
import androidx.tv.material3.Text

StandardCardContainer(
    modifier = Modifier.size(150.dp, 120.dp),
    imageCard = { interactionSource ->
        Card(onClick = {}, interactionSource = interactionSource) {
            Box(modifier = Modifier.fillMaxWidth().height(80.dp).background(Color.Blue))
        }
    },
    title = { Text("Standard Card") },
)
Parameters
imageCard: @Composable (interactionSource: MutableInteractionSource) -> Unit

defines the Composable to be used for the image card.
title: @Composable () -> Unit

defines the Composable title placed below the image card in the CardContainer.
modifier: Modifier = Modifier

the Modifier to be applied to this CardContainer.
subtitle: @Composable () -> Unit = {}

defines the Composable supporting text placed below the title in CardContainer.
description: @Composable () -> Unit = {}

defines the Composable description placed below the subtitle in CardContainer.
contentColor: CardContainerColors = CardContainerDefaults.contentColor()

CardContainerColors defines the content color used in the CardContainer for different interaction states. See CardContainerDefaults.contentColor.
interactionSource: MutableInteractionSource

a hoisted MutableInteractionSource for observing and emitting Interactions for this CardContainer. This interaction source param would also be forwarded to be used with the imageCard composable.