Changing Tabbar color dynamically with ResourceDictionary

Question

Actually my app have 2 themes (pink and blue), handled by ResourceDictionary in App.xaml

Switching a switch in settings page change programmatically the values of the ResourceDictionary and the elements change as wanted (background, text colors etc). It's maybe not the prettiest way but it works..

But i have a problem to change background colors of the Tabbar in android.

The color value of it is set in the Android project (colorPrimary from styles.xml and Tabbar.axml).

But i can't find

How to change or access this value from my PCL project.
Or how to change, in Android project, the value of that colorPrimary each time the settings switch value is changed.
Or also, the best solution, make the tabbar transparent and make it overlap the current background (if i set Color.Transparent it just become white now)

The tabbed page code is as been created by Xamarin forms project.

public MainPage()
        {
        Page centerPage, rightPage, leftPage;

        string TitleCenter = "S'exercer";
        string TitleLeft = "Comprendre";
        string TitleRight = "Aller plus loin";

        switch (Device.RuntimePlatform)
        {
            case Device.iOS:
                centerPage = new NavigationPage(new Center_Main())
                {
                    Title = TitleCenter
                };

                rightPage = new NavigationPage(new Right_Main())
                {
                    Title = TitleRight
                };
                leftPage = new NavigationPage(new Left_Main())
                {
                    Title = TitleLeft
                };
                centerPage.Icon = "tab_feed.png";
                rightPage.Icon = "tab_about.png";
                leftPage.Icon = "offline_logo.png";
                break;

            default:
                centerPage = new Center_Main()
                {
                    Title = TitleCenter
                    // Nothing tab related here
                };

                rightPage = new Right_Main()
                {
                    Title = TitleRight
                };

                leftPage = new Left_Main()
                {
                    Title = TitleLeft
                };

                break;
        }

Thanks

FreakyAli FreakyAli · Accepted Answer · 2018-03-19T18:02:48

Using Xaml it is something like this:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" BarBackgroundColor="your_Color"></Tabbedpage>

Programatically:

 TabbedPage page=new Tabbedpage(){ BarBackgroundColor=Color.Blue};

You can do the following in your tabbedPage constructor :

 public MainPage()
 {
    BarBackgroundColor=Color.Blue;
 }

Note: Can be used with static resources just put it in place of the color name.

Something like this

<... BarBackgroundColor={StaticResource color_name}>

Changing Tabbar color dynamically with ResourceDictionary

2 Answers