Why the tabs are not in the bottom in Xamarin Forms?

Question

Fellow Developers,

I'm developing an app with Xamarin.Forms and I am using the latest version 3.1, which as far as I know it supports Bottom Tabs in Android. This is my code:

XAML:

<?xml version="1.0" encoding="utf-8"?>
<TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" 
    xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"
    android:TabbedPage.ToolbarPlacement="Bottom"
    android:TabbedPage.BarItemColor="#666666"
    android:TabbedPage.BarSelectedItemColor="Black"
    BarBackgroundColor="#2196F3"
    BarTextColor="White"></TabbedPage>

C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using Xamarin.Forms;

namespace BottomTabsExample
{
    public partial class MainPage : TabbedPage
    {
        public MainPage()
        {
            var navigationPage = new NavigationPage(new History());
            navigationPage.Icon = "ic_history.png";
            navigationPage.Title = "History";

            var navigationPage2 = new NavigationPage(new History());
            navigationPage2.Icon = "ic_earth.png";
            navigationPage2.Title = "Earth";
            Children.Add(navigationPage);
            Children.Add(navigationPage2);
        }
    }
}

However, they are always display in the upper part as the following image:

The previous image uses Android Oreo 8.1 (I also tested the version 7.1 and I had the same result). I got partial examples from these blogs:

https://montemagno.com/xamarin-forms-official-bottom-navigation-bottom-tabs-on-android/

https://blog.xamarin.com/xamarin-forms-3-1-improvments/

Also, the version of .NET Standard and Xamarin.Forms:

Have any of you experienced it before? Does anyone know what am I doing wrong? Thanks for your support.

Answer 1

Why the tabs are not in the bottom in Xamarin Forms?

I found that your were missing InitializeComponent() in your MainPage, that's why the issue happens.

The InitializeComponent() method will load the XAML content, when you delete this method, your XAML content will be ignored.

Solution:

Set Bottom Tabs in C# code behind:

using Xamarin.Forms.PlatformConfiguration.AndroidSpecific;

On<Xamarin.Forms.PlatformConfiguration.Android>().SetToolbarPlacement(ToolbarPlacement.Bottom);