Why doesn't navigationbar change colour in Xamarin.Forms on some devices?

Question

I am building a Xamarin Forms app, currently on Android.

I am trying to dynamically change the colour of the Navigation bar at the top of the app. I managed this successfully using an old phone locked to Android 4.1 API 17, but every other phone I have tried since it does not work. I have tried:

Samsung SM-G388F - Android 5.1 API 22

Google Pixel - Android 7.1 API 25

Screenshot - Newer phones - does not work - simply inherits page background colour

Screenshot - Older phone - works perfectly

Originally I was using a DynamicResource defined in App.xaml to change the BarBackgroundColour depending on what environment you were using - Live/Test. The other two properties BackgroundColor and BarTextColor are working fine.

 <Color x:Key="navBarColour">#F4721C</Color>
  <Style TargetType="NavigationPage">
            <Setter Property="BackgroundColor" Value="{StaticResource pageBackground}"/>
            <Setter Property="BarBackgroundColor" x:Key="navBar" Value="{DynamicResource navBarColour}"/>
            <Setter Property="BarTextColor" Value="{StaticResource textColor}"/>

        </Style>

Set on App Load in App.xaml.cs

    if (Settings.Environment.ToLower() == "live")
        {
            Application.Current.Resources["navBarColour"] = Application.Current.Resources["anglianLightBlue"];
        }
        else
        {
            Application.Current.Resources["navBarColour"] = Application.Current.Resources["red"];
        }

Users also have the ability to switch environments on the Settings page here:

                App.Current.Resources["navBarColour"] = App.Current.Resources["red"];

I've tried changing this to a StaticResource and have tried setting it directly in my xaml to just Color.Black, and it still doesn't work - I can't seem to find a way to change it anywhere.

I cannot find anything on Google about this, or anybody with a similar issue. Has anyone else experienced this and if so how did they solve this?

Answer 1

I didn't find out why this doesn't work, but I did find a workaround. The NavigationBar is inheriting the Page Background colour so by changing the Page Background to be the colour you want the bar to be, and then sticking a container (ScrollView/ContentView) around the rest of the content and colouring the background of the container the page background colour this gives the desired effect. I'd still like to know why this doesn't work but for now this is a suitable workaround.