The Watch Face Format is required for watch faces to be installed on devices with Wear OS 5 or later pre-installed and for all new watch faces published on Google Play.
Starting in January 2026, the Watch Face Format will be required for watch faces to be installed on all Wear OS devices.
Learn more about the user-facing changes in this Help Center article.
Draw a watch face
Stay organized with collections
Save and categorize content based on your preferences.
After you configure your project and add a class that implements the
watch face service, you can start writing code to initialize and draw your
custom watch face.
Every watch face creates a custom subclass of a renderer that implements
everything needed to draw the watch face.
The renderer combines the
UserStyle
, the
complication information from
ComplicationSlotsManager
,
the current time, and other state information to
render the watch face, as shown in the following example:
class CustomCanvasRenderer(
private val context: Context,
surfaceHolder: SurfaceHolder,
watchState: WatchState,
private val complicationSlotsManager: ComplicationSlotsManager,
currentUserStyleRepository: CurrentUserStyleRepository,
canvasType: Int
) : Renderer.CanvasRenderer(
surfaceHolder = surfaceHolder,
currentUserStyleRepository = currentUserStyleRepository,
watchState = watchState,
canvasType = canvasType,
interactiveDrawModeUpdateDelayMillis = 16L
) {
override fun render(canvas: Canvas, bounds: Rect, zonedDateTime: ZonedDateTime) {
// Draw into the canvas
}
override fun renderHighlightLayer(canvas: Canvas, bounds: Rect, zonedDateTime: ZonedDateTime) {
// Draw into the canvas
}
}
Content and code samples on this page are subject to the licenses described in the Content License. Java and OpenJDK are trademarks or registered trademarks of Oracle and/or its affiliates.
Last updated 2025-08-27 UTC.
[[["Easy to understand","easyToUnderstand","thumb-up"],["Solved my problem","solvedMyProblem","thumb-up"],["Other","otherUp","thumb-up"]],[["Missing the information I need","missingTheInformationINeed","thumb-down"],["Too complicated / too many steps","tooComplicatedTooManySteps","thumb-down"],["Out of date","outOfDate","thumb-down"],["Samples / code issue","samplesCodeIssue","thumb-down"],["Other","otherDown","thumb-down"]],["Last updated 2025-08-27 UTC."],[],[],null,["After you configure your project and add a class that implements the\nwatch face service, you can start writing code to initialize and draw your\ncustom watch face.\n\nEvery watch face creates a custom subclass of a renderer that implements\neverything needed to draw the watch face.\n\nThe renderer combines the\n[`UserStyle`](/reference/androidx/wear/watchface/style/UserStyle), the\ncomplication information from\n[`ComplicationSlotsManager`](/reference/androidx/wear/watchface/ComplicationSlotsManager),\nthe current time, and other state information to\nrender the watch face, as shown in the following example: \n\n class CustomCanvasRenderer(\n private val context: Context,\n surfaceHolder: SurfaceHolder,\n watchState: WatchState,\n private val complicationSlotsManager: ComplicationSlotsManager,\n currentUserStyleRepository: CurrentUserStyleRepository,\n canvasType: Int\n ) : Renderer.CanvasRenderer(\n surfaceHolder = surfaceHolder,\n currentUserStyleRepository = currentUserStyleRepository,\n watchState = watchState,\n canvasType = canvasType,\n interactiveDrawModeUpdateDelayMillis = 16L\n ) {\n override fun render(canvas: Canvas, bounds: Rect, zonedDateTime: ZonedDateTime) {\n // Draw into the canvas\n }\n\n override fun renderHighlightLayer(canvas: Canvas, bounds: Rect, zonedDateTime: ZonedDateTime) {\n // Draw into the canvas\n }\n }"]]