Change Xamarin Forms Android Navigation Page Colours (buttons & back)

Question

I am trying to change the appearance of the navigation page in my Xamarin Forms application. I want a blue bar with all text being white. I have been able to set the NavigationPage's properties, but I cannot set the bar button items or the back button's colour. Here are 2 screenshots illustrating what my app looks like currently:

The black colour looks awful, this NEEDs to be white. Now I had a look at how I can change these colours however nothing seemed to work.

I have currently tried the solutions presented in these posts:

This is getting the point where it is ridiculous, I implemented this on iOS in under 5 minutes and i've spent the best part of a day trying to make some text white...

How can I set just the text on the navigation bar to white, an example in iOS (without code infront of me) is self.navigationBar.tintColour =' White', which would apply white over any content on the nav bar.. Exactly what i want!

Thanks & here is my styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="MainTheme" parent="MainTheme.Base">
    </style>
    <!-- Base theme applied no matter what API -->
    <style name="MainTheme.Base" parent="Theme.AppCompat.Light.DarkActionBar">
        <!--If you are using revision 22.1 please use just windowNoTitle. Without android:-->
        <item name="windowNoTitle">true</item>
        <!--We will be using the toolbar so no need to show ActionBar-->
        <item name="windowActionBar">false</item>
        <!-- Set theme colors from http://www.google.com/design/spec/style/color.html#color-color-palette -->
        <!-- colorPrimary is used for the default action bar background -->
        <item name="colorPrimary">#2196F3</item>
        <!-- colorPrimaryDark is used for the status bar -->
        <item name="colorPrimaryDark">#1976D2</item>
        <!-- colorAccent is used as the default value for colorControlActivated
         which is used to tint widgets -->
        <item name="colorAccent">#FF4081</item>
        <!-- You can also set colorControlNormal, colorControlActivated
         colorControlHighlight and colorSwitchThumbNormal. -->
        <item name="windowActionModeOverlay">true</item>
        <item name="android:datePickerDialogTheme">@style/AppCompatDialogStyle</item>

        <item name="android:actionBarPopupTheme">@style/CustomActionBarPopupTheme</item>
    </style>
    <style name="AppCompatDialogStyle" parent="Theme.AppCompat.Light.Dialog">
        <item name="colorAccent">#cbff34</item>
    </style>

    <style name="CustomActionBarPopupTheme" parent="android:ThemeOverlay.Material.Light">
        <item name="android:colorBackground">#cbff34</item>
        <item name="android:textColor">#cbff34</item>
    </style>

</resources>

Houssem Houssem · Accepted Answer · 2018-04-16T16:54:04

You can add a style to your styles.xml,

  <style name="ToolbarStyle" parent="Theme.AppCompat.Light.NoActionBar">
    <!-- Customize color of navigation drawer icon and back arrow -->
    <item name="colorControlNormal">#ffffff</item>
  </style>

and add this as theme to your toolbar in toolbar layout.axml(in android project under layout folder) , check below android:theme="@style/ToolbarStyle"

Change Xamarin Forms Android Navigation Page Colours (buttons & back)

1 Answers