user4857063
user4857063

Reputation:

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

Upvotes: 8

Views: 18282

Answers (4)

Victor Hugo Terceros
Victor Hugo Terceros

Reputation: 3169

This worked for me

In styles.xml

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

Upvotes: 1

Etnic
Etnic

Reputation: 96

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

Upvotes: 0

Guillermo Daniel Arias
Guillermo Daniel Arias

Reputation: 149

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..

Upvotes: 13

Grace Feng
Grace Feng

Reputation: 16652

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

Upvotes: 8

Related Questions