How to change Toolbar Background color in a BottomBarPage

Question

Hy, I'm new in Xamarin Forms and I'm working with BottomBarPage, now I need a custom Toolbar with different items, as you can see in the code I added a ToolbarItem succesfully, my doubt is, how can I change the Toolbar background color? I tryed with x:BackgroundColor in xf:BottomBarPage but didn't work. Any suggestion?

<?xml version="1.0" encoding="utf-8" ?>
<xf:BottomBarPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            x:Class="MyProject.Views.StartPage"
            xmlns:xf="clr-namespace:BottomBar.XamarinForms;assembly=BottomBar.XamarinForms"
            xmlns:Views="clr-namespace:MyProject.Views;assembly=MyProject"
            x:Name="TabMenu">


    <xf:BottomBarPage.ToolbarItems x:BackgroundColor="#D60000">
        <ToolbarItem Name="User" Order="Primary" Icon="home.png" Text="Item 1" Priority="0" Clicked="User_Clicked"/>
        <!--<ToolbarItem Name="MenuItem2" Order="Primary" Icon="Xamarin.png" Text="Item 2" Priority="1" />-->
    </xf:BottomBarPage.ToolbarItems>

    <xf:BottomBarPage.Children>
        <Views:MainPage 
            ClassId="Home"
            Title="Page1" 
            Icon="Page1.png" 
            xf:BottomBarPageExtensions.TabColor="#D60000"/>
        <Views:MainPage 
            Title="Page2" 
            Icon="Page2.png"  
            xf:BottomBarPageExtensions.TabColor="#D60000"/>
        <Views:Graphs 
            Title="Page3"  
            Icon="Page3.png" 
            xf:BottomBarPageExtensions.TabColor="#D60000"/>
        <Views:MainPage 
            Title="Page4" 
            Icon="Page4.png"
            xf:BottomBarPageExtensions.TabColor="#D60000"/>
        <Views:Info 
            Title="Page5" 
            Icon="Page5.png"
            xf:BottomBarPageExtensions.TabColor="#D60000"/>
    </xf:BottomBarPage.Children>
</xf:BottomBarPage>

The blue bar is the background color which I want to change Color ToolBar

Now with using a TabbedPage, the declaration is: Tabbed Page

But the color of the bar at the top still being blue, how can I change it? Top ToolBar

Answer 1

As @fabriBertani said , use the official TabbedPage with bottom tabs specification as described in the article he shared check the code i shared below

<TabbedPage
    xmlns ="http://xamarin.com/schemas/2014/forms"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:test="clr-namespace:Test;assembly=Test"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:TabbedPage.ToolbarPlacement="Bottom" 
    BarBackgroundColor="Red"
    x:Class="Test.TabbedPage">
    <test:MainPage Title="Page 1" Icon="alarm"/>
    <test:MainPage Title="Page 2" Icon="watch"/>
</TabbedPage>

So now you have a Tabbar in the buttom with the color red .

Now you need to change the color of the NavigationBar to do this you need to access the NavigationPage and change the bar color. If you want to set it once then I would change that in the App.cs as below :

   public App()
        {
            InitializeComponent();

            MainPage = new NavigationPage(new MainPage())
            {
                BarBackgroundColor = Color.Red
            };
        }