Work with images
Stay organized with collections
Save and categorize content based on your preferences.
Using images in your watch face can really help bring it to life, from a
full-screen background image to individual detail images to add interest.
Place your image resources in the res/drawable folder, for example
res/drawable/face.png, and then reference the image as follows:
<PartImage x="100" y="100" width="250" height="250">
<Image resource="face"/>
</PartImage>
The PartImage element, as with other containers in Watch Face Format,
can be modified in
many ways, including being scaled, rotated, transformed, tinted, or masked.
See the PartImage reference for more information.
Vary the background
One effect that can provide interest is to change the background every hour.
This can be achieved through the use of the Images element, for example:
<PartImage ...>
<Images change="ON_NEXT_HOUR">
<Image resource="background1"/>
<Image resource="background2"/>
...
</Images>
</PartImage>
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-05-20 UTC.
[null,null,["Last updated 2025-05-20 UTC."],[],[],null,["# Work with images\n\nUsing images in your watch face can really help bring it to life, from a\nfull-screen background image to individual detail images to add interest.\n\nPlace your image resources in the `res/drawable` folder, for example\n`res/drawable/face.png`, and then reference the image as follows: \n\n \u003cPartImage x=\"100\" y=\"100\" width=\"250\" height=\"250\"\u003e\n \u003cImage resource=\"face\"/\u003e\n \u003c/PartImage\u003e\n\nThe `PartImage` element, as with other containers in Watch Face Format,\ncan be modified in\nmany ways, including being scaled, rotated, transformed, tinted, or masked.\nSee the [`PartImage`](/training/wearables/wff/group/part/image/part-image) reference for more information.\n\n### Vary the background\n\nOne effect that can provide interest is to change the background every hour.\nThis can be achieved through the use of the `Images` element, for example: \n\n \u003cPartImage ...\u003e\n \u003cImages change=\"ON_NEXT_HOUR\"\u003e\n \u003cImage resource=\"background1\"/\u003e\n \u003cImage resource=\"background2\"/\u003e\n ...\n \u003c/Images\u003e\n \u003c/PartImage\u003e"]]
