# AppCard

## Functions summary

|---|---|
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AppCard.composable#AppCard(kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1,kotlin.Function1,kotlin.Function1)( appName: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation?, appImage: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Opinionated Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` that offers a specific 5 slot layout to show information about an application, e.g. a notification. |
| `https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | `@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AppCard.composable#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1,kotlin.Function1,kotlin.Function1)( onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, appName: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html, modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier, onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html?, enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html, shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape, colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors, border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke?, contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues, interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource?, transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation?, appImage: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)?, content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html )` Opinionated Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` that offers a specific 5 slot layout to show information about an application, e.g. a notification. |

## Functions

### AppCard

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/NonClickableCard.kt+function:AppCard)

```
@Composable
fun AppCard(
    appName: @Composable RowScope.() -> Unit,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    transformation: SurfaceTransformation? = null,
    appImage: (@Composable RowScope.() -> Unit)? = null,
    time: (@Composable RowScope.() -> Unit)? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit
```

Opinionated Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` 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.

This AppCard does not handle input events - see the other AppCard overloads if you want a clickable AppCard.

The first row of the layout has three slots, 1) a small optional application `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Image.composable#Image(androidx.compose.ui.graphics.ImageBitmap,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.FilterQuality)` or `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Icon.composable#Icon(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color)` of size `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#AppImageSize()`x`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#AppImageSize()` dp, 2) an application name (emphasised with the CardColors.appColor() color), it is expected to be a short start aligned `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Text.composable#Text(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle)` composable, and 3) the 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 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Text.composable#Text(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle)` composable showing a time relevant to the contents of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`.

The second row shows a title, this is expected to be a single row of start aligned `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Text.composable#Text(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle)`.

The rest of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` contains the content which can be either `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Text.composable#Text(kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.font.FontStyle,androidx.compose.ui.text.font.FontWeight,androidx.compose.ui.text.font.FontFamily,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextDecoration,androidx.compose.ui.text.style.TextAlign,androidx.compose.ui.unit.TextUnit,androidx.compose.ui.text.style.TextOverflow,kotlin.Boolean,kotlin.Int,kotlin.Int,kotlin.Function1,androidx.compose.ui.text.TextStyle)` or an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Image.composable#Image(androidx.compose.ui.graphics.ImageBitmap,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.FilterQuality)`. 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.

Example of a non-clickable `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AppCard.composable#AppCard(kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1,kotlin.Function1,kotlin.Function1)`:

```kotlin
import androidx.wear.compose.material3.AppCard
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text

AppCard(
    appName = { Text("App name") },
    title = { Text("Card title") },
    time = { Text("Now") },
) {
    Text("Non clickable card content")
}
```

![NonClickableAppCardSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_NonClickableAppCardSample_CompositeImage.png)

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

