Android Wear - how to draw custom UI for complication TYPE_RANGED_VALUE

Question

I have gone through the samples for creating a custom Android 2.0 watchface with support for complications. the document for ComplicationDrawable states that we can provide custom progressbars and use setRangedValueProgressHidden() to suppress the default UI.

Optional fields are not guaranteed to be displayed. If you want to draw your own progress bar, you can use the setRangedValueProgressHidden() method to hide the progress bar provided by the ComplicationDrawable class.

But I have been unable to find guides on how to draw the custom UI after setting the default progress bar to hidden. Any pointers will be highly appreciated.

Answer 1

There is no guide because there isn't a single/preferred way to do this. Here are a few steps to help you get started:

1) Create a Canvas and a Bitmap that are large enough to contain your custom progress bar:

Bitmap bitmap = Bitmap.createBitmap(width, height, Bitmap.Config.ARGB_8888);
Canvas canvas = new Canvas(bitmap);

2) Make sure that the complication has data to show, and that it is a ranged value complication. (You can access the complication data from the onComplicationDataUpdate(int complicationId, ComplicationData complicationData) method.):

if(complicationData != null && complicationData.getType() == ComplicationData.TYPE_RANGED_VALUE) {
    // TODO: Get progress data
}

3) Get the progress values from your ComplicationData object (all these fields are required):

float minValue = complicationData.getMinValue();
float maxValue = complicationData.getMaxValue();
float currentValue = complicationData.getValue();

4) Draw the progress in whatever way you want on your Canvas. Below is a simplified example from one of our watch faces.

// Calculate the start angle based on the complication ID. 
// Don't worry too much about the math here, it's very specific to our watch face :)
float startAngle = 180f + 22.5f + ((complicationId - 2) * 45f);

// Calculate the maximum sweep angle based on the number of complications.
float sweepAngle = 45;

// Translate the current progress to a percentage value between 0 and 1.
float percent = 0;
float range = Math.abs(maxValue - minValue);
if (range > 0) {
    percent = (currentValue - minValue) / range;

    // We don't want to deal progress values below 0.
    percent = Math.max(0, percent);
}

// Calculate how much of the maximum sweep angle to show based on the current progress.
sweepAngle *= percent;

// Add an arc based on the start and end values calculated above.
Path progressPath = new Path();
progressPath.arcTo(getScreenRect(), startAngle, sweepAngle);

// Draw it on the canvas.
canvas.drawPath(progressPath, getProgressPaint());

And here is the end result: