Customize Tab Bar on iOS

PDF for offline use
Sample Code:

Let us know how you feel about this

Translation Quality


0/250

last updated: 2016-01

How to change the appearance of Xamarin.Forms tabs on iOS

By default the Xamarin.Forms TabbedPage will render on iOS devices with the default colors and font styles:

This example shows how to customize:

  • tab color, and
  • tab font face, size, and style.

The following screenshot shows the tab bar after it has been customized:

Tab Color

To change the color used for the iOS tabs, follow the instructions for setting iOS-specific styles with Xamarin.Forms.

The following code is added to the AppDelegate.cs file in the FinishedLaunching method to achieve a brown tint on the selected tab:

UITabBar.Appearance.SelectedImageTintColor = UIColor.Brown;

Font

A custom renderer is required to customize the font face, style, and size. The complete custom renderer code is shown below. It uses the Chalkboard font in both Light and Bold styles, and 9 point font for unselected tabs with 12 point for the selected tab.

This file is added to the iOS project in the Xamarin.Forms solution -- no change is required to the common Xamarin.Forms code (and it works regardless of whether the user interface is declaring using C# or XAML).

ExtendedTabbedPageRenderer.cs

using System;
using System.Collections.Generic;
using System.Text;
using Xamarin.Forms;
using Xamarin.Forms.Platform.iOS;
using UIKit;
using TabbedPageDemo.iOS;

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

            // Set Text Font for unselected tab states
            UITextAttributes normalTextAttributes = new UITextAttributes();
            normalTextAttributes.Font = UIFont.FromName("ChalkboardSE-Light", 9.0F); // unselected

            UITabBarItem.Appearance.SetTitleTextAttributes(normalTextAttributes, UIControlState.Normal);
        }

        public override UIViewController SelectedViewController {
            get {
                UITextAttributes selectedTextAttributes = new UITextAttributes();
                selectedTextAttributes.Font = UIFont.FromName("ChalkboardSE-Bold", 12.0F); // SELECTED
                if (base.SelectedViewController != null)
                {
                    base.SelectedViewController.TabBarItem.SetTitleTextAttributes(selectedTextAttributes, UIControlState.Normal);
                }
                return base.SelectedViewController;
            }
            set {
                base.SelectedViewController = value;

                foreach (UIViewController viewController in base.ViewControllers)
                {
                    UITextAttributes normalTextAttributes = new UITextAttributes();
                    normalTextAttributes.Font = UIFont.FromName("ChalkboardSE-Light", 9.0F); // unselected

                    viewController.TabBarItem.SetTitleTextAttributes(normalTextAttributes, UIControlState.Normal);
                }
            }
        }
    }
}

Download and run the sample to try different combinations of font, size, style, and color.

Refer to this blog post for details on how to use a different image for the selected and unselected tab states.

Xamarin Workbook

If it's not already installed, install the Xamarin Workbooks app first. The workbook file should download automatically, but if it doesn't, just click to start the workbook download manually.