Developing a Simple Analog Android Wear Watch Face – Tutorial

Android Studio is a powerful IDE for Android and Android Wear developers. After you set up your development environment like in this post, you are ready to develop Android Wear watch face.
Before you start make sure that you installed the latest version of Android Studio. And also try to shoot a glance at design basics published by Google(https://developer.android.com/training/wearables/watch-faces/designing.html).

 

Create a new Android Wear project.And select “Android Wear” as your target device.project detailsNext step, select “Watch Face” template for your project.After that Android Studio will ask you whether you want to create analog or digital watch face.I am going to tutorial about analog watch face in this post.So select analog. Android Studio will create a sample project. Try to run this project with your emulator and see the results.

In the template project analog hands are simple lines created with Paint class.

But first thing I had in mind is drawing analog hands with bitmaps.Because with paint class I can do limited face designs.So basically I wanted to design a watch face with analog hand bitmaps on it.I search for some analog hand images on the internet.I found these. You can change them or use them of course.

To design a watch face, you should start playing with onDraw method. There are two important parameters ; canvas and its bounds.In every time interval you defined here ;

onDraw method is called.So everything you draw on this method represents a moment of time.For the instance above,the moment is a second.

Let’s start with drawing “second hand”.

Use matrix, because rotation operations are needed for all of the analog hands.Post rotate method is very useful here because we need to determine a center for the rotation.Like pinning it from the turning point of analog hand.After determining analog hands turning point, we should decide where to put it on the canvas(on the watch).We will use post translate method for achieving it.

I’d like to put it on the center of the watch :).These little modifications(centerX-sec.getWidth()/2) are for aligning the turning point to canvases center location.And for the rotation degrees; there is 60 seconds on analog watch.So divide 360/60=6. Every second is 6 degrees far away from each other.Therefore rotate “second hand” every second by 6 degrees.

This implementation is eligible for other analog hands (hour hand and minute hand).The only difference is rotation degree.For the minute degree must be 6 again and for the hour degree must be 30.

Ambient mode is pretty important phase for watch face design.Because of the battery limitation on smartwatches, you should be economical about battery consumption.

In onDraw method you should check “mAmbient” boolean to change appearance.Generally on ambient mode “second hand” is not supposed to be drawn and background must be black as much as possible.

Conclusion;

You can add hour and minute symbols or use a different background to change the look.After developing your first watch face, it should be like this :

watch face

You can get full project source from github.

5 thoughts on “Developing a Simple Analog Android Wear Watch Face – Tutorial”

  1. Hello

    thanks for your example, I have a question.
    As I can get that hour as they are moving the minute also moves, I mean I do not jump every hour.

    Regards.

      1. Thank you

        Not if you understood but would like this?

        if (minutes 5% == 0){
        mat2.postRotate(((((mTime.hour * 30/12)) % 360)), hour.getWidth() / 2, hour.getHeight() – hour.getWidth() / 2);
        mat2.postTranslate(centerX – hour.getWidth() / 2, centerY – hour.getHeight() + hour.getWidth()/2);
        canvas.drawBitmap(hour, mat2, mHandPaint);
        }

Leave a Reply

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