Android, draw clock with offset from center

Question

I am trying to achieve this WatchFace using Android API:

These are my paints used for Hours, Minutes and Seconds:

secondsPaint.setAntiAlias(true);
secondsPaint.setColor(Color.RED);
secondsPaint.setStyle(Paint.Style.STROKE);
secondsPaint.setStrokeJoin(Paint.Join.ROUND);
secondsPaint.setStrokeWidth(3f);
secondsPaint.setAntiAlias(true);
minutesPaint.setColor(Color.WHITE);
minutesPaint.setStyle(Paint.Style.STROKE);
minutesPaint.setStrokeJoin(Paint.Join.ROUND);
minutesPaint.setStrokeWidth(4f);
hoursPaint.setAntiAlias(true);
hoursPaint.setColor(Color.WHITE);
hoursPaint.setStyle(Paint.Style.STROKE);
hoursPaint.setStrokeJoin(Paint.Join.ROUND);
hoursPaint.setStrokeWidth(5f);

I have implemented the following code to draw the background, the seconds, minutes and hours:

// Background
canvas.drawBitmap(background, 0, 0, null);

Then I draw the hours and minutes

// Draw the minute and hour hands.
float minX = (float) Math.sin(minRot) * minLength;
float minY = (float) -Math.cos(minRot) * minLength;
canvas.drawLine(centerX, centerY, centerX + minX, centerY + minY, minutesPai
float hrX = (float) Math.sin(hrRot) * hrLength;
float hrY = (float) -Math.cos(hrRot) * hrLength;
canvas.drawLine(centerX, centerY, centerX + hrX, centerY + hrY, hoursPaint);

And finally the seconds

// draw seconds
float secX = (float) Math.sin(secRot) * secLength;
float secY = (float) -Math.cos(secRot) * secLength;
canvas.drawLine(centerX, centerY, centerX + secX, centerY + secY, secondsPaint);

I need to:

• create a circle in the middle of the screen and move the hours, minutes and seconds with few pixels from the center like the picture displayed.
• Make the seconds and minutes more "smooth" cause anti-aliasing is set but it does not work as expected

At the moment the result is the following:

Answer 1

To draw a circle is as just as easy as using drawCircle().
So, the dirty trick could be to draw the white one and another bigger one (and maybe even a smaller one) of the same background color to cover the portion of the minutes and second hands.

So, being drawn after the hands, these circles will cover the portion you want to hide.

A very cheap trick (no other trigonometry involved).
Works for sure.

You could even use a layer-list drawable to overlay in the center... ;)

But drawCircle() is quite straightforward, I guess.