Inconsistency when using center value within layout with TEXT_JUSTIFY_VCENTER

I noticed today that there is (what I consider to be) an inconsistency with the way layouts handle vertical center text justification. Specifically, when using TEXT_JUSTIFY_CENTER the location of the rendered text differs when the y value is set to "center" versus set to the pixel value that is the center of the watch.

For example, when using a 218x218 watch (such as the fenix 3 and derivatives), the center of the watch on the vertical Y axis is 109. So if we use to following layout XML we see the label contents properly centered on the watch (vertically and horizontally).

<layout id="WatchFace">
    <label id="TimeLabel" x="center" y="109" font="Gfx.FONT_LARGE" justification="Gfx.TEXT_JUSTIFY_CENTER|Gfx.TEXT_JUSTIFY_VCENTER" color="Gfx.COLOR_BLUE" />
</layout>

But if we use the same layout but change the "109" to "center", which should translate to 109px upon rendering, we end up with label contents up higher than they should be (and thus NOT centered vertically).

<layout id="WatchFace">
    <label id="TimeLabel" x="center" y="center" font="Gfx.FONT_LARGE" justification="Gfx.TEXT_JUSTIFY_CENTER|Gfx.TEXT_JUSTIFY_VCENTER" color="Gfx.COLOR_BLUE" />
</layout>

If that's the way it should be then the SDK docs should probably be updated but from a programmatic standpoint to differ between the two layouts above seems wrong.

Cheers,
Douglas

MoxyRoger over 8 years ago

I think you might be missing a "|Gfx.TEXT_JUSTIFY_VCENTER" in the justification on your second example. The way you have it, the Y-coordinate is for the bottom of the text instead of the vertical center of the text.

travis.vitek over 8 years ago

Yes, Roger is right (unless you specify a vertical justification, text is drawn from the top). The x and y parameters give a point on the display to use as a reference point, the justification flag tells how to render the text relative to that point. When you specify x="center" y="center" that is exactly the same as writing x="109" y="109" for a 218x218 device, so the vertical justification flag is still necessary.

Travis

dbrobert over 8 years ago

I've edited my sample code in my original post -- I erred when cutting & pasting. The last test I did prior to posting was to remove the TEXT_JUSTIFY_VCENTER and I discovered that the ONLY way to actually make the text properly centered when using the "center" value is to remove the TEXT_JUSTIFY_VCENTER and I forgot to put it back in when pasting in the sample for the non-working layout.

You are both correct in that the second example should have had the TEXT_JUSTIFY_VCENTER, and I know how the TEXT_JUSTIFY_VCENTER should work (and that it was necessary), I just missed it in the code sample. And, Travis, you comment about center and 109 being the same is what I would expect also but it's not.

So, sadly now I must repeat a bunch of stuff to clarify but the gist of my original post remains the same (there is an inconsistency TEXT_JUSTIFY_VCENTER).

With this layout, assuming a watch with a 218 pixel screen in height, the label is centered vertically:

<layout id="WatchFace">
    <label id="TimeLabel" x="center" y="109" font="Gfx.FONT_LARGE" justification="Gfx.TEXT_JUSTIFY_CENTER|Gfx.TEXT_JUSTIFY_VCENTER" color="Gfx.COLOR_BLUE" />
</layout>

With this layout, the label is NOT centered vertically (the text is higher than it should be):

<layout id="WatchFace">
    <label id="TimeLabel" x="center" y="center" font="Gfx.FONT_LARGE" justification="Gfx.TEXT_JUSTIFY_CENTER|Gfx.TEXT_JUSTIFY_VCENTER" color="Gfx.COLOR_BLUE" />
</layout>

But with this layout (and the use of TEXT_JUSTIFY_VCENTER removed), the text is properly centered vertically:

<layout id="WatchFace">
    <label id="TimeLabel" x="center" y="center" font="Gfx.FONT_LARGE" justification="Gfx.TEXT_JUSTIFY_CENTER" color="Gfx.COLOR_BLUE" />
</layout>

Cheers,
Douglas

dbrobert over 8 years ago

To make it easier to believe me, here is the result of my three code samples in my previous post, immediately above.

The left and middle images should look the same (but they don't) and the right image should have the time slightly displaced given that there is no use of TEXT_JUSTIFY_VCENTER.

Cheers,
Douglas