How to change toolbar colors?

Nick.LNick.L USMember
edited December 2018 in Xamarin.Forms

Hi, first time asking a question here. I've spent hours losing my mind trying to add a toolbar to my app and style it to my liking. I finally got it to show up, but cannot figure out how to simply change the background and text colors. I've tried many different things found on these forums and on other websites but nothing has worked so far.

Here are my files:

MainPage.xaml
(taken from this project)

<ContentPage
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyApp.MyPage">
    <ContentPage.ToolbarItems>
           <ToolbarItem Text="edit" Order="Primary">
                <ToolbarItem.Icon>
                    <OnPlatform x:TypeArguments="FileImageSource"
                                iOS="edit.png"
                                Android="ic_action_edit.png"/>
                </ToolbarItem.Icon>
            </ToolbarItem>
            <ToolbarItem Text="search" Order="Primary">
                <ToolbarItem.Icon>
                    <OnPlatform x:TypeArguments="FileImageSource"
                                iOS="search.png"
                                Android="ic_action_search.png"/>
                </ToolbarItem.Icon>
            </ToolbarItem>
            <ToolbarItem Text="refresh" Order="Primary">
                <ToolbarItem.Icon>
                    <OnPlatform x:TypeArguments="FileImageSource"
                                iOS="reload.png"
                                Android="ic_action_refresh.png"/>
                </ToolbarItem.Icon>
            </ToolbarItem>
            <ToolbarItem Text="explore" Order="Secondary" />
            <ToolbarItem Text="discover" Order="Secondary" />
            <ToolbarItem Text="evolve" Order="Secondary" />
        </ContentPage.ToolbarItems>
</ContentPage>

MainPage.xaml.cs

using Xamarin.Forms;
namespace MyApp
{
    public partial class MyPage : ContentPage
    {
        public MyPage()
        {
            InitializeComponent();
        }
    }
}

App.xaml

<Application
    xmlns="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    x:Class="MyApp.App">
    <Application.Resources>
        <ResourceDictionary>
            <Color x:Key="accentColor1">#F85A2F</Color>
            <Color x:Key="accentColor2">#C94A28</Color>
            <Color x:Key="primaryColor1">#222222</Color>
            <Color x:Key="primaryColor2">#2E2E2E</Color>
            <Color x:Key="backgroundColor1">#FFFFFF</Color>
            <Color x:Key="backgroundColor2">#F8F8F8</Color>
            <Color x:Key="textColor">#757575</Color>
            <Style TargetType="NavigationPage">
                <!-- Doesn't change anything! -->
                <Setter Property="BarBackgroundColor" Value="Color.Red"/>
                <Setter Property="BarTextColor" Value="#FFFFFF"/>
            </Style>    
        </ResourceDictionary>
    </Application.Resources>
</Application>

App.xaml.cs

using Xamarin.Forms;
namespace MyApp
{
    public partial class App : Application
    {
        public App()
        {
            InitializeComponent();
            MainPage = new NavigationPage(new MyPage());
        }
    }
}

MainActivity.cs

using Android.App;
using Android.OS;
using Android.Content.PM;
namespace MyApp.Droid
{
    [Activity(Label = "My App", Theme = "@style/AppTheme", ConfigurationChanges = ConfigChanges.Orientation | ConfigChanges.ScreenSize)]
    public class MainActivity : Xamarin.Forms.Platform.Android.FormsAppCompatActivity
    {
        protected override void OnCreate(Bundle bundle)
        {
            base.OnCreate(bundle);
            Xamarin.Forms.Forms.Init(this, bundle);
            App app = new App();
            LoadApplication(app);
        }
    }
}

styles.xml
(note that I do have a colors.xml but didn't think it was necessary to include it)

<resources>
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
    </style>
</resources>

So with this code I'm able to see my toolbar with the correct layout and items, but there seems to be no way to change the background or text colors. However, I think the problem (at least with the background) might just be that the toolbar is transparent because setting "android:windowBackground" in styles.xml to something besides white not only changes the page background but also the background of the toolbar. As you can see I already tried setting "BarBackgroundColor" and "BarTextColor" in App.xaml, but it does nothing. I also tried putting its equivalent in App.xaml.cs, but that failed too.

Hoping someone has some information about this since I can't find anything helpful.

Answers

  • Nick.LNick.L USMember

    Thanks Mysura. I've tried doing it that way before with no luck, but I tried it again anyway and it still didn't change anything.

  • SheraShera INMember ✭✭

    @nick.L
    BarTextColor = Color.Orange;
    BarBackgroundColor = Color.Purple;
    Write this in your Navigation Page's .cs File

  • PriyaRastogiPriyaRastogi INMember ✭✭✭

    @Shera I used this code but this code is not working.its giving the exception..

  • SumitPathakSumitPathak INMember ✭✭

    @MysuraReddy Thanks Bro, its working

Sign In or Register to comment.