How do I add an icon to a watch face using VS?

The last time this was asked was 6+ years ago.  I am hoping for a more modern answer (or preferably, a current example).  I've made little feet as a jpg and want to put them next to, behind, near my step count.  I've tried creating a basic watch face (from the VS auto set-up) and incorporating the information in the "Drawable" example.  Unfortunately, it is even older than the last time this question was asked and I cannot get the picture to appear.

The documentation likes to give definitions, but gives woefully incomplete examples.  In one section (https://developer.garmin.com/connect-iq/core-topics/resources/), it says to use:

     image = Application.loadResource( Rez.Drawables.bitmap_id ) as BitmapResource;

then in Update() simply add"

     dc.drawBitmap( 50, 50, image );

Then, magic happens.

Except it does not work. Where and how is the Bitmap stored? I've tried putting it in the drawables, creating a bitmaps.xml file, and several wild tries.  Is it a Bitmap or Drawable? What's the difference? Also, when I try the drawables version (https://developer.garmin.com/connect-iq/core-topics/layouts/). It errors every time the compiler hits the

     mySmiley.draw( dc );

It specifically calls out "draw" as an unknown symbol.


I feel like, "WTF is PC load letter?!?" (yes...cheesy movie quote) Any help would be appreciated.


Thanks,




  • If you use dc calls in onUpdate() (like dc.drawBitmap), they must be after the View.onUpdate() (if you use it).  Anything done with a dc call before that will be lost.

    Are you using layouts?

  • Thanks.  That is useful to know.

    I have a layouts section.  I am not wedded to it, though.  It comes with the auto quick create.

  • Hey...partial good news.  It is currently not crashing.  However, the icon still does not display.  Is it because I also have the layouts? I'm beginning to think these 2 methods don't mesh and the layout is overriding the dc..drawBitmap.

    I added to the existing drawables.xml file:

         <bitmap id="FootIcon" filename="foot.png" />
    In the appView.mc:
    -I created a global var under class
         var myFoot as Bitmap;
    -Under function initialize() I added:
         myFoot = Application.loadResource( Rez.Drawables.FootIcon ) as BitmapResource;
    -Then, I added as the last line under function onUpdate():
         dc.drawBitmap(20, 30, myFoot);
    Any idea where to go next?  I can upload the whole thing to Git if it helps.