How do I find the background color for an IconMenuItem in a Menu2

My IconMenuItem uses a Drawable to provide the icon, so the drawable needs to know whether the background is black or white. I've been assuming the background is always white, because it was on all the devices I had tried so far; but I've just found that on fr955 it's black.

For DataFields, I can use DataField.getBackgroundColor() to find the background color, and then do the right thing. Here, I can't find anything that tells me the background color. The menu is the settings menu for a DataField; but even knowing the DataField's background color doesn't help, because on the fr955 Datafield background is white (by default), while the menu background is black.

Since I couldn't find an api to tell me, I was hoping there might be an entry in the personality library (and that devices too old to have a personality library would just have white backgrounds); but I don't see anything there either.

Do I just have to figure out for each device what color the menus are and hard code it (I can just use a dark.mss and light.mss and select the correct one in the jungle - but its going to be a pain to maintain). Also, I'm wondering if there's a device setting that might change the color, in which case even that won't work...

  • Hi Mark did you find a solution for this? I can't believe there is no other way to do this except keep a manual list of devices + background colours!

  • I haven't followed up recently, so maybe something changed, but at the time I just went through every device my App supported (which is pretty much all of them), and tested in the simulator. Here are the ones I found with a black background (this list hasn't been updated for a couple of years, so any recent devices need to be tested too):

    approachs7042mm,
      approachs7047mm,
      d2mach1,
      epix2,
      epix2pro42mm,
      epix2pro47mm,
      epix2pro51mm,
      fenix7,
      fenix7pro,
      fenix7s,
      fenix7spro,
      fenix7x,
      fenix7xpro,
      fr255,
      fr255m,
      fr255s,
      fr255sm,
      fr265,
      fr265s,
      fr955,
      fr965,
      marq2,
      venusq2,
      venusq2m

    I added black_background as an excludeAnnotation to each of those devices, and white_background to all the others (my monkey.jungle is generated, so it wasn't too painful to do that). Then in my code added:

    (:black_background)
    const BackgroundColor = 0xffffff;
    (:white_background)
    const BackgroundColor = 0x000000;
    

    So yes, as far as I know, you have to keep a manual list of devices + background colors.

  • Hi Mark did you find a solution for this? I can't believe there is no other way to do this except keep a manual list of devices + background colours!

    Try setting the background color of your Drawable to Graphics.COLOR_TRANSPARENT for all devices. I'm using this approach with a CustomMenu, drawing directly on the DC of each menu item. It works well on devices with a black background as well as those that use a color gradient for the focused item. I haven't tested it on devices with a white background yet, but I expect it to behave correctly there too.

  • Maybe it's possible to find this info in the simulator.json and then it would be possible to generate this list (or the constant for each device) from a script.

  • I don't think that's useful. Even though people ask about the background color, usually what they are actually interested in is which foreground color they should use in their graphics. So while it would work for the background to be transparent, they'd still need to know if the 1 color icon needs to be drawn with a white or a black palette.

    And even though one might think that using a "50% gray" color could be good for both cases, this usually doesn't work on MIP devices, because that grey is not always one of the colors it can display. It might work for AMOLED displays, but even then it means you give up 50% of the contrast, and that makes it harder to see it

  • Yes, good point. What also works in the CustomMenuItem is to just do not specify the colors in the Drawable. Again, I have only tested this with black/gradient background devices, so not sure how it behaves on white background devices and with the IconMenuItem. It might also depend on the Drawable you use (or have implemented yourself). 

  • Cool thanks for that. I have opted for using light grey icons for my IconMenuItem svg's as this works on both black or white background and doesn't look too bad. 

    I did add in a function that lets me change the colour of the icon at runtime using BufferedBitmap, so I could use your list to change them based on the few devices that have white backgrounds, but I dont really like the idea of having to maintain a list...but hey sounds like its the only way

  • In addition to 's point, there are other reasons for not using transparent.

    In my case the drawable draws a representation of the watch face. For round faces, the contents may overflow the bounding circle. It would of course be possible to manually clip all the drawing to be inside the circle, but that gets complicated really quickly. The easy way to do it is to draw into a square, then draw a circular outline in the background color that's wide enough to overwrite anything that might have overflowed, and then draw a 1 pixel wide outline in the foreground color. But you have to know the background color to do that...