State of Compose 2023 results are in! Click here to learn more

← Back to Wear Material Core

AppCard

Component
in
Wear Material Core
. Since 1.2.0-rc01

Overview

Code Examples

Video

Opinionated Wear Material Card that offers a specific 5 slot layout to show information about an application, e.g. a notification. AppCards are designed to show interactive elements from multiple applications. They will typically be used by the system UI, e.g. for showing a list of notifications from different applications. However it could also be adapted by individual application developers to show information about different parts of their application.

The first row of the layout has three slots, 1) a small optional application Image or Icon, 2) an application name, it is expected to be a short start-aligned Text composable, and 3) the optional time that the application activity has occurred which will be shown on the top row of the card, this is expected to be an end aligned Text composable showing a time relevant to the contents of the Card.

The second row shows a title, this is expected to be a single row of start aligned Text.

The rest of the Card contains the content which can be either Text or an Image. If the content is text it can be single or multiple line and is expected to be Top and Start aligned.

If more than one composable is provided in the content slot it is the responsibility of the caller to determine how to layout the contents, e.g. provide either a row or a column.

For more information, see the Cards(https://developer.android.com/training/wearables/components/cards) guide.

@param onClick Will be called when the user clicks the card @param modifier Modifier to be applied to the card @param enabled Controls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable. @param border A BorderStroke object which is used for the outline drawing. Can be null - then outline will not be drawn @param contentPadding The spacing values to apply internally between the container and the content @param containerPainter A Painter which is used for background drawing. @param interactionSource The MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this card in different Interactions. @param shape Defines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme @param appImage A slot for a small Image associated with the application. @param appName A slot for displaying the application name, expected to be a single line of start aligned text. @param time A slot for displaying the time relevant to the contents of the card, expected to be a short piece of end aligned text. @param title A slot for displaying the title of the card, expected to be one or two lines of start aligned text. @param content A main slot for a content of this card

Overloads

AppCard

@RestrictTo(RestrictTo.Scope.LIBRARY_GROUP)
@Composable
public fun AppCard(
    onClick: () -> Unit,
    modifier: Modifier,
    enabled: Boolean,
    border: BorderStroke?,
    contentPadding: PaddingValues,
    containerPainter: Painter,
    interactionSource: MutableInteractionSource,
    shape: Shape,
    appImage: @Composable (RowScope.() -> Unit)?,
    appName: @Composable RowScope.() -> Unit,
    time: @Composable (RowScope.() -> Unit)?,
    title: @Composable RowScope.() -> Unit,
    content: @Composable ColumnScope.() -> Unit,
)

Parameters

NameDescription
onClickWill be called when the user clicks the card
modifierModifier to be applied to the card
enabledControls the enabled state of the card. When false, this card will not be clickable and there will be no ripple effect on click. Wear cards do not have any specific elevation or alpha differences when not enabled - they are simply not clickable.
borderA BorderStroke object which is used for the outline drawing. Can be null - then outline will not be drawn
contentPaddingThe spacing values to apply internally between the container and the content
containerPainterA Painter which is used for background drawing.
interactionSourceThe MutableInteractionSource representing the stream of Interactions for this card. You can create and pass in your own remembered MutableInteractionSource if you want to observe Interactions and customize the appearance / behavior of this card in different Interactions.
shapeDefines the card's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme
appImageA slot for a small Image associated with the application.
appNameA slot for displaying the application name, expected to be a single line of start aligned text.
timeA slot for displaying the time relevant to the contents of the card, expected to be a short piece of end aligned text.
titleA slot for displaying the title of the card, expected to be one or two lines of start aligned text.
contentA main slot for a content of this car