Combine label + bitmap in just one class

Hi all,

I am new to IQ development so forgive the stupid question.

I am building a Complex DataField for my Edge and I want to reproduce the classic "ICON" + "TITLE" Garmin Label.
Something like this to be clear:

As far as I understood, label such as "HEART RATE" should be defined in the layouts.xml file.
Icons such as the heart (I am using an svg image, not a font) should be defined in the drawables.xml files as <bitmap>

Is that correct?

If so, is it possibile to combine those 2 elements into one .mc class and extends WatchUi.Drawable so that I can simply use them as a single resource into my main view?

Hope my question is clear...

Thanks for helping!

FlowState 2 months ago

Yeah, you can create a custom drawable by specifying your own class that extends Drawable:

[https://developer.garmin.com/connect-iq/core-topics/layouts/#customdrawables]

Simone85 2 months ago in reply to FlowState

Thanks.

I only don't get how to combine a <label> and a <bitmap> tags under the same <drawable> parent tag.

Is because in this case I can't use <label> anymore but I have to draw text directly in the class component with dx.drawText()?

mcinner1 2 months ago in reply to Simone85

What I do for Edge devices:
I set all labels using dc.drawText in onUpdate(dc).

If you have only some Edge devices to take care for, that‘s imho the easiest way. It’s different, if you code for 50 different watches…

I have a datafield on store, which uses (partly) drawings and labels combined:

https://apps.garmin.com/apps/03f85cb9-bf83-490d-86ca-63525d720f51

And to keep it more simple: I draw all icons using dc.draw, fill circle, rectangle, polygons and lines. There are just a few code lines per icon.

FlowState 2 months ago in reply to Simone85

Simone85 said:
I only don't get how to combine a <label> and a <bitmap> tags under the same <drawable> parent tag.

You can’t literally combine 2 drawables under a single drawable tag, as it’s not supported.

If you want, you could just have them as separate drawables — if you lay them out properly, the user wouldn’t know the difference.

Unfortunately there’s no such thing as nested layouts or nested drawables — I get why this would be helpful, but it doesn’t exist.

Simone85 said:
Is because in this case I can't use <label> anymore but I have to draw text directly in the class component with dx.drawText()?

Yeah, a custom drawable requires you to implement onUpdate() so it knows how to draw itself.

You could also do what mcinner1 suggested, which is to not use layouts at all, but to draw *everything* manually in onUpdate().