Custom renderer for TabbedPage hides Tabbar

Issue

I'm currently trying to use a custom renderer for my TabbedPage.

I actually want to use the renderer to change the font of the tabs. Unfortunately the Tabbar is not visible when I'm using the renderer. Without the renderer the Tabbar is shown.

Did I forget something?

My Page:

<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
        xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
        xmlns:d="http://xamarin.com/schemas/2014/forms/design"
        xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
        mc:Ignorable="d"
        xmlns:views="clr-namespace:***.Views"
        x:Class="***.Views.MainPage"
        xmlns:utils="clr-namespace:***.Utils"
        BarBackgroundColor="Black" BarTextColor="White"
        xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
        android:TabbedPage.ToolbarPlacement="Bottom"
        android:TabbedPage.BarTextColor="White"
        android:TabbedPage.BarItemColor="Gray"
        android:TabbedPage.BarSelectedItemColor="White"
        android:TabbedPage.IsSwipePagingEnabled="False"
        CurrentPageChanged="changeTab"
        x:Name="mainTabbedView">

<TabbedPage.Children>
    <NavigationPage Title="1" HeightRequest="20">
        <NavigationPage.Icon>
            <OnPlatform x:TypeArguments="FileImageSource" >
                <On Platform="iOS" Value="pic1"/>
                <On Platform="Android" Value="pic1"/>
            </OnPlatform>
        </NavigationPage.Icon>
        <x:Arguments>
            <views:NewPage />
        </x:Arguments>
    </NavigationPage>

    <NavigationPage Title="2">
        <NavigationPage.Icon>
            <OnPlatform x:TypeArguments="FileImageSource">
                <On Platform="iOS" Value="pic2"/>
                <On Platform="Android" Value="pic2"/>
            </OnPlatform>
        </NavigationPage.Icon>
        <x:Arguments>
            <views:OtherPage />
        </x:Arguments>
    </NavigationPage>

    <NavigationPage Title="3">
        <NavigationPage.Icon>
            <OnPlatform x:TypeArguments="FileImageSource">
                <On Platform="iOS" Value="pic3"/>
                <On Platform="Android" Value="pic3"/>
            </OnPlatform>
        </NavigationPage.Icon>
        <x:Arguments>
            <views:LastPage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage.Children>

And the Renderer:

using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using ***.Droid;
using Android.Content;


[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]

namespace ***.Droid
{
    class CustomTabbedPageRenderer : TabbedRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }
    }
}

Solution

I hope that after all you fixed your problem, if not:

The Solution

In your renderer, in the Android Project, you will have to inherit from TabbedPageRenderer instead of from TabbedRenderer, as follows

...
public class CustomTabbedPageRenderer : TabbedPageRenderer
{
  public CustomTabbedPageRenderer(Context context) : base(context)
  {
  }
}
...

Note

A similar question can be found here.

Answered By - Deczaloth