Crafting a Clock in Jetpack Compose with Canvas

WatchFace

In this blog, I will explain how we can implement this using the Compose Canvas API. I’ll also cover the mathematical concepts related to calculating coordinates on a circle and drawing shapes and text around those coordinates, Many of the formulas used here have been derived through trial and error, so understanding them at first can be challenging. However, I will simplify the explanations with diagrams to make them easier to grasp. I hope you enjoy reading this article.

TL;DR

GitHub - nikhil-mandlik-dev/watchface

Overview

1. Terminology
2. Drawing Second & Minute Dials
3. Drawing Hour Label
4. Drawing Minute-Second Overlay
5. Terminology

• Seconds and Minutes Dials: These are rotating circles on the watch face. Both dials are identical, except for their radius.
• Steps: The dials are divided into 60 steps, There are two types of steps normalStep and fiveStep.
• Step Labels: The fiveStep intervals are labelled with values such as [00, 05, 10…]
• Hour Label: The central label represents the hour of the day in a 24-hour format.
• Minutes-Second Overlay: To highlight the current minute and second, a rounded rectangle is positioned at the right center of the watch face.

2. Drawing Second & Minute Dial

This section is again divided into three subparts

• Understanding Dial
• Drawing steps
• Drawing steps labels

2.1 Understanding Dial

understanding dial

• Both the Second and Minute dials have the same number of steps but differ in their radius and rotation per second.
• The Second dial rotates 6 degrees every second, while the Minute dial also rotates 6 degrees every minute.
• Each dial consists of 60 normal steps and 12 five steps.
• The angle between two consecutive normal steps is 6 degrees.
• The angle between two consecutive five steps is 30 degrees.
• The line height of the five steps is greater than that of the normal steps to ensure proper separation.
• Five step labels, indicating values like [00, 05, 10…], are drawn with some padding called stepsLabelTopPadding.

2.2 Drawing steps

• To draw steps, we need the start and end offsets of each individual step, which can be calculated using the following formula

x = r * cos(θ)
y = r * sin(θ)

• However, the coordinate system of a circle is different from the coordinate system of the canvas, so we need to modify the above formula to obtain the x, y coordinates on the canvas.

x = center.x + r * cos(θ)
y = center.y - r * sin(θ)

• In the formula, we require the angle in radians. we can need to multiply angleInDegrees by π/180. Therefore, the modified formula becomes:

x = center.x + r * cos(angleInDegrees * (π / 180))
y = center.y - r * sin(angleInDegrees * (π / 180))

• each step rotates at a certain degree every second, so we will add a “rotation” state in the above formula, this state will be modify every second to rotate each step

x = center.x + r * cos((angleInDegrees + rotation) * (π / 180))
y = center.y - r * sin((angleInDegrees + rotation) * (π / 180))

2.3 Drawing steps labels

• To drawText on the canvas we need the topLeft offset of the position where we want to draw a text
• While calculating this we also need to consider a label width and height to properly position the label at the center of the step

Code Snippet and Output for Drawing Second & Minute Dial

Draw Steps and Labels Output

3. Drawing Hour Label

• To draw the overlay, we will utilize the path functions lineTo and cubicTo, which allow us to create rounded corners.
• When drawing the rounded corners, we need to consider the width of the minute and second labels, as well as the step size.

hour label

3. Drawing the Minute-Second Overlay

• To draw the overlay, we will utilize the path functions lineTo and cubicTo, which allow us to create rounded corners.
• When drawing the rounded corners, we need to consider the width of the minute and second labels, as well as the step size.

You can customize the clockStyle to update the labels fontFamily, size and colour according to your preference.

If you have any questions, suggestions, or ideas for improvement, please feel free to leave a comment. If you found the article helpful, don’t forget to clap and follow.

Thank You