Card

Functions summary

Unit

@Composable
Card(
    modifier: Modifier,
    title: (@Composable () -> Unit)?,
    subtitle: (@Composable () -> Unit)?,
    header: (@Composable () -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    shape: Shape,
    color: Color,
    contentColor: Color,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

Card is a component used to group related information into a single digestible unit.

Unit

@Composable
Card(
    onClick: () -> Unit,
    modifier: Modifier,
    title: (@Composable () -> Unit)?,
    subtitle: (@Composable () -> Unit)?,
    header: (@Composable () -> Unit)?,
    leadingIcon: (@Composable () -> Unit)?,
    trailingIcon: (@Composable () -> Unit)?,
    shape: Shape,
    color: Color,
    contentColor: Color,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

Card is a component used to group related information into a single digestible unit.

Functions

Card

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha19

@Composable
fun Card(
    modifier: Modifier = Modifier,
    title: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    header: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = CardDefaults.shape,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    contentPadding: PaddingValues = CardDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

Card is a component used to group related information into a single digestible unit. A card can adapt to display a wide range of content, from simple text blurbs to more complex summaries with multiple elements. A card contains text content, and may also have any combination of title, subtitle, leadingIcon, and trailingIcon. If specified, title is placed on top of the subtitle, which is placed on top of the content. A card fills the maximum width available by default.

This Card is focusable - see the other Card overload for a clickable Card.

Cards can also be combined with a TitleChip. See the documentation for TitleChip for more information / sample code.

A simple Card with just text:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card { Text("This is a card") }

A Card with a trailing icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
    Text("This is a card with a trailing icon")
}

A Card with a title, subtitle, and a leading icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(
    title = { Text("Title") },
    subtitle = { Text("Subtitle") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("This is a card with a title, subtitle, and leading icon")
}

A card with a title and a header image:

import androidx.compose.foundation.Image
import androidx.compose.ui.layout.ContentScale
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card(
    title = { Text("Title") },
    header = {
        Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
    },
) {
    Text("This is a card with a title and header image")
}

Parameters
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this card
`title: (@Composable () -> Unit)? = null`	optional title to be placed above `subtitle` and `content`, below `header`
`subtitle: (@Composable () -> Unit)? = null`	optional subtitle to be placed above `content`, below `title`
`header: (@Composable () -> Unit)? = null`	optional header image to be placed at the top of the card. This image should typically fill the max width available, for example using `androidx.compose.ui.layout.ContentScale.FillWidth`. Headers are constrained to a maximum aspect ratio (1.6) to avoid taking up too much vertical space, so using a modifier such as `androidx.compose.foundation.layout.fillMaxSize` will result in an image that fills the maximum aspect ratio.
`leadingIcon: (@Composable () -> Unit)? = null`	optional leading icon to be placed before `content`. This is typically an `Icon` tinted with `contentColor` by default.
`trailingIcon: (@Composable () -> Unit)? = null`	optional trailing icon to be placed after `content`. This is typically an `Icon` tinted with `contentColor` by default.
`shape: Shape = CardDefaults.shape`	the `Shape` used to clip this card, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	background color of this card
`contentColor: Color = calculateContentColor(color)`	content color used by components inside `content`, `title`, `subtitle`, `leadingIcon`, and `trailingIcon`.
`contentPadding: PaddingValues = CardDefaults.contentPadding`	the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / icons inside a card, this only affects the outermost content padding.
`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 () -> Unit`	the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.

Card

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha19

@Composable
fun Card(
    onClick: () -> Unit,
    modifier: Modifier = Modifier,
    title: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    header: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = CardDefaults.shape,
    color: Color = GlimmerTheme.colors.surface,
    contentColor: Color = calculateContentColor(color),
    contentPadding: PaddingValues = CardDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

This Card is focusable and clickable - see the other Card overload for a Card that is only focusable.

Cards can also be combined with a TitleChip. See the documentation for TitleChip for more information / sample code.

A simple clickable Card with just text:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card(onClick = {}) { Text("This is a card") }

A clickable Card with a trailing icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(onClick = {}, trailingIcon = { Icon(FavoriteIcon, "Localized description") }) {
    Text("This is a card with a trailing icon")
}

A clickable Card with a title, subtitle, and a leading icon:

import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Icon
import androidx.xr.glimmer.Text

Card(
    onClick = {},
    title = { Text("Title") },
    subtitle = { Text("Subtitle") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("This is a card with a title, subtitle, and leading icon")
}

A clickable Card with a title and a header image:

import androidx.compose.foundation.Image
import androidx.compose.ui.layout.ContentScale
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.Text

Card(
    onClick = {},
    title = { Text("Title") },
    header = {
        Image(MyHeaderImage, "Localized description", contentScale = ContentScale.FillWidth)
    },
) {
    Text("This is a card with a title and header image")
}

Parameters
`onClick: () -> Unit`	called when this card item is clicked
`modifier: Modifier = Modifier`	the `Modifier` to be applied to this card
`title: (@Composable () -> Unit)? = null`	optional title to be placed above `subtitle` and `content`, below `header`
`subtitle: (@Composable () -> Unit)? = null`	optional subtitle to be placed above `content`, below `title`
`header: (@Composable () -> Unit)? = null`	optional header image to be placed at the top of the card. This image should typically fill the max width available, for example using `androidx.compose.ui.layout.ContentScale.FillWidth`. Headers are constrained to a maximum aspect ratio (1.6) to avoid taking up too much vertical space, so using a modifier such as `androidx.compose.foundation.layout.fillMaxSize` will result in an image that fills the maximum aspect ratio.
`leadingIcon: (@Composable () -> Unit)? = null`	optional leading icon to be placed before `content`. This is typically an `Icon` tinted with `contentColor` by default.
`trailingIcon: (@Composable () -> Unit)? = null`	optional trailing icon to be placed after `content`. This is typically an `Icon` tinted with `contentColor` by default.
`shape: Shape = CardDefaults.shape`	the `Shape` used to clip this card, and also used to draw the background and border
`color: Color = GlimmerTheme.colors.surface`	background color of this card
`contentColor: Color = calculateContentColor(color)`	content color used by components inside `content`, `title`, `subtitle`, `leadingIcon`, and `trailingIcon`.
`contentPadding: PaddingValues = CardDefaults.contentPadding`	the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / icons inside a card, this only affects the outermost content padding.
`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 () -> Unit`	the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.