ImageCard

Functions summary

Unit

@Composable ImageCard(     image: @Composable () -> Unit,     modifier: Modifier,     title: (@Composable () -> Unit)?,     subtitle: (@Composable () -> Unit)?,     leadingIcon: (@Composable () -> Unit)?,     trailingIcon: (@Composable () -> Unit)?,     shape: Shape,     color: Color,     contentColor: Color,     contentPadding: PaddingValues,     interactionSource: MutableInteractionSource?,     content: @Composable () -> Unit ) ImageCard is a version of a card that contains a primary image that is placed at the top of the card.

Unit

@Composable ImageCard(     onClick: () -> Unit,     image: @Composable () -> Unit,     modifier: Modifier,     title: (@Composable () -> Unit)?,     subtitle: (@Composable () -> Unit)?,     leadingIcon: (@Composable () -> Unit)?,     trailingIcon: (@Composable () -> Unit)?,     shape: Shape,     color: Color,     contentColor: Color,     contentPadding: PaddingValues,     interactionSource: MutableInteractionSource?,     content: @Composable () -> Unit ) ImageCard is a version of a card that contains a primary image that is placed at the top of the card.

Functions

ImageCard

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha20

@Composable
fun ImageCard(
    image: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    title: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = ImageCardDefaults.shape,
    color: Color = ImageCardDefaults.color,
    contentColor: Color = ImageCardDefaults.contentColor(color),
    contentPadding: PaddingValues = ImageCardDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

ImageCard is a version of a card that contains a primary image that is placed at the top of the card.

ImageCard is a component used to group related information into a single digestible unit. An image card can adapt to display a wide range of content, from simple text blurbs to more complex summaries with multiple elements. An image card contains an image and 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, below image. An image card fills the maximum width available by default.

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

For more documentation and samples of the other cards, see Card.

A simple ImageCard with just text:

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

ImageCard(
    image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) }
) {
    Text("This is an image card")
}

An ImageCard with a title, subtitle, and a leading icon:

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

ImageCard(
    image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) },
    title = { Text("Title") },
    subtitle = { Text("Subtitle") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("This is an image card with a title, subtitle, and leading icon")
}

Parameters
image: @Composable () -> Unit	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. Images 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.
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 image
subtitle: (@Composable () -> Unit)? = null	optional subtitle to be placed above content, below title
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 = ImageCardDefaults.shape	the Shape used to clip this card, and also used to draw the background and border
color: Color = ImageCardDefaults.color	background color of this card
contentColor: Color = ImageCardDefaults.contentColor(color)	content color used by components inside content, title, subtitle, leadingIcon, and trailingIcon.
contentPadding: PaddingValues = ImageCardDefaults.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.

ImageCard

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha20

@Composable
fun ImageCard(
    onClick: () -> Unit,
    image: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    title: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    leadingIcon: (@Composable () -> Unit)? = null,
    trailingIcon: (@Composable () -> Unit)? = null,
    shape: Shape = ImageCardDefaults.shape,
    color: Color = ImageCardDefaults.color,
    contentColor: Color = ImageCardDefaults.contentColor(color),
    contentPadding: PaddingValues = ImageCardDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

ImageCard is a version of a card that contains a primary image that is placed at the top of the card.

ImageCard is a component used to group related information into a single digestible unit. An image card can adapt to display a wide range of content, from simple text blurbs to more complex summaries with multiple elements. An image card contains an image and 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, below image. An image card fills the maximum width available by default.

This ImageCard is focusable and clickable - see the other ImageCard overload for an ImageCard that is only focusable.

For more documentation and samples of the other cards, see Card.

A simple clickable ImageCard with just text:

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

ImageCard(
    onClick = {},
    image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) },
) {
    Text("This is an image card")
}

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

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

ImageCard(
    onClick = {},
    image = { Image(MyImage, "Localized description", contentScale = ContentScale.FillWidth) },
    title = { Text("Title") },
    subtitle = { Text("Subtitle") },
    leadingIcon = { Icon(FavoriteIcon, "Localized description") },
) {
    Text("This is an image card with a title, subtitle, and leading icon")
}

Parameters
onClick: () -> Unit	called when this card item is clicked
image: @Composable () -> Unit	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. Images 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.
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 image
subtitle: (@Composable () -> Unit)? = null	optional subtitle to be placed above content, below title
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 = ImageCardDefaults.shape	the Shape used to clip this card, and also used to draw the background and border
color: Color = ImageCardDefaults.color	background color of this card
contentColor: Color = ImageCardDefaults.contentColor(color)	content color used by components inside content, title, subtitle, leadingIcon, and trailingIcon.
contentPadding: PaddingValues = ImageCardDefaults.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.