RemoteCard

Functions summary

Unit
@RemoteComposable
@Composable
RemoteCard(
    onClick: Action,
    modifier: RemoteModifier,
    enabled: RemoteBoolean,
    shape: RemoteShape,
    colors: RemoteCardColors,
    contentPadding: RemotePaddingValues,
    content: @Composable @RemoteComposable () -> Unit
)

Base level Wear Material 3 RemoteCard that offers a single slot to take any content.
Unit
@RemoteComposable
@Composable
RemoteCard(
    onClick: Action,
    containerPainter: RemotePainter,
    modifier: RemoteModifier,
    enabled: RemoteBoolean,
    shape: RemoteShape,
    colors: RemoteCardColors,
    contentPadding: RemotePaddingValues,
    content: @Composable @RemoteComposable () -> Unit
)

Wear Material 3 RemoteCard that offers a single slot to take any content, with a background image.

Functions

RemoteCard

@RemoteComposable
@Composable
fun RemoteCard(
    onClick: Action,
    modifier: RemoteModifier = RemoteModifier,
    enabled: RemoteBoolean = true.rb,
    shape: RemoteShape = RemoteCardDefaults.shape,
    colors: RemoteCardColors = RemoteCardDefaults.cardColors(),
    contentPadding: RemotePaddingValues = RemoteCardDefaults.ContentPadding,
    content: @Composable @RemoteComposable () -> Unit
): Unit

Base level Wear Material 3 RemoteCard that offers a single slot to take any content.

Is used as the container for more opinionated RemoteCard components that take specific content such as icons, images, titles, subtitles and labels.

import androidx.compose.remote.creation.compose.action.Action
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.compose.remote.creation.compose.modifier.padding
import androidx.compose.remote.creation.compose.state.rdp
import androidx.compose.remote.creation.compose.state.rs
import androidx.wear.compose.remote.material3.RemoteCard
import androidx.wear.compose.remote.material3.RemoteText

RemoteCard(onClick = Action.Empty, modifier = RemoteModifier.padding(16.rdp)) {
    RemoteText("This is a basic card".rs)
}
Parameters
onClick: Action

Will be called when the user clicks the card
modifier: RemoteModifier = RemoteModifier

Modifier to be applied to the card
enabled: RemoteBoolean = true.rb

Controls the enabled state of the card. When false, this component will not respond to user input
shape: RemoteShape = RemoteCardDefaults.shape

Defines the card's shape.
colors: RemoteCardColors = RemoteCardDefaults.cardColors()

RemoteCardColors that will be used to resolve the colors used for this card. See RemoteCardDefaults.cardColors.
contentPadding: RemotePaddingValues = RemoteCardDefaults.ContentPadding

The spacing values to apply internally between the container and the content
content: @Composable @RemoteComposable () -> Unit

The main slot for a content of this card

RemoteCard

@RemoteComposable
@Composable
fun RemoteCard(
    onClick: Action,
    containerPainter: RemotePainter,
    modifier: RemoteModifier = RemoteModifier,
    enabled: RemoteBoolean = true.rb,
    shape: RemoteShape = RemoteCardDefaults.shape,
    colors: RemoteCardColors = RemoteCardDefaults.cardWithContainerPainterColors(),
    contentPadding: RemotePaddingValues = RemoteCardDefaults.CardWithContainerPainterContentPadding,
    content: @Composable @RemoteComposable () -> Unit
): Unit

Wear Material 3 RemoteCard that offers a single slot to take any content, with a background image.

An Image background is a means to reinforce the meaning of information in a Card, e.g. to help to contextualize the information. Cards should have a content color that contrasts with the background image and scrim. This RemoteCard takes containerPainter for the container image background to be drawn (the RemoteCardColors containerColor property is ignored). It is recommended to use RemoteCardDefaults.containerPainter to create the painter so that a scrim is drawn on top of the container image, ensuring that any content above the background is legible.

import androidx.compose.remote.creation.compose.action.Action
import androidx.compose.remote.creation.compose.modifier.RemoteModifier
import androidx.compose.remote.creation.compose.modifier.padding
import androidx.compose.remote.creation.compose.state.rdp
import androidx.compose.remote.creation.compose.state.rememberNamedRemoteImageBitmap
import androidx.compose.remote.creation.compose.state.rs
import androidx.compose.ui.graphics.asImageBitmap
import androidx.wear.compose.remote.material3.RemoteCard
import androidx.wear.compose.remote.material3.RemoteCardDefaults
import androidx.wear.compose.remote.material3.RemoteText
import androidx.wear.compose.remote.material3.previews.utils.createImage

val backgroundImage =
    rememberNamedRemoteImageBitmap(name = "backgroundImage") {
        createImage(200, 200).asImageBitmap()
    }
val containerPainter = RemoteCardDefaults.containerPainter(backgroundImage)
RemoteCard(
    onClick = Action.Empty,
    containerPainter = containerPainter,
    modifier = RemoteModifier.padding(16.rdp),
) {
    RemoteText("Card with image".rs)
}
Parameters
onClick: Action

Will be called when the user clicks the card
containerPainter: RemotePainter

The RemotePainter to use to draw the container image of the RemoteCard, such as returned by RemoteCardDefaults.containerPainter.
modifier: RemoteModifier = RemoteModifier

Modifier to be applied to the card
enabled: RemoteBoolean = true.rb

Controls the enabled state of the card. When false, this component will not respond to user input
shape: RemoteShape = RemoteCardDefaults.shape

Defines the card's shape.
colors: RemoteCardColors = RemoteCardDefaults.cardWithContainerPainterColors()

RemoteCardColors that will be used to resolve the colors used for this card. See RemoteCardDefaults.cardWithContainerPainterColors.
contentPadding: RemotePaddingValues = RemoteCardDefaults.CardWithContainerPainterContentPadding

The spacing values to apply internally between the container and the content
content: @Composable @RemoteComposable () -> Unit

The main slot for a content of this card