On first April 2016 I printed Something O’Clock, a wrist watch face application for app developer Put on, to experience Store. The application is lighthearted anyway (due to the date of publication), it enables the consumer to create time to “beer o’clock”, or “sleep o’clock”, or perhaps “burger o’clock”. Even though the application is quite lighthearted the code behind it deserves study and, within this series we’ll check out various facets of developing custom watch faces for Android Put on. In the following paragraphs we’ll consider the layout and drawing from the watch face.
round_put on_screenshotThe image implies that the timepiece face includes two products of test: the “something” (which may be one of a variety of words), and also the “o’clock” (which remains static). They are attracted one over the other, and both of them are sized to complement the width from the displayable area. So before we are able to really begin positioning them we have to know for sure area, which is where InsetCalculator is available in – its function is to look for the insets:
So we’ve got some fundamental inspections to find out if the bounds have altered because we last calculated the insets – let’s avoid wasting processor cycles if nothing has altered. When there exists a square display situations are pretty easy – we simply possess a fixed inset in the edge which we have from the dimen value.
It’s a bit more complex for circular shows – think about the following diagram:
The dotted square may be the biggest possible square which could fit inside the circle from the display, which is what we have to calculate. The inset that app developer thinking about is the size of the dotted red line labelled ‘i’. To calculate this we first must find the size of the solid red line which runs in the fringe of the square towards the center from the circle. Pythagoras might help us here. We all know the diameter from the circle (it’s the width from the circle bounds), and also the radius is 1 / 2 of this. When we draw nowhere line ‘R’ (the radius) at 45° towards the horizontal we obtain a triangular proven. The dotted eco-friendly and solid red sides are identical length, so we can determine these by squaring the radius, dividing it by two, and locating the square cause of that. When we now take away this in the radius we obtain the inset value ‘i’:
i = R – v(R²/2)
That’s just what we’re doing in calculateRoundInset(). By using this inset to every side from the bounding rectangle we obtain the region denoted through the dotted square.