Search code examples
xamlxamarin.androidxamarin.formsmobile-development

Change color of ToolBarItem in XAML


I've added a toolbaritem in my app, however i dont see a way to change its background and text color.

<ContentPage.ToolbarItems>

    <ToolbarItem Text="About" 
                 Icon="ic_action_more_vert.png"
                 Priority="0"
                 Order="Secondary"
                 Clicked="ToolbarItem_Clicked"/>

    <ToolbarItem Text="Settings"
                 Icon="ic_action_more_vert.png"
                 Priority="0"
                 Order="Secondary"/>

</ContentPage.ToolbarItems>

This is what I'd like changed. The black menu with white text, want to change that bg color and text color. Any idea how to achieve this?

enter image description here


Solution

  • As @Gerald Versluis suggested, you can do this by Android styling.

    Firstly you can find the styles.xml file under the values folder of Resources in Android project:

    enter image description here

    Inside of this file, you can open this file and create a style for your menu like this:

    <style name="AppToolbarTheme" parent="Theme.AppCompat.NoActionBar">
      <item name="android:colorBackground">#2196F3</item>
      <item name="android:textColor">#000080</item>
    </style>
    

    Then open the Toolbar.axml in android project

    enter image description here

    and change the app:popupTheme of Toolbar like this:

    app:popupTheme="@style/AppToolbarTheme"
    

    Update:

    Here is the code of Toolbar:

    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android"
        xmlns:app="http://schemas.android.com/apk/res-auto"
        android:id="@+id/toolbar"
        android:layout_width="match_parent"
        android:layout_height="?attr/actionBarSize"
        android:minHeight="?attr/actionBarSize"
        android:background="?attr/colorPrimary"
        android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
        app:popupTheme="@style/AppToolbarTheme" />