CardKt

Added in 1.0.0-alpha01

---

Kotlin |Java

public final class CardKt

---

Summary

Public methods
static final void	@Composable Card(     @Composable @NonNull Function0<Unit> action,     @NonNull Modifier modifier,     @Composable Function0<Unit> title,     @Composable Function0<Unit> subtitle,     @Composable Function0<Unit> header,     @Composable Function0<Unit> leadingIcon,     @Composable Function0<Unit> trailingIcon,     @NonNull Shape shape,     @NonNull Color color,     @NonNull Color contentColor,     BorderStroke border,     @NonNull PaddingValues contentPadding,     @Composable @NonNull Function0<Unit> content ) Card is a component used to group related information into a single digestible unit.
static final void	@Composable Card(     @NonNull Modifier modifier,     @Composable Function0<Unit> title,     @Composable Function0<Unit> subtitle,     @Composable Function0<Unit> header,     @Composable Function0<Unit> leadingIcon,     @Composable Function0<Unit> trailingIcon,     @NonNull Shape shape,     @NonNull Color color,     @NonNull Color contentColor,     BorderStroke border,     @NonNull PaddingValues contentPadding,     MutableInteractionSource interactionSource,     @Composable @NonNull Function0<Unit> content ) Card is a component used to group related information into a single digestible unit.
static final void	@Composable Card(     @NonNull Function0<Unit> onClick,     @NonNull Modifier modifier,     @Composable Function0<Unit> title,     @Composable Function0<Unit> subtitle,     @Composable Function0<Unit> header,     @Composable Function0<Unit> leadingIcon,     @Composable Function0<Unit> trailingIcon,     @NonNull Shape shape,     @NonNull Color color,     @NonNull Color contentColor,     BorderStroke border,     @NonNull PaddingValues contentPadding,     MutableInteractionSource interactionSource,     @Composable @NonNull Function0<Unit> content ) Card is a component used to group related information into a single digestible unit.

Public methods

Card

Artifact: androidx.xr.glimmer:glimmer

View Source

Added in 1.0.0-alpha01

@Composable
public static final void Card(
    @Composable @NonNull Function0<Unit> action,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> title,
    @Composable Function0<Unit> subtitle,
    @Composable Function0<Unit> header,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull Color color,
    @NonNull Color contentColor,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    @Composable @NonNull Function0<Unit> content
)

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 contains an action that is placed on the center of the bottom edge of the card. The action should be a Button, and represents the action that will be performed when this card is interacted with. The main card itself is not focusable - the action takes the focus instead.

For more documentation and samples of the other card parameters, see the other card overload without an action.

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

Card(action = { Button(onClick = {}) { Text("Send") } }, title = { Text("Title") }) {
    Text("This is a card with a title and action")
}

Parameters
@Composable @NonNull Function0<Unit> action	the action for this card. This should be a Button, and represents the action performed when a user interacts with this card. The action is placed overlapping the bottom edge of the card.
@NonNull Modifier modifier	the Modifier to be applied to the outer layout containing the card and action
@Composable Function0<Unit> title	optional title to be placed above subtitle and content, below header
@Composable Function0<Unit> subtitle	optional subtitle to be placed above content, below title
@Composable Function0<Unit> header	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.
@Composable Function0<Unit> leadingIcon	optional leading icon to be placed before content. This is typically an Icon. Colors.primary is provided as the content color by default.
@Composable Function0<Unit> trailingIcon	optional trailing icon to be placed after content. This is typically an Icon. Colors.primary is provided as the content color by default.
@NonNull Shape shape	the Shape used to clip this card, and also used to draw the background and border
@NonNull Color color	background color of this card
@NonNull Color contentColor	content color used by components inside content, title and subtitle.
BorderStroke border	the border to draw around this card
@NonNull PaddingValues 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.
@Composable @NonNull Function0<Unit> content	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-alpha01

@Composable
public static final void Card(
    @NonNull Modifier modifier,
    @Composable Function0<Unit> title,
    @Composable Function0<Unit> subtitle,
    @Composable Function0<Unit> header,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull Color color,
    @NonNull Color contentColor,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

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
@NonNull Modifier modifier	the Modifier to be applied to this card
@Composable Function0<Unit> title	optional title to be placed above subtitle and content, below header
@Composable Function0<Unit> subtitle	optional subtitle to be placed above content, below title
@Composable Function0<Unit> header	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.
@Composable Function0<Unit> leadingIcon	optional leading icon to be placed before content. This is typically an Icon. Colors.primary is provided as the content color by default.
@Composable Function0<Unit> trailingIcon	optional trailing icon to be placed after content. This is typically an Icon. Colors.primary is provided as the content color by default.
@NonNull Shape shape	the Shape used to clip this card, and also used to draw the background and border
@NonNull Color color	background color of this card
@NonNull Color contentColor	content color used by components inside content, title and subtitle.
BorderStroke border	the border to draw around this card
@NonNull PaddingValues 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.
MutableInteractionSource interactionSource	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.
@Composable @NonNull Function0<Unit> content	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-alpha01

@Composable
public static final void Card(
    @NonNull Function0<Unit> onClick,
    @NonNull Modifier modifier,
    @Composable Function0<Unit> title,
    @Composable Function0<Unit> subtitle,
    @Composable Function0<Unit> header,
    @Composable Function0<Unit> leadingIcon,
    @Composable Function0<Unit> trailingIcon,
    @NonNull Shape shape,
    @NonNull Color color,
    @NonNull Color contentColor,
    BorderStroke border,
    @NonNull PaddingValues contentPadding,
    MutableInteractionSource interactionSource,
    @Composable @NonNull Function0<Unit> content
)

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 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
@NonNull Function0<Unit> onClick	called when this card item is clicked
@NonNull Modifier modifier	the Modifier to be applied to this card
@Composable Function0<Unit> title	optional title to be placed above subtitle and content, below header
@Composable Function0<Unit> subtitle	optional subtitle to be placed above content, below title
@Composable Function0<Unit> header	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.
@Composable Function0<Unit> leadingIcon	optional leading icon to be placed before content. This is typically an Icon. Colors.primary is provided as the content color by default.
@Composable Function0<Unit> trailingIcon	optional trailing icon to be placed after content. This is typically an Icon. Colors.primary is provided as the content color by default.
@NonNull Shape shape	the Shape used to clip this card, and also used to draw the background and border
@NonNull Color color	background color of this card
@NonNull Color contentColor	content color used by components inside content, title and subtitle.
BorderStroke border	the border to draw around this card
@NonNull PaddingValues 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.
MutableInteractionSource interactionSource	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.
@Composable @NonNull Function0<Unit> content	the main content / body text to display inside this card. This is recommended to be limited to 10 lines of text.