TabbedPage icons not shown when set position to bottom

Question

I am a beginner in Xamarin and trying to use TabbedPage for my application. When I used TabbedPage and set the icons, it works fine.

Then I set the TabbedPage position to bottom using below link

https://learn.microsoft.com/en-us/xamarin/xamarin-forms/platform/android/tabbedpage-toolbar-placement-color

However, when I run the application, the TabbedPage icons are not visible and even the width is too long for one Tab

Below is my XAML code:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage xmlns="//xamarin.com/schemas/2014/forms"
        xmlns:x="//schemas.microsoft.com/winfx/2009/xaml"
        xmlns:views="clr-namespace:App5.Views"
        x:Class="App5.Views.MainPage"
        BarBackgroundColor="LightYellow"
        BarTextColor="Black"
        xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
        android:TabbedPage.ToolbarPlacement="Bottom"
        android:TabbedPage.BarItemColor="Black"
        android:TabbedPage.BarSelectedItemColor="Red">
<TabbedPage.Children>
    <NavigationPage Title="Tab1" Icon="Tab1.png">
        <x:Arguments>
            <views:ItemsPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Tab2" Icon="Tab2.png">
        <x:Arguments>
            <views:AboutPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Tab3" Icon="Tab3.png">
        <x:Arguments>
            <views:AboutPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Tab4" Icon="Tab4.png">
    <x:Arguments>
        <views:AboutPage />
    </x:Arguments>
</NavigationPage>
</TabbedPage.Children>

Can anyone please help me on this?

Answer 1

I think there may be an issue with the space between the tab when it is selected. You need to disable the zooming effect when the tab is selected.

Create the custom tab reader to disable the zooming effect for Android.

BottomTabbedPageRenderer.cs

  [assembly: ExportRenderer(typeof(TabbedPage), typeof(BottomTabbedPageRenderer))]
namespace Droid.Renderer

{
    public class BottomTabbedPageRenderer : TabbedPageRenderer
    {
    public BottomTabbedPageRenderer(Context context) : base(context)
    {
    }

    protected override void OnLayout(bool changed, int l, int t, int r, int b)
    {
        base.OnLayout(changed, l, t, r, b);
        try
        {
            var children = GetAllChildViews(ViewGroup);

            if (children.SingleOrDefault(x => x is BottomNavigationView) is BottomNavigationView bottomNav)
            {

                try
                {
                    if (!(bottomNav.GetChildAt(0) is BottomNavigationMenuView menuView))
                    {
                        System.Diagnostics.Debug.WriteLine("Unable to find BottomNavigationMenuView");
                        return;
                    }


                    var shiftMode = menuView.Class.GetDeclaredField("mShiftingMode");

                    shiftMode.Accessible = true;
                    shiftMode.SetBoolean(menuView, false);
                    shiftMode.Accessible = false;
                    shiftMode.Dispose();


                    for (int i = 0; i < menuView.ChildCount; i++)
                    {
                        if (!(menuView.GetChildAt(i) is BottomNavigationItemView item))
                            continue;

                        item.SetShiftingMode(false);
                        item.SetChecked(item.ItemData.IsChecked);

                    }

                    menuView.UpdateMenuView();
                }
                catch (Exception ex)
                {
                    System.Diagnostics.Debug.WriteLine($"Unable to set shift mode: {ex}");
                }

            }

        }
        catch (Exception e)
        {
            Console.WriteLine($"Error setting ShiftMode: {e}");
        }
    }

    private List<View> GetAllChildViews(View view)
    {
        if (!(view is ViewGroup group))
        {
            return new List<View> { view };
        }

        var result = new List<View>();

        for (int i = 0; i < group.ChildCount; i++)
        {
            var child = group.GetChildAt(i);

            var childList = new List<View> { child };
            childList.AddRange(GetAllChildViews(child));

            result.AddRange(childList);
        }

        return result.Distinct().ToList();
    }
}
}

MyTabPage.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"
    BarBackgroundColor="LightYellow"
    BarTextColor="Black"
    xmlns:views="clr-namespace:Demo"
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:TabbedPage.ToolbarPlacement="Bottom"
    x:Class="Demo.MyTabPage">
    <TabbedPage.Children>
        <NavigationPage
            Title="Tab1"
            Icon="dashboard_selected.png">
            <x:Arguments>
                <views:MainPage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage
            Title="Tab2"
            Icon="dashboard.png">
            <x:Arguments>
                <views:MainPage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage
            Title="Tab3"
            Icon="error_alert.png">
            <x:Arguments>
                <views:MainPage />
            </x:Arguments>
        </NavigationPage>
        <NavigationPage
            Title="Tab4"
            Icon="menu.png">
            <x:Arguments>
                <views:MainPage />
            </x:Arguments>
        </NavigationPage>
    </TabbedPage.Children>
</TabbedPage>

I put all the images resources in the drawable folder with xhdpi,mdpi,xxhdpi,xxxhdpi with the same name and In my case, it is working fine.