AppCardContent

Functions summary

Unit
@Composable
AppCardContent(
    appName: @Composable RowScope.() -> Unit,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier,
    colors: CardColors,
    appImage: (@Composable RowScope.() -> Unit)?,
    time: (@Composable RowScope.() -> Unit)?,
    content: @Composable ColumnScope.() -> Unit
)

Lays out the content of an AppCard with support for an app icon, app name, time, title, and body content.

Functions

@Composable
fun AppCardContent(
    appName: @Composable RowScope.() -> Unit,
    title: @Composable RowScope.() -> Unit,
    modifier: Modifier = Modifier,
    colors: CardColors = CardDefaults.cardColors(),
    appImage: (@Composable RowScope.() -> Unit)? = null,
    time: (@Composable RowScope.() -> Unit)? = null,
    content: @Composable ColumnScope.() -> Unit
): Unit

Lays out the content of an AppCard with support for an app icon, app name, time, title, and body content.

While the standard AppCard overloads provide this layout out-of-the-box, AppCardContent can be used inside the Card overload that takes a generic content to build custom card layouts (for example, to wrap the content in a gesture hint indicator like OneHandedGestureIndicator) while maintaining standard typography, colors, and spacing.

Example of an AppCardContent layout with OneHandedGestureIndicator:

import androidx.compose.foundation.Image
import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.material.icons.filled.Favorite
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
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.AppCardContent
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
import androidx.wear.compose.material3.onehandedgesture.GestureAction
import androidx.wear.compose.material3.onehandedgesture.OneHandedGestureIndicator
import androidx.wear.compose.material3.onehandedgesture.oneHandedGesture

var label by remember { mutableStateOf("App Card") }
val onClick = remember { { label = "Gestured" } }
val interactionSource = remember { MutableInteractionSource() }

Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
    Card(
        onClick = onClick,
        interactionSource = interactionSource,
        modifier =
            Modifier.padding(horizontal = 12.dp)
                .fillMaxWidth()
                .oneHandedGesture(
                    action = GestureAction.Primary,
                    interactionSource = interactionSource,
                    onGesture = onClick,
                ),
    ) {
        OneHandedGestureIndicator(
            interactionSource = interactionSource,
            gestureIndicatorTint = MaterialTheme.colorScheme.onSurface,
        ) {
            AppCardContent(
                appName = { Text("App Name") },
                title = { Text(label) },
                appImage = {
                    Icon(
                        painter = painterResource(R.drawable.ic_favorite_rounded),
                        contentDescription = "Favorite icon",
                        modifier = Modifier.size(CardDefaults.AppImageSize),
                    )
                },
                time = { Text("now") },
            ) {
                Text("Card body")
            }
        }
    }
}
Parameters
appName: @Composable RowScope.() -> Unit

A slot for providing the app name.

title: @Composable RowScope.() -> Unit

A slot for providing the card's title.

modifier: Modifier = Modifier

Modifier to be applied to the app card content layout.

colors: CardColors = CardDefaults.cardColors()

CardColors that will be used to resolve the content, title, and app name colors in different states. See CardDefaults.cardColors.

appImage: (@Composable RowScope.() -> Unit)? = null

A slot for providing the app icon.

time: (@Composable RowScope.() -> Unit)? = null

A slot for providing the time.

content: @Composable ColumnScope.() -> Unit

A slot for providing the card's body content.