XamGirl

When working with the TabbedPage in most cases we have a design requirement that require us to do some customizations.

In this article I’m going to show you how to customize your TabbedPage by doing some cool stuff, that covers the following topics:

• Bottom Tabbed Page
• Adding custom font/selecting text color to the Tab item title
• Customize icons
• Adding custom backgrounds
• Remove animation in Android Bottom Tabbed Page 

To do these customizations we will use a custom renderer on each platform to render the TabbedPage.

Android Bottom Tabbed Page

In Xamarin Forms v3.1 was released the Bottom Tabbed Page, which is pretty easy to use, you just have to user the android platform specific:

android:TabbedPage.ToolbarPlacement=”Bottom”

I won’t talk much about it, I just mention it because all the customizations we will do in Android will be based on the bottom tabbed page, so for more information please take a look to this article of James Montemagno about it.

Adding custom font/selected text color to the Tab item title

The TabbedPage by default has a pre-defined font, also it sets the same text color to all the tabbed items. We will change that by using a custom renderer.

iOS

In the method ViewWillAppear will iterate the Tab children and then change each item setting a SetTitleTextAttributes. A TextAttribute has different states (Normal/Selected…), so will set a new font for each state and will also change the text color.

Android

Doing this on Android is pretty similar. In the OnElementChanged method, we get the BottonNavigationView and then iterate the children to get the TextView for each item. Each Item has two TextViews one small(shown in normal tab item state) and one large (that’s shown when item selected), we will change both.

To change the text color of the Selected Item we use the TextView SetTextColor method. Also, we have to do similar changes in the NavigationItemSelected event method to set the text color to the tab currently selected and restore the original color to the one selected before.

Customize icons

In the TabbedPage sometimes we want to add a custom icon like the app logo as one of the icons in our tabs. So let’s see what happens if the Xamarin Logo.

As you can see the icon is displayed as Gray, that’s because it is taking the tabbed tint color.

The result we want will be something like this:

So to fix it we will have to remove the tint color for that specific item, and also handle the logic to change the icon.

iOS

The code in iOS is pretty simple, in our custom renderer we will override the method GetIcon and will set the image by using the UIImage extension method ImageWithRenderingMode passing the value AlwaysOriginal for the specific icon we want to change.

Is important to mention that I’m not setting AlwaysOriginal to all the icons because I want to continue applying the tint color to the rest of the icons, in case you want to handle the icon change logic of every icon you can apply it to all.

Android

In Android we will be applying the same concept first so will remove the Tint color from all the items in the OnLayout Method and then in the NavigationItemSelected event method will change the tint of the selected/unselected icon except for our custom icon.

Xamarin Forms

Finally, in our custom tabbed page will change our custom icon by overriding the method OnCurrentPageChanged.

Adding custom backgrounds

Another custom thing that is often required is to add a custom background for each tab item.

For example something like this:

PDT: Is this sample I’m adding a line, but you can use a similar code to do any background customization.

Let’s see how to do it:

iOS

The UITabBar has a property called SelectionIndicatorImage were we will set a new UIImage and add our customizations there.

Android

On Android, you can use a LayerDrawable to set the background on the BottomNavigationView. In this case, I calculated the position and width for the bottom line background based on the tab item that’s selected, then set it as the BottomNavigationView background.

Remove animation in Android Bottom Tabbed Page

One more thing, is how to remove the default tabbed animation on Android.

Result:

This was taken from an article by James Montemagno, so will leave the reference here.

To finalize this article I did a sample with all these things together, you can check the full source code here.

Happy coding!