Developing WearOS App for the First Time
This post will outlay some thoughts and describe how the development of a WearOS application was for a person with no previous experience in Kotlin, Android nor WearOS.
When one lacks prior experience, it is quite common to head out to the documentation.
I was pleased to see that WearOS and Android in general has really great documentation but this didn’t come as a huge surprise.
Though the documentation was great, there were some obstacles.
The Plan
The application to be developed was more of a prototype to test building layouts. The data to be used were to be just test data. The application were to have three views:
- A general view where the user could see overall points of their activity. It should essentially be constructed of simple text elements and some kind of visualization.
- A more detailed single-day view where user could see what kind of activities the user did during the day. The activities were to be visualized around the watch face and textual info were to be in the middle of the display.
- A similar view to the second view except instead of a single day, it would represent past week. It were to be visualized the same way as the second view except that instead a single day, there would be seven days visualized.
Libraries, Toolkits & Prerequisites
Before the WearOS application I hadn’t even peeked into Android development and this fact slowed the development quite a lot since most of the official guides to WearOS assumes previous experience in Android development, especially with Jetpack and Jetpack Compose. Shortly put Jetpack is a suite of libraries. It is pretty much an essential tool in Android development if one wants to create Android applications with modern approach. Compose is a UI toolkit which came around few years ago. Most of the official guides from Google recommends to use declarative approach of Compose instead of using older View-based UI design which relies on XML. Seasoned Android developers should also note that there are slight differences between Compose for Android and Compose for WearOS since the latter includes libraries that are Wear-specific.
Gathering the UI Elements
The requirements specification had three views that needed to be implemented like explained in the beginning of the post. It was pleasant to find that Jetpack Compose has a lot of UI-elements that can be easily added in a declarative way.
The first view didn’t have anything too special in it. It could be done entirely with Compose elements.
However, for the second view I needed some elements that were not included in the Compose toolkit. The visualization described in the second and third requirement was supposed to be a segmented bar around the clock face where each segment would represent an activity type (walking, running, sleeping…). Compose didn’t have an element that would be able to create the needed view. Luckily there is a group of libraries called Horologist. Google describes the libraries in the following way:
Horologist is a group of libraries that aim to supplement Wear OS developers with features that are commonly required by developers but not yet available.
The Horologist has a Composables library which includes something called Segmented Progress Indicator. With this I was able to create a segmented activity visualization.
The segments are placed in a way that they represent time as well in a 24h analog clock where 00:00 would be north, 06:00 would be east, 12:00 would be south and 18:00 would be east.
The top shows two separate sleeping segments. The reason for this is that the day starts at 00:00 while the user was asleep and before 00:00 the user starts to sleep. They are sleep segments that started on different days.
The rest of the elements which appear center of the screen are just basic components from the Compose toolkit.
The third view was a little trickier since it needed to have stacked up segmented progress bars. In the end it was pretty painlessly implemented with some padding and adjusting the bar width.
Figuring Out The Navigation
A WearOS device has a different navigation flow from a common Android mobile device. Navigation was pretty tricky to implement since I lacked prior Android development experience and the navigation guide required some previous knowledge. In the end I found out that I couldn’t get the navigation to work like planned by using plain Compose (at least with my current Compose knowledge). I found a group of libraries called Accompanist. Google describes the libraries the same way as they describe Horologist libraries:
Accompanist is a group of libraries that aim to supplement Jetpack Compose with features that are commonly required by developers but not yet available.
… The goal of these libraries is to upstream them into the official toolkit, at which point they will be deprecated and removed from Accompanist.
The Accompanist has something called HorizontalPager. With HorizontalPager I was able to create horizontal navigation as planned:
Conclusion
Though the UI was relatively simple to implement for me with the help of Jetpack and Jetpack Compose, it required quite a lot of reading documentation about WearOS, Android, Jetpack, Compose and Kotlin.
In my personal opinion the Compose toolkit seems to be lacking some pretty useful libraries regarding WearOS specific needs but it seems that more often needed features are introduced at some point if projects like Horologist and Accompanist are to be included to the Compose for WearOS itself.
I believe that developers with Android experience can develop WearOS apps relatively easily especially when Compose is more feature complete regarding WearOS.
Links and resources
In the order of appearance