Changing the shape of tabs in android Xamarin

Question

I would like to ask how to go about changing the shape of tabs in Xamarin for tabbed pages for android application. I know that this would obviously require a custom renderer, however which class do I inherit from? Do I inherit from the TabbedPageRenderer or the TabbedRenderer? Also, how do I know which function calls the rendering of the Tabs so that I can override it?

Answer 1

I know that this would obviously require a custom renderer, however which class do I inherit from? Do I inherit from the TabbedPageRenderer or the TabbedRenderer?

If you want to change the shape of tabs, then you need to inerit your custom renderer from TabbedPageRenderer. Because only TabbedPageRenderer has SetTabIcon to override, which allows you to access current tab object.

Also, how do I know which function calls the rendering of the Tabs so that I can override it?

What you need to override is the SetTabIcon method. In this method, you are able to set the custom view of current tab.

Notes: In order to let SetTabIcon get called, you will need to set the Icon of every sub page, otherwise SetTabIcon won't get called.

So, you can follow below steps to change the shape of your tabs:

1. Create a custom TabbedPage in PCL:

   public class MyTabbedPage:TabbedPage
   {
   }
   

2. Use it in your Page:

   <local:MyTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
                xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
                xmlns:local="clr-namespace:CustomTabbedPageDemo"
                x:Class="CustomTabbedPageDemo.MainPage">
       <!--Icon needs to be set in order to call SetTabIcon-->
       <local:Page1 Title="Page One" Icon="icon.png"/>
       <local:Page2 Title="Page Two" Icon="icon.png"/>
   </local:MyTabbedPage>
   

3. Create a .axml view file in Resource/layout:

   <?xml version="1.0" encoding="utf-8"?>
   <View xmlns:android="http://schemas.android.com/apk/res/android"
       android:background="@drawable/myshape"
       android:layout_width="match_parent"
       android:layout_height="match_parent"></View>
   

4. Define a custom shape xml file(MyShape.xml) in Resource/drawable, you can define any kind of shape you wanted:

   <?xml version="1.0" encoding="utf-8" ?>
   <shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="oval">
     <gradient android:startColor="#FFFF0000" android:endColor="#80FF00FF"
         android:angle="270"/>
   </shape>
   

5. Create Custom Renderer for your custom tabbed page, and override SetTabIcon:

   [assembly:ExportRenderer(typeof(MyTabbedPage),
    typeof(MyTabbedPageRenderer))]
   namespace CustomTabbedPageDemo.Droid
   {
       public class MyTabbedPageRenderer:TabbedPageRenderer
       {
   
           protected override void SetTabIcon(TabLayout.Tab tab, FileImageSource icon)
           {
               base.SetTabIcon(tab, icon);
               tab.SetCustomView(Resource.Layout.tab_view);
           }
       }
   }
   

6. Optionally, you can remove the tabbar's background image by removing android:background of Resource/Tabbar.axml's TabLayout:

   <android.support.design.widget.TabLayout xmlns:android="http://schemas.android.com/apk/res/android"
       xmlns:app="http://schemas.android.com/apk/res-auto"
       android:id="@+id/sliding_tabs"
       android:layout_width="match_parent"
       android:layout_height="wrap_content"
       android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
       app:tabIndicatorColor="@android:color/white"
       app:tabGravity="fill"
       app:tabMode="fixed" />
   

Here is the complete demo, you can refer to:CustomTabbedPageDemo.