layout.xml background color

This hasn't working in any of the released SDKs (since version 0.24).

:confused: I wonder why I find it everywhere in documentation (Programmers Guide) and in Examples... Does it have an effect on actual devices or is it everywhere ignored?

How should I than set the background color? Drawing a huge shape?

<drawable-list id="BgFill" x="0" y="0" foreground="Gfx.COLOR_WHITE">

<shape type="rectangle" width="fill" height="fill" />

</drawable-list>
<layout id="LayoutWithBg">

<drawable id="BgFill" />

<!-- <label ... /> -->

</layout>

Thank you, that does the trick very well!

The best way to handle this is by using a drawable as a background as Sharkbait suggested (internally a background is just drawing a big shape). This is a known problem and there's a fix in the works but recently there's just been more focus on getting Connect IQ into device updates. We'll have an improved compiler/drawable system down the road. The thread/quote below explains a bit more.

Travis, thanks for your input. At some point in the future we will need to redesign bits of the drawables section of the resource compiler (admittedly the drawable-list came into existence before the concept of a Drawable object did). We have a task in our back log to redo this part of the resource compiler.

In most cases I just do my drawing directly in onUpdate(dc). This allows me to adapt dynamically to size differences in the various watches, changes in the content, changes of colors, etc.

Please note that the layouts are actually translated into MC so the two different approaches will take almost the same amount of memory.

Dang it..

Spent 1 hour trying to figure out how come the background is always black no matter what I do.
and here I am trying to learn how to get layouts to work or how it functions and stumble into obscure idiosyncrasies like these.

BAH!!

Now I have succeeded, it's giving me another headache.
how do I dynamically change the BG / FG colour based on user input?

I used to do dc.setcolor(FG,BG) and be done (via user selection menu)
but now that I'm going to use a drawable, how does one go about changing / altering the background color?

var bgfill = View.findDrawableById("BgFill") ;
bgfill.setcolor(Gfx.COLOR_BLACK,Gfx.COLOR_WHITE);


does not work

I've written a working example to demonstrate how to do this. You can find it here.

As you have seen above, you can define a drawable-list to define the background color for your app. You can also use the drawable-list to define other background effects (lines, circles, rectangles, polygons, ...). You can also use variable names in drawable-list element values to inject color as you see fit. Consider the following code.

// this is just a declaration of some colors and their default values
module Colors
{
var BACK_COLOR = Gfx.COLOR_WHITE;
var FORE_COLOR = Gfx.COLOR_BLUE;
var TEXT_COLOR = Gfx.COLOR_BLACK;
}


I then use these variables to describe my layout. Notice the color attribute values refer to the above variables...

<layouts>
<drawable-list id="MainLayout_fill">
<shape type="rectangle" x="0" y="0" width="fill" height="fill" color="Colors.BACK_COLOR"/>
<shape type="rectangle" x="0" y="72" width="fill" height="5" color="Colors.FORE_COLOR"/>
<shape type="rectangle" x="100" y="0" width="5" height="fill" color="Colors.FORE_COLOR"/>
</drawable-list>

<layout id="MainLayout">
<drawable id="MainLayout_fill" />
<label id="Label0" text="Label" x="2" y="1" color="Gfx.COLOR_BLACK" font="Gfx.FONT_SMALL" justification="Gfx.TEXT_JUSTIFY_LEFT" />
<label id="Value0" text="12.34" x="51" y="27" color="Gfx.COLOR_BLACK" font="Gfx.FONT_NUMBER_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" />


The next problem is getting the labels to use the user-specified color. This is a little trickier because the label element generates a Ui.Text in the runtime layout definition. Since the text color is cached, you need to update it when the attribute may have changed. You can do this by making a View class (and using it as a base for all of your other view classes) like so...

class ColorsView extends Ui.View
{
// if you are using this as a base class, you wouldn't implement this here...
function onLayout(dc) {
setLayout(Rez.Layouts.MainLayout(dc));
}

function onShow() {

// change the font color for every Ui.Text in the layout
for (var i = 0; i < mLayout.size(); ++i) {

if (mLayoutinstanceof Ui.Text) {
mLayout.setColor(Colors.TEXT_COLOR);
}
}
}

function onUpdate(dc) {
View.onUpdate(dc);
}
}
[/code]

