Newbie struggling to set background color

I'm trying to set the background colour of the screen in a Watchface app.

I've tried setting background color in the layout xml file like this:

<layout id="WatchFace" background="Gfx.COLOR_RED">

I've tried it explicitly in onUpdate like this:

var currentBackgroundColor = Gfx.COLOR_RED;

dc.setColor(Gfx.COLOR_WHITE, currentBackgroundColor);

dc.clear();

I've even tried creating the project with the settings option and editing the settings/properties.xml file
<property id="BackgroundColor" type="number">0x0000FF</property>

Nothing I do changes the background colour from black :( I'm doing this in the simulator on the Vivoactive. Can anyone provide any guidance?

travis.vitek over 8 years ago

If you are using a layout, it will automatically clear the screen to black when you call View.onUpdate().

You have two options. You can update the layout to have a drawable that fills the screen in the color you want, or you can skip the code that clears the screen and draw the background in the color.

The first option is really easy if you only want to support a single static color. Just add a drawable in the resource that draws a full screen rectangle in the color you want. You could make a custom drawable that allows you to set the color as well, but that requires a bit more code, more memory, and updates to the resource file.

The second solution is pretty easy. You write something like this in onUpdate()...

dc.setColor(Gfx.COLOR_RED, Gfx.COLOR_RED);

dc.clear();



for (var i = 0; i < mLayout.size(); ++i) {

  mLayout.draw(dc);

}

TeunMo over 8 years ago

You need to either use the layout system or draw the screen.

If you draw the screen, you can use

var bgColor = Gfx.COLOR_RED;

dc.setColor(Gfx.COLOR_WHITE, bgColor);

dc.clear();

inside the onUpdate method, but if you have set a layout and call View.onUpdate(dc) after clearing the screen, the layout system will draw over it and set the background color. So you can only use this is you draw the whole screen and/or use drawable-list objects.

If you want to use the layout system, you can either use a custom drawable (see the complex data field template) as background or use a drawable list:

<layouts>

        <layout id="MainLayout">

                <drawable id="background" />

        </layout>

</layouts>



<drawables>

        <drawable-list id="background">

                <shape type="rectangle" x="0" y="0" width="fill" height="fill" color="Gfx.COLOR_RED" />

        </drawable-list>

</drawables>