Android

It’s very simple to set selected and unselected colors for Android devices. You can take advantage of the available platform specifics. Namely android:TabbedPage.BarItemColor  and android:TabbedPage.BarSelectedItemColor . Both can be easily set as attributes on the <TabbedPage>. For example:

The result:

Android TabbedPage colors

 

 

 

Note, to use platform specific properties, you need to define the namespace for them (i.e. xmlns:android ). It’s not part of this guide but you can see that we’re placing tabs on the bottom of the page, using another platform specific property android:TabbedPage.ToolbarPlacement="Bottom" . For more information around TabbedPage colors for android go to the official docs.

 

iOS

On iOS selected color is controlled with the BarTextColor  property. This actually controls both color of the icon and text below the icon. Unfortunately, at the moment there’s no easy way of setting the unselected color, so we will need to create an Effect or a Custom Renderer to set it. It’s always better to create an Effect rather than a Custom Renderer, as per recommendation. We will be using UnselectedItemTintColor property (available from iOS 10+) of the TabBar .

First let’s set up the effect in the platform independent project (.NET Standard library):

Next let’s create a platform specific class, that will set the color for the unselected tab item:

In the above code we retrieve the UITabBar element from the Container.Subviews  property and then we set the UnselectedItemTintColor.

The last thing to do is to add this effect to your TabbedPage :

The result:

iOS TabbedPage colors

 

 

 

You should not forget that to get the Effects working, you need to register them with Xamarin.Forms using ResolutionGroupNameAttribute. I tend to put that attribute either in the AppDelegate.cs (iOS) or in the MainActivity.cs file (Android). In this case we just need to define it for iOS:

Sample code for the above can be found in this repo: https://github.com/Progrunning/TabbedPagePlayground

Leave a Reply

*

captcha *