Xamarin forms: How to make tabs on bottom of the page?

Question

I am looking for tabs which will be on the bottom part of the page. I tried the xamarin forms TabbedPage, but for ios only the tabs are coming bottom and for android and windows the tabs are showing on the top. Is there any way to achieve this feature?

FabriBertani FabriBertani · Accepted Answer · 2018-10-27T12:47:32

Edit: for new Xamarin.Forms projects you should use Xamarin.Forms Shell, it provides easy tabs and other great features.

To accomplish that you have 3 options:

1) To use new bottom tabbar native control you must have Xamarin Forms version 3.1 or above.

On your tabbed page you need to add the android specification for bottom placemente:

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:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:TabbedPage.ToolbarPlacement="Bottom"
    x:Class="YouProjectNameSpace.MyTabbedPage">
</TabbedPage>

Or c# code behind

using System;
using Xamarin.Forms.PlatformConfiguration;
using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;
using Xamarin.Forms;

namespace YouProjectNameSpace
{
    public partial class MyTabbedPage : TabbedPage
    {
        public MyTabbedPage()
        {
            InitializeComponent();
            On<Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);
        }
    }
}

If you want more customization you can add:

<?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:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:TabbedPage.ToolbarPlacement="Bottom"
    BarBackgroundColor="#2196F3"
    BarTextColor="White"
    android:TabbedPage.BarItemColor="#66FFFFFF"
    android:TabbedPage.BarSelectedItemColor="White"
    x:Class="YouProjectNameSpace.MyTabbedPage">
</TabbedPage>

2) Create a custom renderer for Android of the tabbed page and move it to the bottom

using System;
using Xamarin.Forms;

namespace YouProjectNameSpace
{
    public class CustomTabbedPage : TabbedPage
    {
    }
}

And the renderer:

using System;
using Android.Content;
using Android.Support.Design.Widget;
using Android.Support.V4.View;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
namespace YouProjectNameSpace.Android
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer
    {
        public CustomTabbedPageRenderer(Context context): base(context)
        {
        }

        protected override void OnLayout(bool changed, int l, int t, int r, int b)
        {
            this.InvertLayoutThroughScale();

            base.OnLayout(changed, l, t, r, b);
        }

        private void InvertLayoutThroughScale()
        {
            this.ViewGroup.ScaleY = -1;

            TabLayout tabLayout = null;
            ViewPager viewPager = null;

            for (int i = 0; i < ChildCount; ++i)
            {
                Android.Views.View view = GetChildAt(i);
                if (view is TabLayout tabs)
                    tabLayout = tabs;
                else if (view is ViewPager pager)
                    viewPager = pager;
            }

            tabLayout.ViewTreeObserver.AddOnGlobalLayoutListener(new GlobalLayoutListener(viewPager, tabLayout));

            tabLayout.ScaleY = viewPager.ScaleY = -1;
        }

        private class GlobalLayoutListener : Java.Lang.Object, Android.Views.ViewTreeObserver.IOnGlobalLayoutListener
        {
            private readonly ViewPager viewPager;
            private readonly TabLayout tabLayout;

            public GlobalLayoutListener(ViewPager viewPager, TabLayout tabLayout)
            {
                this.viewPager = viewPager;
                this.tabLayout = tabLayout;
            }

            public void OnGlobalLayout()
            {
                this.viewPager.SetPadding(0, -this.tabLayout.MeasuredHeight, 0, 0);
                this.tabLayout.ViewTreeObserver.RemoveOnGlobalLayoutListener(this);
            }
        }
    }
}

3) Use specific library like PXTabs, this one creates a full Xamarin Forms bottom tabs without any native code.

If you want to read more about bottom tabs and renderers:

Setting TabbedPage Toolbar Placement and Color

Xamarin.Forms: Official Bottom Navigation/Bottom Tabs on Android

BottomNavigationBarXF

Xamarin forms: How to make tabs on bottom of the page?

2 Answers