In Xamarin Forms 3.1, when using tabbed page with 4 tabs, how can I prevent "sliding" effect of tab bar on Android?

xamarin forms tabbed page style
xamarin forms tabbed page title
xamarin forms tabbed page events
xamarin forms tabbed page custom navigation bar
xamarin forms tabs in content page
xamarin forms tabbed page with header
xamarin forms tabbed page tab height
xamarin forms tabbed page tab width

I have an app with four pages, and I want it to look similar to my (non-Xamarin) iOS app, so to have toolbar at the bottom. Here is my MainPage.xaml file:

<?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:XaBLE1"
             x:Class="XaBLE1.MainPage"
            Title="Safe-T Sim" HeightRequest="768" WidthRequest="512" 

            BarBackgroundColor="#F1F1F1"
            BarTextColor="Gray"
            xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
            android:TabbedPage.ToolbarPlacement="Bottom"
            android:TabbedPage.BarItemColor="#666666"
            android:TabbedPage.BarSelectedItemColor="Black"
            >

    <NavigationPage Title="Test" Icon="ElectTest.png"
                    HasNavigationBar="False">
        <x:Arguments>
            <local:TestPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Review" Icon="Review.png"
                    HasNavigationBar="False">
        <x:Arguments>
            <local:ReviewPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Setup" Icon="Gear.png"
                    HasNavigationBar="False">
        <x:Arguments>
            <local:SetupPage />
        </x:Arguments>
    </NavigationPage>
    <NavigationPage Title="Info" Icon="Info.png"
                    HasNavigationBar="False">
        <x:Arguments>
            <local:InfoPage />
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

I don't care for the current look-and-feel on Oreo, which is to make the selected page tab larger and put the title, pushing the other tabs aside and removing the page title.

Is there anyway to disable this behavior, and let it just be 4 tabs. Note that this behavior does not happen if there are 3 tabs -- there is only darkening and slight enlarging of the icon & text, but both are visible.

EDIT: I tried the answer suggested in the comments, but as noted I'm not sure this is trying to solve the same problem, and in any case does not change the behavior.

It looks like you are looking for this (not implemented yet) feature: [Enhancement] Implement fixed mode for Bottom Navigation Bar Android (Github)

I could solve it following this James Montemagno tutorial: Removing BottomNavigationView’s Icon Shifting in Xamarin.Android and implementing my own Tabbed Page custom renderer:

using Android.Content;
using Android.Support.Design.Internal;
using Android.Views;
using FixedTabbedPage.Droid.CustomRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(CustomTabbedPageRenderer))]
namespace FixedTabbedPage.Droid.CustomRenderers
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context) : base(context) { }

        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);

            if (ViewGroup != null && ViewGroup.ChildCount > 0)
            {
                BottomNavigationMenuView bottomNavigationMenuView = FindChildOfType<BottomNavigationMenuView>(ViewGroup);

                if (bottomNavigationMenuView != null)
                {
                    var shiftMode = bottomNavigationMenuView.Class.GetDeclaredField("mShiftingMode");

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

                    for (var i = 0; i < bottomNavigationMenuView.ChildCount; i++)
                    {
                        var item = bottomNavigationMenuView.GetChildAt(i) as BottomNavigationItemView;
                        if (item == null) continue;                         

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

                    if (bottomNavigationMenuView.ChildCount > 0) bottomNavigationMenuView.UpdateMenuView();
                }
            }
        }

        private T FindChildOfType<T>(ViewGroup viewGroup) where T : Android.Views.View
        {
            if (viewGroup == null || viewGroup.ChildCount == 0) return null;

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

                var typedChild = child as T;
                if (typedChild != null) return typedChild;

                if (!(child is ViewGroup)) continue;

                var result = FindChildOfType<T>(child as ViewGroup);

                if (result != null) return result;
            }

            return null;
        }
    }
}

You only have to add this code to your Android solution (refactoring namespaces) and here is the result:

Xamarin.Forms TabbedPage, In Xamarin Forms 3.1, when using tabbed page with 4 tabs, how can I prevent “​sliding” effect of tab bar on Android? - xamarin. Xamarin.Forms Tabbed Page. The Xamarin.Forms TabbedPage consists of a list of tabs and a larger detail area, with each tab loading content into the detail area. This article demonstrates how to use a TabbedPage to navigate through a collection of pages.

For disabling tab swipe you can use PlatformConfiguration in your TabbedPage class

public partial class MyTabbedPage : TabbedPage
{
    public MainTabbedPage ()
    {
        InitializeComponent();
        this.On<Xamarin.Forms.PlatformConfiguration.Android>().SetIsSwipePagingEnabled(false);    
    }
}

if you don't have MyTabbedPage class, add it than your axml file structure would look like this

<?xml version="1.0" encoding="utf-8" ?>
<MyTabbedPage xmlns="http://xamarin.com/schemas/2014/forms"
         xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
         x:Class="XaBLE1.MainPage">   
</MyTabbedPage>

