Skip to content

Tabbed Navigation

The TabbedPage is used for tabbed navigation. The layout of the a TabbedPage is dependent on the platform. On Android the tabs are displayed at the top and on iOS at the bottom.

On iOS the tabs have a GetIcon method that can be overridden to load icons from specified source. On Android tabs have a SetTabIcon method that allows loading icons from a custom drawable.

Create a Tabbed Page in Code

The TabbedPage have a Children property. We can assign child objects to the property to add them to the TabbedPage as follows :

public class MainPageCS : TabbedPage
  public MainPageCS ()
    var navigationPage = new NavigationPage (new SchedulePageCS ());
    navigationPage.Icon = "schedule.png";
    navigationPage.Title = "Schedule";

    Children.Add (new TodayPageCS ());
    Children.Add (navigationPage);

Bottom Navigation tabs on Android

We can show the tabs at the bottom on Android by adding the following code in the class that derives from the tabbed page:


Change Colors

The tab bar can be customized for each platform


The changes below should be madein the iOS project

  • Open the AppDelegate.cs file
  • Within the method FinishedLaunching add the following lines
public override bool FinishedLaunching(UIApplication app, NSDictionary options)
    // The background color of the tab bar
    UITabBar.Appearance.BarTintColor = UIColor.Orange;
    // Change the tint of the selected image and text
    UITabBar.Appearance.SelectedImageTintColor = UIColor.White;

    LoadApplication(new App());

    return base.FinishedLaunching(app, options);


On Android you can change the colors in the Android project under the Resources -> values - >