Customize TabbedPage color schema - Xamarin.Forms

Question

Is there a way I can customize the color schema of tabs on Xamarin.Forms.TabbedPage object so it does not take the default look and feel of the target platform?

I would like to change font color, background and current selected tab color.

Solution 1

I suggest to use a custom renderer.

Here is an example for iOS:

[assembly: ExportRenderer(typeof(TabbedPage), typeof(TabbedPageRenderer))]
namespace MyApp.iOS
{
    public class TabbedPageRenderer : TabbedRenderer
    {
        protected override void OnElementChanged(VisualElementChangedEventArgs e)
        {
            base.OnElementChanged(e);

            TabBar.TintColor = UIColor.White;
            TabBar.BarTintColor = UIColor.Black;
            TabBar.BackgroundColor = UIColor.Gray;
        }
    }
}

Just past this class in the Xamarin.iOS project.

For Xamarin.Android you could also use a custom renderer to accomplish the same. The Android implementation of the custom renderer looks different from the iOS version.

Solution 2

Late for the party.

Now you can change the tabbed page background color as follows

BarBackgroundColor = Color.Black;

Below links may help you more

How to change color of tabbed page indicator in Xamarin.Droid?

http://thatcsharpguy.com/post/platformtabbedpage-xamarin-forms-en/

Solution 3

There's no built-in way in Xamarin.Forms, but that's really easy to do in your platform-specific projects. e.g. by using UIAppearance on iOS.

Solution 4

In tabbed page , in order to change the header color in xamarin forms not in android native.

Tabbed page code:

 class MainPage : TabbedPage
    {
        LoginManager app;

        public MainPage(LoginManager ilm)
        {

            app = ilm;
            Title = "Infrastructure";
            Icon = "server.png";            


            this.BarTextColor = Color.White;
            this.BarBackgroundColor = Color.Blue;


            Children.Add(new AssetsView());
            Children.Add(new ServiceView());

            ToolbarItem tbi = new ToolbarItem() {
                Text = "Logout",
                Order = ToolbarItemOrder.Secondary,
                Priority = 0,       



            };

AssetView Code:

 public AssetView()
        {
            Title = "Assets";           



           this.BackgroundColor = Color.FromHex("D3D3D3");

            list = new AssetsList();

            searchbar = new SearchBar()
            {

                Placeholder = "Search",
                TextColor = Color.Black,
                BackgroundColor = Color.White,
                CancelButtonColor = Color.Black,
                PlaceholderColor = Color.Black


            };

ServiceView Code:

  public class ServiceView : ContentPage
    {

        ServiceList list;
        SearchBar searchbar;


        public ServiceView()
        {
            Title = "Services";
            this.BackgroundColor = Color.FromHex("D3D3D3");

            list = new ServiceList();

            searchbar = new SearchBar()
            {
                Placeholder = "Search",
                TextColor = Color.Black,
                BackgroundColor = Color.White,
                CancelButtonColor = Color.Black,
                PlaceholderColor = Color.Black
            };

View more solutions

Comments

[Fran_gg7]

How can I do it for Android?