How to resize images for different WatchFaces

Hello all,

i've created a watch face for the fenix3 with a transparent background image. The Layout gives the user the posibility to change the background color via app so that the "logo" is displayed in his favorite color.
Now i want to create a multi clock watchface, and i am calculation the positions by dipslay size. My Background image has the size of 218x218 and my questions is if it give a posibility to resize the image so that it fits with the device size or must i create a new one for every size?

Do you have some nice ideas for it?

thx, bensch

Code - drawablse.xml

<drawables>

    <bitmap id="LauncherIcon" filename="launcher_icon.png" />

    <bitmap id="id_background" filename="runner.png"  />

</drawables>

function onLayout(dc) {

    	image = Ui.loadResource(Rez.Drawables.id_background);

        setLayout(Rez.Layouts.WatchFace(dc));

        color = App.getApp().getProperty("BackgroundColor");

    }

Backgroundcolor and image inseting:

function onUpdate(dc) {        

	dc.setColor(Gfx.COLOR_TRANSPARENT, color);

        dc.clear();

        dc.drawBitmap(0, 0, image);

HermoT over 9 years ago

You have to create new sizes manually.
The SDK provides no support for image processing.
You can then copy the relevant images to the desired resources folder for each device.

Former Member over 8 years ago

Hello all,

i've created a watch face for the fenix3 with a transparent background image. The Layout gives the user the posibility to change the background color via app so that the "logo" is displayed in his favorite color.
Now i want to create a multi clock watchface, and i am calculation the positions by dipslay size. My Background image has the size of 218x218 and my questions is if it give a posibility to resize the image so that it fits with the device size or must i create a new one for every size?

Do you have some nice ideas for it?

thx, bensch

Code - drawablse.xml
<drawables> <bitmap id="LauncherIcon" filename="launcher_icon.png" /> <bitmap id="id_background" filename="runner.png" /> </drawables>

function onLayout(dc) { image = Ui.loadResource(Rez.Drawables.id_background); setLayout(Rez.Layouts.WatchFace(dc)); color = App.getApp().getProperty("BackgroundColor"); }
Backgroundcolor and image inseting:
function onUpdate(dc) { dc.setColor(Gfx.COLOR_TRANSPARENT, color); dc.clear(); dc.drawBitmap(0, 0, image);

Hi. I am new developer wanting to create a watchface. Im trying to find a guide on setting up the background using an image. Is this the piece of code used for background image? and do i need to create a new .xml file?

Cheers!