TabbedPage Toolbar only shows the active ToolbarIt

Question

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 than 4, then the Toolbar will no show all the tabs there, only the current active tab will be showed. the other ones can be only switched and then the tab will be selected accordingly. this is my code, There should be four tabs in the toolbar :

<?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">

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

</TabbedPage>

see this pictures please:

https://cdn1.imggmi.com/uploads/2019/6/11/6659fa76fc68ae58deb17d6dfd74f089-full.jpg https://cdn1.imggmi.com/uploads/2019/6/11/150fe2463357f9008da3bed6d976d1bd-full.jpg

I need to show all page titles. what should I do for this problem?

Answer 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

Answer 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