Setting shell BackgroundColor & TabBarBackgroundColor gives a dark grey color on iOS devices

[rs-mobitech]

In any Xamarin forms shell app for example Xanimals, when I set the shell colors as follows:

<Shell xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" BackgroundColor="#000000" TabBarBackgroundColor="#000000"

These areas do not appear as black in iOS. Instead they appear as a very very dark gray color.

• Version with issue: Current as of end of June 2019
• Last known good version: All versions
• IDE:
• Platform Target Frameworks: iOS
  • iOS: All tested
• Affected Devices: All tested

This can easily be reproduced with the two lines above for any of the shell apps I checked out so far. Note that setting to any other colors works okay but I think possibly iOS is applying some mask or filter to the top and bottom areas which is causing the color to not display correctly.

[rs-mobitech]

Here's an example. Notice that the top and bottom areas are a very dark grey instead of the black color you would expect with a color of #000000

[rs-mobitech]

Note that this is not so obvious in the images unless you look carefully, but a lot more obvious when viewing on a device.

[Devanshi1105]

Hi, I have also try with custom renderer for solving above issue. public class CustomShellRenderer : ShellRenderer { public CustomShellRenderer() { }

    protected override void OnElementPropertyChanged(object sender, PropertyChangedEventArgs e)
    {
        base.OnElementPropertyChanged(sender, e);
        if (this.ViewController != null)
        {
            //this.TabBarController.TabBar.BarTintColor = UIColor.Yellow;
            var shell = (Shell)sender;
            //this.ViewController.TabBarController.TabBar.BackgroundColor = UIColor.Yellow;
            Shell.SetTabBarBackgroundColor(shell, Color.Black);
            //Shell.SetTabBarForegroundColor(shell, Color.FromHex("#000000"));

        }
    }
}

It is working fine with other color but in case of Black it is not showing proper black.

[Devanshi1105]

If xamarin give such type of property in shell then it can be possible this.TabBarController.TabBar.BarTintColor = UIColor.Black;

But here TabBar is null

[rs-mobitech]

This can be overcome with the following code for the header area:

    protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
    {
        var renderer = base.CreateShellSectionRenderer(shellSection);
        if (renderer != null)
        {
            (renderer as ShellSectionRenderer).NavigationBar.Translucent = false;
        }
        return renderer;
    }

But not for the bottom tab area. For that we need a way to set SafeShellTabBarAppearanceTracker.cs the Controller.TabBar.Translucent = false;

If these are not set then in iOS the top and bottom area iOS slightly changes the colors so that black doesn't not appear as 100% black

[rs-mobitech]

Work around for top navigation and bottom tab is this:

public class CustomShellRenderer : ShellRenderer
{
    protected override IShellSectionRenderer CreateShellSectionRenderer(ShellSection shellSection)
    {
        var renderer = base.CreateShellSectionRenderer(shellSection);
        if (renderer != null)
        {
            var a = (renderer as ShellSectionRenderer);
            (renderer as ShellSectionRenderer).NavigationBar.Translucent = false;
        }
        return renderer;
    }

    protected override IShellItemRenderer CreateShellItemRenderer(ShellItem item)
    {
        var renderer = base.CreateShellItemRenderer(item);
        (renderer as ShellItemRenderer).TabBar.Translucent = false;
        return renderer;
    }
}

The workaround works but it would be better if Translucent was set be default to false or if there was an easier way to change this without having to do a renderer.

[jsuarezruiz]

@rscholey, could you add a small sample where reproduce the problem.? I have done tests in Xaminals and it seems that I works as expected.

[rs-mobitech]

Hi, Simple check is to set the color to black and also the background of a shell page too black. The bottom area will be almost black but there is an obvious difference in color if you compare it to the page. Note that you must set them both to #000000 to notice the difference. It's a problem I have had for almost 2 years with my application and always required a custom renderer to set the bottom area translucent false. If you notice it's also been confirmed with another user here on this issue. Please try with #000000 to see the problem. Thanks

[rs-mobitech]

I looked at your page with xaminals. You're not using a black page and black navigation area :-) Have to do this. I'm wondering why others have not noticed but I can only assume that not many are using a completely black page and also tab area.

[StephaneDelcroix]

@jsuarezruiz are you able to reproduce this ?

[rs-mobitech]

Please just set the colors to those mentioned in the first few lines of the issue. Setting them to red or others colors won't show you anything :-)

BackgroundColor="#000000" TabBarBackgroundColor="#000000"

Also note the fix which works. For the previous versions of Xamarin I also had to use this same fix. There needs to be an option to set Translucent to be false.

Been a documented problem for many years now:

https://forums.xamarin.com/discussion/25685/ios-bartintcolor-is-always-lighter-than-the-color-that-is-defined

Need to have access to set Translucent to false otherwise you will never get exactly the same color and it's most obvious with black (000000)

[rs-mobitech]

Note that my fixes (custom renderer) work good.

[mastermoe01]

I have the same issue, when is this going to get worked on?

[rs-mobitech]

Any update. Seems like it should be a common need for people to set the background color to pure black.

[MaxFmi]

Any progress on this?

[rs-mobitech]

Any progress on this?

[JunkyXL86]

Happens with almost all colors. Seems there is a tint or something. I'll provide a repro in the next few days.

[SergeSettels]

Please note this solution: UINavigationBar.Appearance.Translucent = false; in FinishedLaunching in the iOS project. See https://stackoverflow.com/questions/56783581/xamarin-forms-4-0-shell-titleview-ios-cannot-set-black-background-color

[greg84]

Setting Translucent to false is not a solution if you want to set the colour conditionally.

This should be a setting on the Shell, or maybe Xamarin should be using backgroundColor instead of barTintColor for iOS 13+.