Jetpack Compose for Wear OS Part-II

In this part, we’ll discuss how to use Cards and Chips with Compose for Wear OS.

In case you haven’t gone through Part-I of the article, check it out here: Jetpack Compose for Wear OS Part-I

Cards

Compose for Wear is a little different in that we have two major cards, AppCard and TitleCard.

AppCard

AppCard(
    modifier = Modifier
        .padding(vertical = 2.dp, horizontal = 4.dp),
    onClick = {},
    appName = { Text(text = "messages") },
    time = { Text(text = "${itemIndex}m") },
    title = { Text(text = "Gwen") },
    appImage = {
        Icon(
            imageVector = Icons.Rounded.Message,
            contentDescription = "triggers open message action"
        )
    }
) {
    Text(
        text = "Otp is 3130 triggers open message action",
        maxLines = 1,
        overflow = TextOverflow.Ellipsis
    )
}

We create the AppCard composable, set its modifier, add an Icon, add several Text composable parameters (each for a different space on the card), and finally set the main content text at the end.

The App Card would look like this:

TitleCard

TitleCard(
    onClick = { onCardClick(itemIndex) },
    title = { Text("Title") },
    time = { Text(text = "13m") },
) {
    Text("Subtitle")
}

TitleCard has fewer slots than Appcard.

Card

Compose for Wear OS also provides a base-level Wear Material Card that offers a single slot to take any content. In our FitWatch app, we have used Card.

Let’s take a look at the example

Card(
    modifier = modifier,
    onClick = onClick
) {
    Row(
        modifier = Modifier.fillMaxWidth(),
        horizontalArrangement = Arrangement.Start
    ) {
        Icon(painter = painterResource(id = icon),  contentDescription = "")
        Spacer(modifier = Modifier.width(16.dp))
        Text(text = title)
    }
}

Chips

Chips are meant to be a quick one tap action, which makes especially good sense for a Wear device with limited screen real estate.

For Wear OS, we have two main types of chips.

1. Chip
2. ToggleChip

Chip

Chip(
    modifier = Modifier.fillMaxWidth(),
    onClick = { /* ... */ },
    label = {
        Text(
            text = "Meditation",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    },
    icon = {
        Icon(
            imageVector = Icons.Rounded.SelfImprovement,
            contentDescription = "triggers meditation action",
        )
    },
)

Chip composable takes a label (which we create a Text composable for) and an icon.

Here’s how the above chip would look

ToggleChip

var checked by remember { mutableStateOf(true) }
ToggleChip(
    modifier = Modifier.fillMaxWidth(),
    checked = checked,
    toggleControl = {
        Icon(
            imageVector = ToggleChipDefaults.switchIcon(checked = checked),
            contentDescription = if (checked) "On" else "Off"
        )
    },
    onCheckedChange = {
        checked = it
    },
    label = {
        Text(
            text = "Sound",
            maxLines = 1,
            overflow = TextOverflow.Ellipsis
        )
    }
)

ToggleChip is just like a Chip but allows the user to interact with a radio button, toggle, or checkbox.

First, we create a MutableState. We haven't been doing this in the other functions, because we are mainly doing UI demos so you can see what Wear offers.

In a normal app, you would probably want to pass in the checked state and the lambda for handling the tap, so the composable can be stateless.

In our case, we are just keeping it simple to show off what the ToggleChip looks like in action with a working toggle (even though we don't do anything with the state).

Next, we set the modifier, the checked state, and the toggle icon to give us the switch we want. (We use the defaults in this case.)

We then create a lambda for changing the state and finally set the label with a Text composable (and some basic parameters).

Let’s see what it looks like:

In the next article, we’ll discuss Glance for Wear OS to create Tiles using the power of Jetpack Compose.

Click on the link for Part-III of the article: Glance for Wear OS (Jetpack Compose for Wear OS Part-III)

Resources:

Compose for Wear OS Codelab | Android Developers

Checkout the GitHub Repo: https://github.com/mutualmobile/FitWatchCompose