Menu 2 menu item in-focus colour?

1) On Garmin AMOLED devices you're not supposed to use a white background colour for anything [*], which is why you're running into this problem.

Even the top picture (of a MIP Fenix 7) clearly demonstrates that Menu2/CustomMenu is expected to be used with a black background (note the partial black background on the left, coupled with the white vertical line that indicates the currently selected item). But ofc the problem is more severe for FR965.

It seems clear that in both pictures, part of the menu is being rendered with a black background, and there's not much you can do about it except change the theme for AMOLED devices (see next point), but that won't fix the problem completely. You'll still have that sliver of black background to the left of the highlighted item, which will look weird unless everything else has a black background.

[*] because it burns battery. Users of AMOLED Garmins have also noted that you can't set a white background for data pages - you're forced to use black - unlike MIP devices which can use either white or black for the data page background.

2) For newer AMOLED devices like FR965, you can change the appearance of the highlighted item using the :theme option to Menu2.initialize. I don't think it's a perfect solution - at best you may be able to find a theme colour that looks better than what you have now, but the menu will never look perfect unless you decide to use a black background and light text for your menu items. (I would say the same for Fenix 7, but to a lesser extent.)

https://developer.garmin.com/connect-iq/api-docs/Toybox/WatchUi/Menu2.html#initialize-instance_function

https://developer.garmin.com/connect-iq/api-docs/Toybox/WatchUi.html#MenuTheme-module

Yeah, it's kind of annoying that for older MIP devices like FR935, the background of Menu2/CustomMenu may actually be white. I guess all I can say is that you'll have to test different generations of watches in the simulator and hope that the sim reflects the real behaviour of the devices. I do think it's safe to say that for any currently supported Garmin watches (e.g. FR255/955/265/965, Fenix 7, and newer), you could probably assume that the background colour is black for everything except data pages on MIP devices.

To be clear, Menu2 (and I guess CustomMenu) uses a native menu UI component, which apparently only works properly / looks good when you use a black (not white) background, on modern devices (especially AMOLED devices).

If you really want light (white background) menus on newer devices, I think you would have to make your own menu class from scratch. But ofc that would look very diffferent from any native menus on the devices, which you should know since you own the physical devices.

It's not impossible / unheard of tho. I've seen apps which implement their own menus, including indie apps and Spotify.

Again, many thanks for your attention. Not being a user of an AMOLED device, I was unaware of these standards, so many thanks for your  information. I don't even remember why I made the decision to go with the black on white scheme, so have no problem with fixing the problem as you suggest by adopting the white-on-black (transparent) approach. 

To be 100% clear about what I'm talking about:

- here's a native menu on Fenix 7

www.dcrainmaker.com/.../garmin-fenix7-review.html

- here's a native menu on FR965

www.dcrainmaker.com/.../garmin-forerunner-965-depth-review.html

Going back to the pics you posted, it should be clear that Menu2/CustomMenu uses the same/similar UI component as those native menus, as you can still see the sliver of black background to the left of the highlighted item

Since there's no way to change the overall background colour of Menu2/CustomMenu, it seems like your only real choice is to make the background of the custom menu items white (except for super old MIP devices, where Menu2 might actually use a white background).

Alan.raceQs said:

I don't even remember why I made the decision to go with the black on white scheme,

Probably because older MIP devices (like FR935) use the white on black scheme for menus.

Like I said, you may have to test different devices in the sim to find out which ones actually use a white background, and hardcode the background colour appropriately.

Here's an fr935 example:

www.dcrainmaker.com/.../garmin-forerunner-935-depth-review.html

Btw I'm getting all these screenshots from DC Rainmaker reviews.

Tbh a lot of this is on Garmin imo. Garmin should be giving devs a way to know what the background colour is for Menu2/CustomMenu, so that we can implement a custom menu properly without having to figure out and hardcode device-specific background colours.

Garmin has a lot of little problems like this imo. A similar problem is that Garmin started using all caps for data field labels at some point, but they were previously title case.

So if you have a data field that works on both new devices and old devices, the only way to make the label look "right" on all devices is to painstakingly figure out which devices use title case and which use all-caps, then hardcode your app to do the right thing for each device.

Also, I haven't played with CustomMenu much, but can you just avoid setting the foreground/background colour altogether on your menu items? That way, hopefully your menu items will just automatically use the correct foreground/background colour for the current device.

I get this may not be possible if you have images in your menu though.

(How do you paste images in the forum? I thought we used to be able to just paste images, but now I'm having to save and import, and there seems to be some restriction on even modest sizes - like 900x500.and sometimes the upload just silently fails.)

I'm trying to show pics of a Fenix 5 and Fenix 7 running an original menu and as you say, the F5 is black on white and the F7 is white on black. I guess I was used to menus being black text on white.

welcome to the club: https://forums.garmin.com/developer/connect-iq/f/forum-about-the-forum/408151/can-t-post-some-images

FlowState said:

Also, I haven't played with CustomMenu much, but can you just avoid setting the foreground/background colour altogether on your menu items? That way, hopefully your menu items will just automatically use the correct foreground/background colour for the current device.

Yes, that works. I haven’t tested it on devices with a white background, but I’ve seen it working correctly on Fenix 8 series devices, where the focused menu item has a gradient background. On those devices, if no background is specified, it defaults to transparent, allowing the gradient to show through as intended.

One instance where reasonable defaults do not seem to kick in is with the CustomMenu implementation on button-based Edge devices. While focus moves between items, there’s no visual indication of which item is currently focused, and styling it manually using isFocused() is unreliable.

And while CustomMenu appears to inherit the native styling for menu items, it does not do the same for the menu title. In contrast, Menu2 applies device-specific styling—such as a grey background for the title on Fenix 7 Pro devices—whereas CustomMenu leaves the title entirely unstyled.

Yeah, sometimes it seems that there is a size limit on images, especially when you directly paste them in. This is especially a problem if you take a screenshot from a high-resolution screen, such as a MacBook or iPad.

When I am unable to paste an image directly, I use a 3rd-party image hosting service like postimages.org. Sometimes the use of an image host fixes the problem without even resizing the image, strangely enough. Other times, I find that I do have to resize the image even if I use an image host.