Android Wear smartwatch face in 15 min

Android Wear smartwatch face in 15 min
8 June 2016 Pawel Cyron

This tutorial will show you how to create your customized Android Wear Watch Face app for your smartwatch in 15 minutes with Android Studio.

It is very important in developing Android Wear Watch Face is to make time visible and take care of separating ambient mode from normal active state.

Watch Face is basically a service in your wear module.

New project in Android Studio.

IMPORTANT!

If you want to add watch face feature into existing project, skip creating new project. Add wear module to your app or if you have it already, add/create CanvasWatchFaceService and change it to fit your needs. Last thing you will need is to expand build.gradle with dependencies and manifest.xml with service part. For example how to do it, visit our github link below.

android studio

Then select a Wear platform and unselect Phone and Tablet
android studio
Next choose €œWatch Face€ from €œAdd an Activtiy to Wear€ creator, and click Next.

android studio

In Customization of Activity lets choose Digital Style and unselect Interactive option as we don’t want to add any onClick funcionality to watch face.

After clicking finish, our project will be created and gradle synchronized.

NOTE! That can take a while, so feel free to make coffee.

Now we have created simple watch face project with black background and white digital clock by default.  Lets customize it a bit.

Customization

Add to project drawables 3 .png files for background. 320×320 px will work perfectly. You may use more backgrounds to use different one for round face, but we will use same in this tutorial. Remember to leave additional padding for round face if you are using one file for both watch types.

One for active state in which we will update seconds.

watch face image

One in grey scale for ambient mode.

watch face image ambient

And one for preview.

This one , user will see while changing watch face.
android wear

To assign it, edit AndroidManifest.xml with your file name.

image06

In code change:

code blablabla

Now add instruction to onAmbientMode() to change drawable background depending on current state. It is really important to manage both states seperatly since Android Wear is removing color elements from drawable in Ambient Mode.

image02

Thats all. Your watch face is ready. Now it’s time to customize it, by changing position of time text field, or changing font. In Github repository we have an additional field to display.

https://github.com/GeeksDeck/Android-Watch-Face

Helpfull link:

https://developer.android.com/training/wearables/watch-faces/index.html

Thanks for visiting! If you have any question, feel free to ask in comments!

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*