Create a Watch Face for Android Wear. Part 1 : Setup

I recently built my first Android Wear Watch Face, Foto (Pronounced Photo) . Foto is a very easy to configure watch face that let users express their creativity by modifying various aspects of the watch face: background, font, text color and other things

I decided to use what I learned and create this “Create a Watch Face” series. We are going to create a very simple watch face that I decided to call Minimalist. Here are the list of features that watch face will offer:

• Simple interface: Time and Date and a color as a background, nothing fancy
• Users can configure the watch face: They can change the date and time format and the background color

Creating the project

1. Open Android Studio
2. Start New a new Android Studio Project
3. Enter the name and package name and click next
4. Make sure Phone And Tablet is checked and that Wear is checked with Minimum API set to API 21
5. Select Add No Activity for the Mobile Module and click next
6. Select Add No Activity for the Wear Module and click next

We selected Add No Activity for the wear and mobile modules because we want to create the bare minimum required at this point. The code generated by Android Studio for the watch face is “too noisy” in my opinion

After the basic setup we end up with something like this

Project Structure

The project is composed of 2 modules:

• mobile: Will contain the code related to that will be used for our companion app. The mobile module APK will be installed on our android phone / emulator when we package out app (More on that later)
• wear: Will contain the code related to the actual watch face . The wear module APK will be installed on our android wear device / emulator when we package out app

Android studio also added a couple dependencies to our build.gradle files

/mobile/build.gradle

/wear/build.gradle

‘com.google.android.support:wearable:+’: Contains widgets created by google optimized for Android Wear.

‘com.google.android.gms:play-services-wearable:+’: Library containing the APIs necessary to connect and communicate with the wear

There is another very important line in the mobile module’s build.gradle:

wearApp project(‘:wear’) Tells Gradle and Android Studio what module is the Android Wear module for our app. Remember that the wear module is the module that will be installed when packaging our app . This line basically tells gradle what module to push to the wear device

Now that we have our project created, we can start creating out watch face ! The next article will talk about the basics of building and drawing the watch face.

The source code for that watch face is available on Github and will be updated as we go through concepts in this tutorial

Thanks for reading my article If you liked that article, please hit that heart button and share the article with others.

You can also checkout Foto on the Google Play Store: https://play.google.com/store/apps/details?id=io.github.charly1811.android.watchface.foto

You can reach me on twitter at @celoubao or by email charlesloubao95@gmail.com