Change color of ToolBarItem in XAML

8
votes

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

4
xamlxamarin.androidxamarin.formsmobile-development
I think you will have to do this by Android styling/theming – Gerald Versluis

4 Answers

12
votes

I found a solution :https://forums.xamarin.com/discussion/40529/toolbaritem-textcolor

Simple add to "styles.xml": 

<item name="android:actionMenuTextColor"> @color/orange </item>

I've spent hours looking for it..

8
votes

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" />
1
votes

This worked for me

In styles.xml

<item name="android:actionMenuTextColor">#000080</item>

0
votes

To change first item text edit android:theme android:theme="@style/ThemeOverlay.AppCompat.Light" or android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar" for second item text edit popupTheme