Travis

7738

class ColorsView extends Ui.View
{
// if you are using this as a base class, you wouldn't implement this here...
function onLayout(dc) {
setLayout(Rez.Layouts.MainLayout(dc));
}

function onShow() {

// change the font color for every Ui.Text in the layout
for (var i = 0; i < mLayout.size(); ++i) {

if (mLayoutinstanceof Ui.Text) {
mLayout.setColor(Colors.TEXT_COLOR);
}
}
}

[/code]

what's mLayout? I don't see this array being declared anywhere.

According to the API Doc
- (Object) setLayout(layout)

Use setLayout() to set the layout for the View. If the extending class does not override onUpdate(), then all Drawables contained in layout will automatically be drawn by the View.

Parameters:
layout (Array) — An array of Drawables


the output is an array. Is this a shortcut to call? (much like i+=1 or the like?)

After some experimenting, seems like the array will be comprised of all the "lines" in the layout xml file???? (Seems true if I count it correctly - per bold below)

eg
Sys.println("Layout Size: " + mLayout.size());
for (var i = 0; i < mLayout.size(); ++i) {
Sys.println("Layout Value[" + i + "]: " + mLayout);[/B]
if (mLayoutinstanceof Ui.Text) {
mLayout.setColor(Colors.TEXT_COLOR);
[/code]

i get an 9 sized array


Layout Size : 9
Layout Value[0]: Obj: 514816
Layout Value[1]: Obj: 479360
Layout Value[2]: Obj: 4687808
Layout Value[3]: Obj: 2594432
Layout Value[4]: Obj: 4688000
Layout Value[5]: Obj: 2493376
Layout Value[6]: Obj: 447744
Layout Value[7]: Obj: 461248
Layout Value[8]: Obj: 477312




<resources>
<string id="AppName">Colors</string>
<bitmap id="LauncherIcon" filename="images/launcher_icon.png" />

<layouts>
[1] <drawable-list id="MainLayout_fill">
<shape type="rectangle" x="0" y="0" width="fill" height="fill" color="Colors.BACK_COLOR"/>
<shape type="rectangle" x="0" y="72" width="fill" height="5" color="Colors.FORE_COLOR"/>
<shape type="rectangle" x="100" y="0" width="5" height="fill" color="Colors.FORE_COLOR"/>
</drawable-list>

<layout id="MainLayout">
<drawable id="MainLayout_fill" />
[2]<label id="Label0" text="Label" x="2" y="1" color="Gfx.COLOR_BLACK" font="Gfx.FONT_SMALL" justification="Gfx.TEXT_JUSTIFY_LEFT" />
[3]<label id="Value0" text="12.34" x="51" y="27" color="Gfx.COLOR_BLACK" font="Gfx.FONT_NUMBER_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" />

[4]<label id="Label1" text="Label" x="107" y="1" color="Gfx.COLOR_BLACK" font="Gfx.FONT_SMALL" justification="Gfx.TEXT_JUSTIFY_LEFT" />
[5]<label id="Value1" text="56.78" x="156" y="27" color="Gfx.COLOR_BLACK" font="Gfx.FONT_NUMBER_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" />

[6]<label id="Label2" text="Label" x="2" y="78" color="Gfx.COLOR_BLACK" font="Gfx.FONT_SMALL" justification="Gfx.TEXT_JUSTIFY_LEFT" />
[7]<label id="Value2" text="90.12" x="51" y="104" color="Gfx.COLOR_BLACK" font="Gfx.FONT_NUMBER_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" />

[8]<label id="Label3" text="Label" x="107" y="78" color="Gfx.COLOR_BLACK" font="Gfx.FONT_SMALL" justification="Gfx.TEXT_JUSTIFY_LEFT" />
[9]<label id="Value3" text="34.56" x="156" y="104" color="Gfx.COLOR_BLACK" font="Gfx.FONT_NUMBER_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" />
</layout>
</layouts>
</resources>


come to think of it, the setlayout(...) is only referring to the MainLayout "layout" XML text. Which should only mean that it is only counting whatever is within the <layout id = "MainLayout"> tag
<resources>
<string id="AppName">Colors</string>
<bitmap id="LauncherIcon" filename="images/launcher_icon.png" />

<layouts>
<drawable-list id="MainLayout_fill">
<shape type="rectangle" x="0" y="0" width="fill" height="fill" color="Colors.BACK_COLOR"/>
<shape type="rectangle" x="0" y="72" width="fill" height="5" color="Colors.FORE_COLOR"/>
<shape type="rectangle" x="100" y="0" width="5" height="fill" color="Colors.FORE_COLOR"/>
</drawable-list>

<layout id="MainLayout">
[1] <drawable id="MainLayout_fill" />
[2]<label id="Label0" text="Label" x="2" y="1" color="Gfx.COLOR_BLACK" font="Gfx.FONT_SMALL" justification="Gfx.TEXT_JUSTIFY_LEFT" />
[3]<label id="Value0" text="12.34" x="51" y="27" color="Gfx.COLOR_BLACK" font="Gfx.FONT_NUMBER_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" />

[4]<label id="Label1" text="Label" x="107" y="1" color="Gfx.COLOR_BLACK" font="Gfx.FONT_SMALL" justification="Gfx.TEXT_JUSTIFY_LEFT" />
[5]<label id="Value1" text="56.78" x="156" y="27" color="Gfx.COLOR_BLACK" font="Gfx.FONT_NUMBER_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" />

[6]<label id="Label2" text="Label" x="2" y="78" color="Gfx.COLOR_BLACK" font="Gfx.FONT_SMALL" justification="Gfx.TEXT_JUSTIFY_LEFT" />
[7]<label id="Value2" text="90.12" x="51" y="104" color="Gfx.COLOR_BLACK" font="Gfx.FONT_NUMBER_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" />

[8]<label id="Label3" text="Label" x="107" y="78" color="Gfx.COLOR_BLACK" font="Gfx.FONT_SMALL" justification="Gfx.TEXT_JUSTIFY_LEFT" />
[9]<label id="Value3" text="34.56" x="156" y="104" color="Gfx.COLOR_BLACK" font="Gfx.FONT_NUMBER_MEDIUM" justification="Gfx.TEXT_JUSTIFY_CENTER" />
</layout>
</layouts>
</resources>



It seems right - using the Layouts example code
class LayoutsView extends Ui.View {

//! Load your resources here
function onLayout(dc) {
setLayout(Rez.Layouts.MainLayout(dc));
}

//! Restore the state of the app and prepare the view to be shown
function onShow() {
Sys.println("\nLayout Size: " + mLayout.size());
for (var i = 0; i < mLayout.size(); ++i) {
Sys.println("Layout Value[" + i + "]: " + mLayout);
}
}

[/code]

Layout Size: 6
Layout Value[0]: Obj: 2595776
Layout Value[1]: Obj: 2604160
Layout Value[2]: Obj: 508864
Layout Value[3]: Obj: 2603008
Layout Value[4]: Obj: 4671232
Layout Value[5]: Obj: 439360

<layout id="MainLayout" background="Gfx.COLOR_LT_GRAY">
<drawable id="ne_n" />
<drawable id="clock_ticks" />
<label x="92" y="0" font="Gfx.FONT_LARGE" text="12" color="Gfx.COLOR_RED" />
<label x="187" y="60" font="Gfx.FONT_LARGE" text="3" color="Gfx.COLOR_WHITE" />
<label x="97" y="118" font="Gfx.FONT_LARGE" text="6" color="Gfx.COLOR_WHITE" />
<label x="5" y="60" font="Gfx.FONT_LARGE" text="9" color="Gfx.COLOR_WHITE" />
</layout>



Everything within the <layout id="MainLayout" background="Gfx.COLOR_LT_GRAY"> tag is counted inclusive of the "drawable ID"
BTW - beside size(), what are the ways to Print Out all the values in the array? (I tried toString() and values() doesn't seem to work)

mLayoutinstanceof Ui.Text
[/code]

The code above basically is to check if the line in that layout file is / has UI.Text and does the changes there..

I think I got you. I'm going to check it out.