Android Jetpack Compose Wear OS

Easily create UI for our wearable devices using Jetpack Compose!

Android Jetpack Compose Wear OS

Every Android developer has wondered how to develop apps for smart watches. Now writing UI for our smartwatches is very easy and effective with Jetpack Compose! Long live Jetpack Compose Wear OS!

Introduction

Hello dear Android developers! Welcome to my article. Today I am going to talk about how we develop applications for our smartwatches with Jetpack Compose and the most useful UI components for smartwatches.

First of all, we start by creating our Compose project for Wear OS.

Creating Compose project for Wear OS.

Also, we need to pay attention to our Android Studio version before we build our project.

The Android Studio version I’m using for the examples.

Before we start, we need to add our dependencies to the build.gradle file in app.

Here is the list of dependencies we need to use for Wear OS.

In addition, we have to be absolutely careful here that our dependencies are related with dependencies for Wear OS.

Careful about adding the dependencies that are associated with Wear OS.

After doing all this, we are now ready to write the UI part of our application. Now, we will examine the most used components for smart watch applications with examples. Let’s run our project first!

The UI that we wrote to run our app for the first time.

Emulator output of the first UI that we designed.

As we saw above, we were able to run our first project easily using Jetpack Compose. Now I will show you the most preferred UI components for smart watches in our project.

1-Buttons

Some button designs for smart watches.

Buttons are generally used in circular shapes in smart watch applications, the most important feature that distinguishes them from Chips is that they are circular.

Jetpack Compose Wear OS Button Example

Jetpack Compose Wear OS Button Example Output.

2-Chips

Some Chips designs for smart watches.

The Chip component is an interactive compact element that represents an input, attribute, or action.

Jetpack Compose Wear OS Chips Example

Jetpack Compose Wear OS Chips Example Output

3-Toggle Chips

Some Toggle Chips designs for smart watches.

A ToggleChip is a specialized chip that allows users to select various options.

Jetpack Compose Wear OS Toggle Chips Example

Jetpack Compose Wear OS Toggle Chips Example Output

You can also use a radio button or checkbox for selection here.

4-Slider

Some Slider designs for smart watches.

The InlineSlider component allows users to make selections from a range of values.

Jetpack Compose Wear OS Slider Example

Jetpack Compose Wear OS Slider Example Output

5-Steppers

Some Stepper designs for smart watches.

The Stepper component allows users to make a selection from a range of values.

Jetpack Compose Wear OS Stepper Example

Jetpack Compose Wear OS Stepper Example Output

6-Cards

Some Card designs for smart watches.

The Card component contains content and actions about a single subject.

Jetpack Compose Wear OS Card Example

Jetpack Compose Wear OS Card Example Output

7-Progress Indicator

Some Progress Indicator designs for smart watches.

The CircularProgressIndicator component is a circular display of the length of a process or an otherwise unspecified wait time.

Jetpack Compose Wear OS Progress indicator Example

Jetpack Compose Wear OS Progress indicator Example Output

8-Dialogs

Some Dialogs designs for smart watches.

Use a Dialog to focus users' attention on a timely action or piece of information.

Jetpack Compose Wear OS Dialog Example

Jetpack Compose Wear OS Dialog Example Output

9-Lists

Some List designs for smart watches.

Lists are continuous, vertical indexes of elements. Use ScalingLazyColumn to create lists on Wear OS.

Jetpack Compose Wear OS List Example

Jetpack Compose Wear OS List Example Output

10-Time text

Some Time Text examples for smart watches.

TimeText is a layout that shows the current time at the top of the screen.

Jetpack Compose Wear OS Time Text Example

Jetpack Compose Wear OS Time Text Example Output

We’ve sampled the 10 key components Jetpack Compose has to offer for Wear OS! You can easily create designs using these components in your own projects.

Conclusion

As a result, we have experienced the most used Wear OS UI components with Jetpack Compose so far. With the help of these UI components, we can quickly design the interfaces of our own smartwatch applications. Furthermore, We can also use these components inside Scaffold, which Jetpack Compose offers exclusively for Wear OS.

I hope it was a useful article for you. Stay well!

References

Android Mobile App Developer Tools - Android Developers

Use Jetpack Compose on Wear OS | Android Developers