| Parameters |
|---|---|
| `appName: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for displaying the application name, expected to be a single line of start aligned text |
| `title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for displaying the title of the card, expected to be one or two lines of start aligned text |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the card |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = CardDefaults.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 |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors = CardDefaults.cardColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors` that will be used to resolve the colors used for this card. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#cardColors()`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | A BorderStroke object which is used for drawing outlines. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = CardDefaults.ContentPadding` | The spacing values to apply internally between the container and the content |
| `transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation? = null` | Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background. |
| `appImage: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | A slot for a small (`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#AppImageSize()`x`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#AppImageSize()` ) `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Image.composable#Image(androidx.compose.ui.graphics.ImageBitmap,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.FilterQuality)` associated with the application. |
| `time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | A slot for displaying the time relevant to the contents of the card, expected to be a short piece of end aligned text. |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The main slot for a content of this card |

### AppCard

Artifact: [androidx.wear.compose:compose-material3](https://developer.android.com/jetpack/androidx/releases/wear-compose) [View Source](https://cs.android.com/search?q=file:androidx/wear/compose/material3/Card.kt+function:AppCard) Added in [1.5.0](https://developer.android.com/jetpack/androidx/releases/wear-compose#1.5.0)

```
@Composable
fun AppCard(
    onClick: () -> Unit,
    appName: @Composable RowScope.() -> Unit,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    onLongClick: (() -> Unit)? = null,
    onLongClickLabel: String? = null,
    enabled: Boolean = true,
    shape: Shape = CardDefaults.shape,
    colors: CardColors = CardDefaults.cardColors(),
    border: BorderStroke? = null,
    contentPadding: PaddingValues = CardDefaults.ContentPadding,
    interactionSource: MutableInteractionSource? = null,
    transformation: SurfaceTransformation? = null,
    appImage: (@Composable RowScope.() -> Unit)? = null,
    time: (@Composable RowScope.() -> Unit)? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit
```

Opinionated Wear Material 3 `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` 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 `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Image.composable#Image(androidx.compose.ui.graphics.ImageBitmap,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.FilterQuality)` or `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Icon.composable#Icon(androidx.compose.ui.graphics.vector.ImageVector,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.graphics.Color)` of size `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#AppImageSize()`x`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#AppImageSize()` dp, 2) an application name (emphasised with the CardColors.appColor() color), it is expected to be a short start aligned composable, and 3) the 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 composable showing a time relevant to the contents of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)`.

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

The rest of the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/Card.composable#Card(kotlin.Function0,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1)` contains the content which can be either or an `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Image.composable#Image(androidx.compose.ui.graphics.ImageBitmap,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.FilterQuality)`. 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.

Example of an `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AppCard.composable#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1,kotlin.Function1,kotlin.Function1)` with onClick:

```kotlin
import androidx.wear.compose.material3.AppCard
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.Text

AppCard(
    onClick = { /* Do something */ },
    appName = { Text("App name") },
    title = { Text("Card title") },
    time = { Text("Now") },
) {
    Text("Card content")
}
```

![AppCardSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_AppCardSample_CompositeImage.png)

Example of an `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AppCard.composable#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1,kotlin.Function1,kotlin.Function1)` with icon:

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.contentDescription
import androidx.wear.compose.material3.AppCard
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text

AppCard(
    onClick = { /* Do something */ },
    appName = { Text("App name") },
    appImage = {
        Icon(
            painter = painterResource(id = android.R.drawable.star_big_off),
            contentDescription = "Star icon",
            modifier =
                Modifier.size(CardDefaults.AppImageSize)
                    .wrapContentSize(align = Alignment.Center),
            tint = MaterialTheme.colorScheme.primary,
        )
    },
    title = { Text("Card title") },
    time = { Text("Now") },
) {
    Text("Card content")
}
```

![AppCardWithIconSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_AppCardWithIconSample_CompositeImage.png)

Example of an `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AppCard.composable#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1,kotlin.Function1,kotlin.Function1)` with image `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1,kotlin.Function1,kotlin.Function1)`:

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.aspectRatio
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.ContentScale
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.res.painterResource
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material3.AppCard
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.MaterialTheme
import androidx.wear.compose.material3.Text

val configuration = LocalConfiguration.current
// Add padding to the end of the image in order to maintain the correct proportions
// between the image and the card.
val imageEndPaddingDp = (0.15f * configuration.screenWidthDp).dp
AppCard(
    onClick = { /* Do something */ },
    appName = { Text("App name") },
    appImage = {
        Icon(
            painter = painterResource(id = android.R.drawable.star_big_off),
            contentDescription = "Star icon",
            modifier =
                Modifier.size(CardDefaults.AppImageSize)
                    .wrapContentSize(align = Alignment.Center),
            tint = MaterialTheme.colorScheme.primary,
        )
    },
    title = { Text("With image") },
    time = { Text("Now") },
) {
    Spacer(modifier = Modifier.height(4.dp))
    Row(modifier = Modifier.fillMaxWidth()) {
        Image(
            modifier =
                Modifier.weight(1f).aspectRatio(16f / 9f).clip(RoundedCornerShape(16.dp)),
            painter = painterResource(id = R.drawable.card_content_image),
            contentScale = ContentScale.Crop,
            contentDescription = null,
        )
        Spacer(modifier = Modifier.width(imageEndPaddingDp))
    }
}
```

![AppCardWithImageSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_AppCardWithImageSample_CompositeImage.png)

Example of an outlined `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/AppCard.composable#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1,kotlin.Function1,kotlin.Function1)`:

```kotlin
import androidx.compose.foundation.Image
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.wear.compose.material3.AppCard
import androidx.wear.compose.material3.Card
import androidx.wear.compose.material3.CardDefaults
import androidx.wear.compose.material3.Icon
import androidx.wear.compose.material3.Text

AppCard(
    onClick = { /* Do something */ },
    appName = { Text("App name") },
    appImage = {
        Icon(
            Icons.Filled.Favorite,
            contentDescription = "Favorite icon",
            modifier = Modifier.size(CardDefaults.AppImageSize),
        )
    },
    title = { Text("App card") },
    time = { Text("Now") },
    colors = CardDefaults.outlinedCardColors(),
    border = CardDefaults.outlinedCardBorder(),
) {
    Text("Card content")
}
```

![OutlinedAppCardSample Composite
Image](https://developer.android.com/wear/images/design/WearComposeM3_OutlinedAppCardSample_CompositeImage.png)

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

| Parameters |
|---|---|
| `onClick: () -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | Will be called when the user clicks the card |
| `appName: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for displaying the application name, expected to be a single line of start aligned text |
| `title: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | A slot for displaying the title of the card, expected to be one or two lines of start aligned text |
| `modifier: https://developer.android.com/reference/kotlin/androidx/compose/ui/Modifier = Modifier` | Modifier to be applied to the card |
| `onLongClick: (() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | Called when this card is long clicked (long-pressed). When this callback is set, `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1,kotlin.Function1,kotlin.Function1)` should be set as well. |
| `onLongClickLabel: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-string/index.html? = null` | Semantic / accessibility label for the `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/package-summary#AppCard(kotlin.Function0,kotlin.Function1,kotlin.Function1,androidx.compose.ui.Modifier,kotlin.Function0,kotlin.String,kotlin.Boolean,androidx.compose.ui.graphics.Shape,androidx.wear.compose.material3.CardColors,androidx.compose.foundation.BorderStroke,androidx.compose.foundation.layout.PaddingValues,androidx.compose.foundation.interaction.MutableInteractionSource,androidx.wear.compose.material3.SurfaceTransformation,kotlin.Function1,kotlin.Function1,kotlin.Function1)` action. |
| `enabled: https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-boolean/index.html = true` | 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. |
| `shape: https://developer.android.com/reference/kotlin/androidx/compose/ui/graphics/Shape = CardDefaults.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 |
| `colors: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors = CardDefaults.cardColors()` | `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardColors` that will be used to resolve the colors used for this card in different states. See `https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#cardColors()`. |
| `border: https://developer.android.com/reference/kotlin/androidx/compose/foundation/BorderStroke? = null` | A BorderStroke object which is used for drawing outlines. |
| `contentPadding: https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/PaddingValues = CardDefaults.ContentPadding` | The spacing values to apply internally between the container and the content |
| `interactionSource: https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource? = null` | an optional hoisted `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/MutableInteractionSource` for observing and emitting `https://developer.android.com/reference/kotlin/androidx/compose/foundation/interaction/Interaction`s 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. |
| `transformation: https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/SurfaceTransformation? = null` | Transformation to be used when card appears inside a container that needs to dynamically change its content separately from the background. |
| `appImage: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | A slot for a small (`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#AppImageSize()`x`https://developer.android.com/reference/kotlin/androidx/wear/compose/material3/CardDefaults#AppImageSize()` ) `https://developer.android.com/reference/kotlin/androidx/compose/foundation/Image.composable#Image(androidx.compose.ui.graphics.ImageBitmap,kotlin.String,androidx.compose.ui.Modifier,androidx.compose.ui.Alignment,androidx.compose.ui.layout.ContentScale,kotlin.Float,androidx.compose.ui.graphics.ColorFilter,androidx.compose.ui.graphics.FilterQuality)` associated with the application. |
| `time: (@https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/RowScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html)? = null` | A slot for displaying the time relevant to the contents of the card, expected to be a short piece of end aligned text |
| `content: @https://developer.android.com/reference/kotlin/androidx/compose/runtime/Composable https://developer.android.com/reference/kotlin/androidx/compose/foundation/layout/ColumnScope.() -> https://kotlinlang.org/api/core/kotlin-stdlib/kotlin/-unit/index.html` | The main slot for a content of this card |