Change background color of ToolbarItems

HugoCruz

How do I change the background color and text of ToolbarItems? The default color is black and I would like to change how to do it?

<ContentPage.ToolbarItems>
    <ToolbarItem Order="Secondary" Icon="morevert.png" Text="Atualizar" Command="{Binding Atualizar}"/>
    <ToolbarItem Order="Secondary" Text="Ajuda" Command="{Binding Ajuda}"/>
    <ToolbarItem Order="Secondary" Text="Sair" Command="{Binding Sair}"/>
</ContentPage.ToolbarItems>

JPHochbaum

Your app.xaml.cs file should be able to handle this:

NavigationPage navPage = new NavigationPage {
    BarBackgroundColor = Color.FromHex("#1FBED6"),
    BarTextColor       = Color.FromHex("#000000")
}

https://stackoverflow.com/questions/35504955/change-background-color-of-toolbaritems-from-codebehind

HugoCruz

@JPHochbaum This will change the background color of the ToolbarItems and the text, but it will not change the ToolbarItem that has the black background color, as shown in the image, I want to change this small menu that has the black background.

AdamMeaney

You need to do it in the Android Styles.xml.

Can't remember off the top of my head, but you set the menu style to a style with a different primary color I believe.

Hope that points you in the right direction.

GeetS

For Android, reference https://stackoverflow.com/questions/45323451/change-color-of-toolbaritem-in-xaml

In case anyone is still finding the solution, then they can do it like below:
a) In Android project, under values folder of Resources, add a new style in styles.xml

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

b) In Android project, Resources>Layout folder, update Toolbar.axml. At the top add namespace for app ie xmlns:app="http://schemas.android.com/apk/res-auto" and change the app:popupTheme of Toolbar like this: app:popupTheme="@style/AppToolbarTheme". Below 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" />

jeevan123

thanks it worked for me!

_Aurelien_

Thanks, for this solution! It's worked fine for Android.

But, do you have a solution for IOS?