Bug 38148 - Should have option to use full color images in nav bar icons
Summary: Should have option to use full color images in nav bar icons
Alias: None
Product: Forms
Classification: Xamarin
Component: iOS ()
Version: 2.0.0
Hardware: PC Mac OS
: Normal enhancement
Target Milestone: ---
Assignee: Bugzilla
Depends on:
Reported: 2016-01-28 20:47 UTC by Roger Peters
Modified: 2016-02-24 16:07 UTC (History)
1 user (show)

Tags: iOS ac
Is this bug a regression?: ---
Last known good build:

Sample project showing blue tinted logo as hamburger menu icon (122.21 KB, application/zip)
2016-01-28 20:47 UTC, Roger Peters
Hamburger icon as it currently works (monochromed and tinted) (21.06 KB, image/png)
2016-01-28 20:48 UTC, Roger Peters
Hamburger icon with full color support (as being requested) (14.35 KB, image/png)
2016-01-28 20:49 UTC, Roger Peters
Working color hamburger icon sample project (iPhone only, not iPad) (49.18 KB, application/x-zip-compressed)
2016-02-24 16:07 UTC, Roger Peters

Notice (2018-05-24): bugzilla.xamarin.com is now in read-only mode.

Please join us on Visual Studio Developer Community and in the Xamarin and Mono organizations on GitHub to continue tracking issues. Bugzilla will remain available for reference in read-only mode. We will continue to work on open Bugzilla bugs, copy them to the new locations as needed for follow-up, and add the new items under Related Links.

Our sincere thanks to everyone who has contributed on this bug tracker over the years. Thanks also for your understanding as we make these adjustments and improvements for the future.

Please create a new report for Bug 38148 on Developer Community or GitHub if you have new information to add and do not yet see a matching new report.

If the latest results still closely match this report, you can use the original description:

  • Export the original title and description: Developer Community HTML or GitHub Markdown
  • Copy the title and description into the new report. Adjust them to be up-to-date if needed.
  • Add your new information.

In special cases on GitHub you might also want the comments: GitHub Markdown with public comments

Related Links:

Description Roger Peters 2016-01-28 20:47:50 UTC
Created attachment 14773 [details]
Sample project showing blue tinted logo as hamburger menu icon

Currently icons set to be the hamburger icon used on a MasterDetailPage (MasterDetailPage.Master's 'Icon' value) will always be turned monochrome and tinted in Xamarin Forms on iOS. For example, an icon that is 3 white horizontal lines (typical hamburger icon) will turn into a blue tinted hamburger icon on iOS. 

I suggest that there should be a way to specify that you do not want this monochrome/tint to occur for the hamburger icon (and potentially other icons on the nav bar) so that full-color icons can be used instead. For instance, a common practice for showing a branded logo next to the hamburger button on iOS is to specify a wide hamburger icon that includes the logo next to the hamburger so that the brand icon is part of the nav bar (similar to Android). To disable the monochrome/tinting and instead use a full color image is then done by setting the UIImageRenderingMode to AlwaysOriginal when the UIImage is created for the nav bar.

Attached are 2 images, one showing how a hamburger icon with a logo currently looks (Hamburger_withtint.png) and another image showing how we would like it to look (Hamburger_withcolor.png). Please note the Pepsi logo is just for example.

In trying to trace down the internals to see if we could override this behavior, it appears the issue lies within NavigationRenderer.UpdateLeftBarButtonItem() - that is where it creates the new UIBarButtonItem and creates the new UIImage from the icon path specified. What we would like to see is a flag on the Xamarin Forms Page control, or some other way, for making this UIImage creation specify UIImageRenderingMode.AlwaysOriginal so that full-color icons can be used.

Attached is a simple sample project showing a settings.png which contains a hamburger icon and a Pepsi logo. Currently the app runs and renders as seen in the attached Hamburger_withtint.png, but we would like to be able to make it look like Hamburger_withcolor.png instead.

The only viable alternative I have found is to instead use a custom NavigationRenderer which sets the NavigationBar.BarTintColor to a UIColor.FromPatternImage() specifying a custom image for the nav bar which includes the logo. The problem with this approach is the need to create and maintain several nav bar image sizes, and having to bake the logo into the nav bar image - which poses problems when a nav bar is used that does not have a hamburger (ex: a popup modal) - thus requiring two custom renderers - one with the logo offset with room for the hamburger and another with the logo not offset.
Comment 1 Roger Peters 2016-01-28 20:48:36 UTC
Created attachment 14774 [details]
Hamburger icon as it currently works (monochromed and tinted)
Comment 2 Roger Peters 2016-01-28 20:49:04 UTC
Created attachment 14775 [details]
Hamburger icon with full color support (as being requested)
Comment 3 Roger Peters 2016-02-24 16:05:55 UTC
I've been able to get a color hamburger menu icon by modifying a custom renderer found here:

The issue is that unfortunately this route only works on iPhones and not iPads (still appears as white monochrome). I'll attach an updated sample project using a custom renderer in case it helps anyone else that maybe doesn't need to support iPads. Basically it is overriding the NavigationBar getter for the NavigationPageRenderer.
Comment 4 Roger Peters 2016-02-24 16:07:10 UTC
Created attachment 15164 [details]
Working color hamburger icon sample project (iPhone only, not iPad)

Updated project which includes a custom renderer that successfully changes the hamburger icon to be full color, unfortunately does not work on iPad, just iPhone.