Create a Watchface for Android Wear. Part 3: Time, Date and Background
In Part 1 of this tutorial we learned how to setup an android wear watchface project, In Part 2 we learned the basics of drawing the watchface using a Canvas and a Paint object . And with that knowledge we were able build this wonderful watch face below:
However we need to make the watch face more informative for our users because not everyone is able to read the current time in millisecond .
To format the time and date properly we are going to use SimpleDateFormat objects . There are many ways to format the time and date on android but SimpleDateFormat in my opinion offers more control over how the time is actually formatted. For the complete documentation about SimpleDateFormat click here
What we need to do first is to create 2 SimpleDataFormat objects: one for the time and one for the date
We initialize our SimpleDateFormat objects in onCreate because this method is called once, when the watch face has been selected by the user. It is the best place to initialize any object that we will use later for the drawing.
The SimpleDateFormat constructor takes 2 arguments: The pattern used to format the time and the Locale of the device . The patterns is a string composed of letters representing different ways to display the time. The syntax can be compared just like String.format() uses a pattern to format the text, SimpleDateFormat also uses a pattern to format the time, for a complete list of all available options check the documentation . The patterns we used in this tutorial format the date and time in the following format:
- Date Format EEEE MMMM dd -> Thursday October 13
- Time Format: HH:mm -> 14:57 (24 Hours format)
We then create a new Paint object for the date Why 2 Paint objects ? We can still achieve it the same with one Paint but we 2 Paint we have more flexibility when it come to configure each text element . The next step is to get the time and the date formatted to Strings
First we create a date string and a time string. SimpleDateFormat.format() will format the time in millisecond according to the pattern we specified.
The next step is to figure out the X and Y coordinates of our strings. Think of your watch screen as the following square. Think of your watch screen as the following square
The point represents middle of screen. Since we want the date below the time and we want both bot texts in the middle of the screen , we will draw the time above the horizonal line and the date below the horizontal line .
The time and date are displayed but now the text is too small. To make the text bigger, all we have to do is to change the text size for the date Paint and the time Paint
We want the time size to be 36DP and the date size to be 14DP. However Paint.setTextSize() parameters must be in pixels so what we do here is converting 36 DP into PX and 14 DP into PX using TypedValue.applyDimension() . That method takes the unit to convert from (In our case Density-independent Pixel or DP) and the value to convert pixels.
There are other ways to do convert from pixels independent units (DP, SP, PT, etc) to pixels such as storing the dimensions into an xml file and retrieving them using getResources().getDimensionPixelSize(resID)
After applying the correct dimensions our time and date are more visible:
The time and date are to close from each other so we are going to add some margin between them . Our margin is equal to:
MARGIN = 2% OF WATCH HEIGHT
We are using percents here so that we can be sure that the space between our texts will be the same on every watch
When drawing element on the watch face it is recommended to use relative measurement (Like percentages) for positioning to make sure that the position of elements will be almost the same on every watch
The final step is to draw the watchface background color , time and date
It is important to draw the background before before the text because the drawing is applied to the canvas in the order the statements are written.
Now we have a nice background for our watch face
Our watch face is almost functional but the time is not updated every minute . To fix that all we have to do is to update our time variable. The best way to update our time variable is to override the Engine.onTimeTick() method . Engine.onTimeTick() is called by the system every minute so it is the best moment to update the time our watchface displays
Calling the invalidate() method will force the watchface to be re-drawn which will update the time displayed .
Now our watchface displays the time, the date and has a nice background . In the next article will learn how to create a configuration activity to allow users to customize 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
