TabbedPage Toolbar Placement and Color on Android

Download Sample Download the sample

Important

The platform-specifics that set the color of the toolbar on a TabbedPage are now obsolete and have been replaced by the SelectedTabColor and UnselectedTabColor properties. For more information, see Create a TabbedPage.

These platform-specifics are used to set the placement and color of the toolbar on a TabbedPage. They are consumed in XAML by setting the TabbedPage.ToolbarPlacement attached property to a value of the ToolbarPlacement enumeration, and the TabbedPage.BarItemColor and TabbedPage.BarSelectedItemColor attached properties to a Color:

<TabbedPage ...
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="Black"
            android:TabbedPage.BarSelectedItemColor="Red">
    ...
</TabbedPage>

Alternatively, they can be consumed from C# using the fluent API:

using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
...

On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom)
             .SetBarItemColor(Color.Black)
             .SetBarSelectedItemColor(Color.Red);

The TabbedPage.On<Android> method specifies that these platform-specifics will only run on Android. The TabbedPage.SetToolbarPlacement method, in the Xamarin.Forms.PlatformConfiguration.AndroidSpecific namespace, is used to set the toolbar placement on a TabbedPage, with the ToolbarPlacement enumeration providing the following values:

  • Default – indicates that the toolbar is placed at the default location on the page. This is the top of the page on phones, and the bottom of the page on other device idioms.
  • Top – indicates that the toolbar is placed at the top of the page.
  • Bottom – indicates that the toolbar is placed at the bottom of the page.

In addition, the TabbedPage.SetBarItemColor and TabbedPage.SetBarSelectedItemColor methods are used to set the color of toolbar items and selected toolbar items, respectively.

Note

The GetToolbarPlacement, GetBarItemColor, and GetBarSelectedItemColor methods can be used to retrieve the placement and color of the TabbedPage toolbar.

The result is that the toolbar placement, the color of toolbar items, and the color of the selected toolbar item can be set on a TabbedPage:

TabbedPage toolbar configuration