How to disable shift mode in Bottom TabbedPage in Xamarin form , Forms TabbedPage consists of a list of tabs and a larger detail area, with This article demonstrates how to use a TabbedPage to navigate through a For information about icon requirements, see Tab Bar Icon Size on developer.apple.​com. Toggle issue Update documentation for Xamarin Forms 3.1. My issue is with the tab at the bottom that came in with Forms 3.1, and getting them to not slide over. Maybe these are related. I tried the codebehind, which forced me to add using Xamarin.Forms.PlatformConfiguration.AndroidSpecific and then resolve the abiguity for TabbedPage -- this did not change the behavior.

It looks like, there is a simpler alternative since Android 9.

From James Matemagno's blog

muhaym/ElegantTabs: Elegant Tabs adds some of nifty , I don't like that color when you click in icons ,can I change it ?? How to disable shift mode in Bottom TabbedPage in Xamarin form 3.1 pre 4 ://montemagno.​com/xamarin-forms-android-selected-and-unselected-tab-colors/. Each tab has it’s own navigation tree, meaning one can go back and forth between pages inside any tab. If a user decides to switch between tabs, the app remembers current position in all the trees. This way one can always pick up from where they left the tab, no matter what has happened in the meantime.

NavigationPage in MasterDetails Master prevents TabbedPage from , Elegant Tabs adds some of nifty features that are missing in Xamarin Forms Tabbed Pages like Disabled Pages, Selected Icons, ability to use original Bottom Navigation Bar in Android and only supports Xamarin Forms Version 3.1 Above. DisableLoad, bool, To avoid navigation / loading the page (suitable for popups). While it was possible (everything is possible with a custom renderer) it took a lot of work to get bottom tabs on Android. Then magically Xamarin.Forms 3.1 was released with a few new magical properties that developers can set on the TabbedPage and also some new Platform Specifics for Xamarin.Forms to enable this funcationality. Let's take a look!

Xamarin.Forms: Official Bottom Navigation/Bottom Tabs on Android , Description When using a NavigationPage in the MasterDetails prevents TabbedPage from rendering correctly (Android) #4989 in a NavigationPage; Set its Detail to a TabbedPage with 3 tabs. Nuget Packages: Xamarin. Tested on Samsung Galaxy Tab Active2 and Samsung Galaxy XConver 4  This article is about Xamarin.Forms. We are developing mostly used mobile app architecture, MasterDetailPage with TabbedPage. This is my second article on C# Corner, Feeling glad. We are going to see today about MasterDetailPage with TabbedPage, Seems unusual but it is certainly not. Many popular apps are out there having the same architecture, for example, C# Corner, Paytm, Google’s Play

Evgeny Zborovsky – .NET Developer | Microsoft MVP, Integrating bottom navigation with tabs on Android with Xamarin. Forms 3.1 which offers official support and customization. while bottom tabs make a lot of sense when you want to use them for your entire application's navigation. Forms maps to the native controls, when you create a Tabbed Page  Each Page in the TabbedPage Children is a simple ContentPage with a Listview. As you switch between tabs, you can see the memory heap grow and the object count grow very very quickly. Steps to reproduce: 1. Run attached repo project 2. Take Heap Snapshot once app has fully loaded and memory tops off 3. Switch between a few tabs in the TabbedPage 4.

Comments
  • duplicate of solved stackoverflow.com/questions/45820704/…
  • Possible duplicate of Xamarin Forms Disable swipe between pages in TabbedPage
  • First -- I see now that when I change pages the pages swipe across -- I didn't notice that before, and while it's not desired, that is OK with me. My issue is with the tab at the bottom that came in with Forms 3.1, and getting them to not slide over. Maybe these are related. I tried the codebehind, which forced me to add using Xamarin.Forms.PlatformConfiguration.AndroidSpecific and then resolve the abiguity for TabbedPage -- this did not change the behavior. The XAML change also did not change the behavior.
  • "I don't care for the current look-and-feel on Oreo" Maybe, but it may be easier for your users if you conform to the expected Android design.
  • @Andy good point. In actuallity, it's not that I don't care for it, it is that my team feels it would be better for Android app to be very similar to iOS app, which has a 1 year lead on it.
  • Wow! That worked perfectly, once I figure out where to put what. I added this as a new class to my "Android" project. I put it into my current namespace (in my case, XaBLE1.Droid), and then the [assembly] line needed that prefixed to the CustomTabbedPageRenderer, thus: [assembly: ExportRenderer(typeof(TabbedPage), typeof( XaBLE1.Droid.CustomTabbedPageRenderer ) )]. Thank you so much!
  • Thank you for this answer, but, unfortunately it has not (yet) worked for me. The code-behind shows SetIsSwipePagingEnabled as not there unless I include using Xamarin.Forms.PlatformConfiguration.AndroidSpecific, which then causes ambiguity on "TabbedPage". I have "fixed" by specifying Xamarin.Forms.TabbedPage, but this has not changed the behavior.
  • I have tested code above working fine. Did you modify your xaml file?
  • I tried adding the line android:TabbedPage.IsSwipePagingEnabled="False" to the xaml file, but when that didn't work I put the code you described in the code-behind for that file.