Building Jetpack Compose Apps for Wear OS

Wear OS, Google’s operating system for smartwatches, has embraced Jetpack Compose, providing developers with a modern and intuitive way to build user interfaces for wearable devices. Building Compose apps for Wear OS involves leveraging specific Compose libraries and adapting your UI for the unique form factor and constraints of smartwatches.

Introduction to Jetpack Compose on Wear OS

Jetpack Compose simplifies UI development on Wear OS by enabling a declarative approach to designing interfaces. Instead of working with traditional XML layouts and imperative UI updates, you define your UI as a function of data and state. Compose then automatically updates the UI when the data changes. This results in cleaner, more maintainable code and faster development cycles.

Why Use Jetpack Compose for Wear OS?

• Simplified UI Development: Declarative syntax reduces boilerplate and makes UI code easier to read and write.
• Live Previews: Quickly preview your UI directly in the IDE without deploying to a device.
• Animations: Built-in support for smooth animations to enhance user experience.
• Compatibility: Leverages modern Android development practices and integrates well with other Jetpack libraries.
• Adaptive UI: Facilitates creating adaptive UIs that respond to different screen sizes and shapes.

Setting Up Your Development Environment

Before you start building Compose apps for Wear OS, ensure you have the necessary tools and SDKs:

Step 1: Install Android Studio

Download and install the latest version of Android Studio.

Step 2: Install the Wear OS Emulator

Create a Wear OS emulator within Android Studio using the AVD (Android Virtual Device) Manager.

Step 3: Update SDK Components

Ensure you have the latest Android SDK Platform Tools and Wear OS system image installed through the SDK Manager.

Creating a New Wear OS Project with Jetpack Compose

To create a new Wear OS project that uses Jetpack Compose, follow these steps:

Step 1: Start a New Project

In Android Studio, select “New Project” and choose the “Wear OS” category.

Step 2: Select a Template

Choose the “Compose for Wear OS” template or start with an “Empty Activity” and manually add the necessary Compose dependencies.

Step 3: Configure the Project

Configure your project name, package name, and minimum SDK. Ensure the minimum SDK is compatible with Wear OS Compose (API 30 or higher is recommended).

Step 4: Add Dependencies

If you started with an empty activity, add the following dependencies to your build.gradle.kts file:

dependencies {
    implementation("androidx.core:core-ktx:1.12.0")
    implementation("androidx.lifecycle:lifecycle-runtime-compose:2.7.0")
    implementation("androidx.activity:activity-compose:1.9.0")
    implementation(platform("androidx.compose:compose-bom:2024.05.00"))
    implementation("androidx.compose.ui:ui")
    implementation("androidx.compose.ui:ui-graphics")
    implementation("androidx.compose.ui:ui-tooling-preview")
    implementation("androidx.compose.material:material")
    implementation("androidx.wear.compose:compose-material:1.3.0")
    implementation("androidx.wear.compose:compose-foundation:1.3.0")
    androidTestImplementation(platform("androidx.compose:compose-bom:2024.05.00"))
    androidTestImplementation("androidx.compose.ui:ui-test-junit4")
    debugImplementation("androidx.compose.ui:ui-tooling")
    debugImplementation("androidx.compose.ui:ui-test-manifest")
}

Step 5: Sync Project with Gradle Files

Click “Sync Now” to sync your project with the Gradle files.

Basic UI Components in Wear OS Compose

Wear OS Compose offers specific components tailored for wearable devices:

Box

Similar to Android Compose, Box is a container that places its children on top of each other. It is often used as a base layout for Wear OS apps.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview

@Composable
fun SimpleBoxExample() {
    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        // Your UI elements here
    }
}

@Preview(device = Devices.WEAR_OS_SMALL_ROUND, showBackground = true)
@Composable
fun PreviewSimpleBoxExample() {
    SimpleBoxExample()
}

CircularProgressIndicator

A circular progress indicator specific to Wear OS for displaying loading progress.

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.wear.compose.material.CircularProgressIndicator
import androidx.compose.runtime.remember

@Composable
fun ProgressIndicatorExample() {
    val progress = remember { 0.75f } // Example progress value

    Box(
        modifier = Modifier.fillMaxSize(),
        contentAlignment = Alignment.Center
    ) {
        CircularProgressIndicator(
            progress = progress
        )
    }
}

@Preview(device = Devices.WEAR_OS_SMALL_ROUND, showBackground = true)
@Composable
fun PreviewProgressIndicatorExample() {
    ProgressIndicatorExample()
}

Button and Chip

Wear OS provides specialized buttons and chips that adhere to the wearable UI/UX guidelines.

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Button
import androidx.wear.compose.material.Text

@Composable
fun ButtonChipExample() {
    Column(modifier = Modifier.padding(16.dp)) {
        Button(onClick = { /* Handle button click */ }) {
            Text(text = "Click Me")
        }

        Spacer(modifier = Modifier.height(8.dp))

    }
}

@Preview(device = Devices.WEAR_OS_SMALL_ROUND, showBackground = true)
@Composable
fun PreviewButtonChipExample() {
    ButtonChipExample()
}

ScalingLazyColumn

ScalingLazyColumn is the equivalent of LazyColumn, optimized for Wear OS to display lists that scale as the user scrolls, offering a better user experience on round displays.

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.ScalingLazyColumn
import androidx.wear.compose.material.ScalingLazyListState
import androidx.compose.runtime.remember
import androidx.wear.compose.material.items
import androidx.wear.compose.foundation.rememberActiveFocusRequester

@Composable
fun ScalingLazyColumnExample() {
    val items = (1..10).map { "Item $it" }
    val scalingLazyListState: ScalingLazyListState = rememberScalingLazyListState()

    ScalingLazyColumn(
        modifier = Modifier.fillMaxSize(),
        contentPadding = PaddingValues(16.dp),
        state = scalingLazyListState
    ) {
        items(items) { item ->
            Text(text = item, modifier = Modifier.padding(8.dp))
        }
    }
}

@Composable
fun rememberScalingLazyListState() : ScalingLazyListState {
  val focusRequester = rememberActiveFocusRequester()
  return remember(focusRequester) {
     ScalingLazyListState(focusRequester = focusRequester)
  }
}


@Preview(device = Devices.WEAR_OS_SMALL_ROUND, showBackground = true)
@Composable
fun PreviewScalingLazyColumnExample() {
    ScalingLazyColumnExample()
}

Handling Round Screens

Wear OS devices often have round screens, so designing layouts that adapt to this form factor is important.

import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.tooling.preview.Devices
import androidx.compose.ui.tooling.preview.Preview
import androidx.wear.compose.material.Text
import androidx.wear.compose.material.Card

@Composable
fun RoundScreenExample() {
    Card(
        modifier = Modifier.fillMaxSize().wrapContentSize(Alignment.Center),
        onClick = {}
    ) {
        Text(text = "Hello Wear OS")
    }
}

@Preview(device = Devices.WEAR_OS_SMALL_ROUND, showBackground = true)
@Composable
fun PreviewRoundScreenExample() {
    RoundScreenExample()
}

Advanced UI Patterns

For more complex UIs, explore patterns like the radial layout and implementing custom components tailored for wearable devices.

Conclusion

Building Jetpack Compose apps for Wear OS opens up a new era of possibilities for creating engaging and intuitive experiences on wearable devices. By leveraging Compose’s declarative syntax, built-in components, and adaptive layouts, developers can craft compelling UIs tailored to the unique constraints and opportunities of Wear OS. This guide provides a starting point to harness the power of Jetpack Compose and build innovative Wear OS applications.