TabbedPage Toolbar Only Shows The Active ToolbarItem When ToolbarPlacement Is Bottom And ContentPage Count Bigger Than 4

There is a feature in Xamarin.Forms 3.1 version which we already support for Android toolbar to be placed in the bottom. But when the content page within the Tabbed Page is bigger

Solution 1:

Hi this is a known issue with bottom tab bar when there are more than 3 items android will activate shift mode. You can do a custom render to fix this issue.

Copy paste code from here to your project to implement custom render to turn shift mode off https://gist.github.com/LynoDesu/64904b6d143892cf14a60a32798a36bb

Solution 2:

You can fix it with a Routing Effect that disable the shifting and properly display the labels.

A reusable effect is better, safer and easier to use than a custom renderer that use reflection.

First make sure to compile against Android 9.0 (Target Frameowrk) and update the Xamarin Android support libraries to v28+

In the platform code (Android Project) create this effect:

using Android.Support.Design.BottomNavigation;
using Android.Support.Design.Widget;
using Android.Views;
using KvApp.Droid.Effects;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly:ResolutionGroupName ("MelkRadar")]
[assembly:ExportEffect (typeof(NoShiftEffect), nameof(NoShiftEffect))]
namespace MelkRadar.Droid.Effects
{
    public class NoShiftEffect : PlatformEffect
    {
        protected override void OnAttached ()
        {
            if (!(Container.GetChildAt(0) is ViewGroup layout))
                return;

            if (!(layout.GetChildAt(1) is BottomNavigationView bottomNavigationView))
                return;

            // This is what we set to adjust if the shifting happens
            bottomNavigationView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityLabeled;
        }

        protected override void OnDetached ()
        {
        }
    }
}

Add the effect inside your shared code (NetStandard Project)

using Xamarin.Forms;

namespace MelkRadar
{
    public class NoShiftEffect : RoutingEffect
    {
        public NoShiftEffect() : base("MelkRadar.NoShiftEffect")
        {
        }
    }
}

Now you can use the effect in your Xaml Page:

<?xml version="1.0" encoding="utf-8" ?>
<TabbedPage
x:Class="MelkRadar.App.MobileApp.Views.TabbedView"
xmlns="http://xamarin.com/schemas/2014/forms"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
xmlns:view="clr-namespace:MelkRadar.App.MobileApp.Views"
android:TabbedPage.ToolbarPlacement="Bottom"
BarTextColor="Red">

<TabbedPage.Effects>
    <local:NoShiftEffect />
</TabbedPage.Effects>

<view:CustomerExplorerView Title="مشتریان" />
<view:RealtorSettingView Title="تنظیمات" />
<view:FavoriteAdvertsExplorerView Title="زونکن" />
<view:AdvertsExplorerView Title="اگهی ها" />

</TabbedPage>

More on effects here

Complete guide from James Montemagno here