LeadingImageCard

Functions summary

Unit
@Composable
LeadingImageCard(
    image: @Composable () -> Unit,
    modifier: Modifier,
    focusable: Boolean,
    title: (@Composable () -> Unit)?,
    subtitle: (@Composable () -> Unit)?,
    shape: Shape,
    color: Color,
    contentColor: Color,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

LeadingImageCard is a component used to group related information into a single digestible unit, featuring a leading image.
Unit
@Composable
LeadingImageCard(
    onClick: () -> Unit,
    image: @Composable () -> Unit,
    modifier: Modifier,
    title: (@Composable () -> Unit)?,
    subtitle: (@Composable () -> Unit)?,
    shape: Shape,
    color: Color,
    contentColor: Color,
    contentPadding: PaddingValues,
    interactionSource: MutableInteractionSource?,
    content: @Composable () -> Unit
)

LeadingImageCard is a component used to group related information into a single digestible unit, featuring a leading image.

Functions

LeadingImageCard

@Composable
fun LeadingImageCard(
    image: @Composable () -> Unit,
    modifier: Modifier = Modifier,
    focusable: Boolean = true,
    title: (@Composable () -> Unit)? = null,
    subtitle: (@Composable () -> Unit)? = null,
    shape: Shape = LeadingImageCardDefaults.shape,
    color: Color = LeadingImageCardDefaults.color,
    contentColor: Color = LeadingImageCardDefaults.contentColor(color),
    contentPadding: PaddingValues = LeadingImageCardDefaults.contentPadding,
    interactionSource: MutableInteractionSource? = null,
    content: @Composable () -> Unit
): Unit

LeadingImageCard is a component used to group related information into a single digestible unit, featuring a leading image. A leading image card contains text content, and may also have any combination of title and subtitle. If specified, title is placed on top of the subtitle, which is placed on top of the content. A leading image card fills the maximum width available by default.

This LeadingImageCard is focusable by default - see the other LeadingImageCard overload for a clickable LeadingImageCard.

A LeadingImageCard with a title and subtitle:

import androidx.compose.foundation.Image
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.ImageCard
import androidx.xr.glimmer.LeadingImageCard
import androidx.xr.glimmer.Text

LeadingImageCard(
    image = { Image(MyImage, "Localized description") },
    title = { Text("Title") },
    subtitle = { Text("Subtitle") },
) {
    Text("This is a card with a leading image.")
}

An example of usage when focusable is false, with focus handled by a ButtonGroup instead:

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.ui.Modifier
import androidx.xr.glimmer.Button
import androidx.xr.glimmer.ButtonGroup
import androidx.xr.glimmer.Card
import androidx.xr.glimmer.GlimmerTheme
import androidx.xr.glimmer.Text

Column(verticalArrangement = Arrangement.spacedBy(GlimmerTheme.componentSpacingValues.large)) {
    Card(focusable = false) { Text("This is a non-focusable card with a button group") }
    ButtonGroup(modifier = Modifier.fillMaxWidth()) {
        Button(onClick = {}) { Text("Button 1") }
        Button(onClick = {}) { Text("Button 2") }
        Button(onClick = {}) { Text("Button 3") }
    }
}
Parameters
image: @Composable () -> Unit

the image to be placed before the text content. This image is allocated 30% of the card width.
modifier: Modifier = Modifier

the Modifier to be applied to this card
focusable: Boolean = true

whether this card is focusable. When false, this card will not receive focus or participate in focus navigation
title: (@Composable () -> Unit)? = null

optional title to be placed above subtitle and content
subtitle: (@Composable () -> Unit)? = null

optional subtitle to be placed above content, below title
shape: Shape = LeadingImageCardDefaults.shape

the Shape used to clip this card, and also used to draw the background and border
color: Color = LeadingImageCardDefaults.color

background color of this card
contentColor: Color = LeadingImageCardDefaults.contentColor(color)

content color used by components inside content, title, and subtitle
contentPadding: PaddingValues = LeadingImageCardDefaults.contentPadding

the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / image 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.

LeadingImageCard

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

LeadingImageCard is a component used to group related information into a single digestible unit, featuring a leading image. A leading image card contains text content, and may also have any combination of title and subtitle. If specified, title is placed on top of the subtitle, which is placed on top of the content. A leading image card fills the maximum width available by default.

This LeadingImageCard is focusable and clickable - see the other LeadingImageCard overload for a non-clickable variant with optional focus.

Parameters
onClick: () -> Unit

called when this card item is clicked
image: @Composable () -> Unit

the image to be placed before the text content. This image is allocated 30% of the card width.
modifier: Modifier = Modifier

the Modifier to be applied to this card
title: (@Composable () -> Unit)? = null

optional title to be placed above subtitle and content
subtitle: (@Composable () -> Unit)? = null

optional subtitle to be placed above content, below title
shape: Shape = LeadingImageCardDefaults.shape

the Shape used to clip this card, and also used to draw the background and border
color: Color = LeadingImageCardDefaults.color

background color of this card
contentColor: Color = LeadingImageCardDefaults.contentColor(color)

content color used by components inside content, title, and subtitle
contentPadding: PaddingValues = LeadingImageCardDefaults.contentPadding

the spacing values to apply internally between the container and the content. Note that there is additional padding applied around the content / text / image 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.