Xamarin Forms: Tabbedpage icon and title overlapping

Question

I have created a tabbed page in my xamarin forms project. Using android:TabbedPage.ToolbarPlacement="Bottom" option I added it on the bottom of android device. But Currently the icon and text are overlapping in tabs.

Screenshot:

TabbedPage.xaml

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
            xmlns:local="clr-namespace:SmartWCM;assembly=SmartWCM"
            BarTextColor="#0091da"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            BarBackgroundColor="#f2f2f2"
            android:TabbedPage.BarItemColor="#0091da"
            android:TabbedPage.BarSelectedItemColor="#0091da"
            x:Class="Proj.MyTabbedPage">
</TabbedPage>

TabbedPage.xaml.cs

//I have added all the child from xaml.cs like below.
var homePage = new Pages.HomePage(false)
            {
                Title = "Home",
                Icon = "ic_home_xx.png"
            };

            var topicsPage = new TweetsTopicsPage()
            {
                Title = "Announcements",
                Icon = "ic_topics_fill_xx.png"
            };

            var groupPage = new TweetsGroupPage()
            {
                Title = "Class",
                Icon = "ic_group_xx.png"
            };

            var ABPage = new DirectoryPage()
            {
                Title = "Contacts",
                Icon = "ic_addressbook_xx.png"
            };
            Children.Add(homePage);
            Children.Add(topicsPage);
            Children.Add(groupPage);
            Children.Add(ABPage);

Already found the same issue here. Is there any way to solve this issue from xaml.cs? Because I have a lot of conditions in xaml.cs.

To GiampaoloGabba

I added the custom renderer from here but still the text is overlapped with icon, see the below screenshot.

Answer 1

This is due the "shift mode" that is activated when there are 4 or more tabs. You can try to fix it with an effect, check if this answer resolve your issue: https://stackoverflow.com/a/56545801/9823528