WideCardContainer

Functions summary

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

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

Functions

WideCardContainer

@Composable
fun WideCardContainer(
    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

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

It provides a horizontal layout with an image card slot at the start, followed by the title, subtitle and description at the end.

Wide Card Container

Checkout TV design guidelines to learn more about Material Wide 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.padding
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.Text
import androidx.tv.material3.WideCardContainer

WideCardContainer(
    modifier = Modifier.size(180.dp, 100.dp),
    imageCard = { interactionSource ->
        Card(onClick = {}, interactionSource = interactionSource) {
            Box(modifier = Modifier.fillMaxWidth().height(90.dp).background(Color.Blue))
        }
    },
    title = { Text("Wide Card", Modifier.padding(start = 8.dp)) },
)
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.