Is there a way to center the page title on Android when using Xamarin Forms Shell?

Question

I recently changed to Xamarin Forms and notice that the title isn't centered at the top of the page for Android devices.

Is there a way that I can do this?

Here's an example of what I mean with the title:

Answer 1

You can use the TitleView:

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

    <NavigationPage.TitleView>
        <Label Text="Hello World" HorizontalTextAlignement="Center"/>
    </NavigationPage.TitleView>

    <ContentPage.Content>    
        <StackLayout>
            <!-- Place new controls here -->
            <Label Text="Welcome to Xamarin.Forms!" 
            HorizontalOptions="Center"
            VerticalOptions="CenterAndExpand" />
        </StackLayout>
    </ContentPage.Content>

</ContentPage>

https://www.andrewhoefling.com/Blog/Post/xamarin-forms-title-view-a-powerful-navigation-view

Answer 2

You will have to implement ShellRenderer in this case as you have Xamarin.Forms Shell Project.

using System;
using System.Collections.Specialized;
using System.ComponentModel;
using Android.App;
using Android.Content;
using Android.Content.Res;
using Android.Support.V4.Widget;
using Android.Support.V7.Widget;
using Android.Util;
using Android.Widget;
using Japanese.Droid.CustomRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Toolbar = Android.Support.V7.Widget.Toolbar;

[assembly: ExportRenderer(typeof(Xamarin.Forms.Shell), typeof(MyShellRenderer))]
namespace MyProject.Droid.CustomRenderers
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellToolbarAppearanceTracker CreateToolbarAppearanceTracker()
        {
            return new MyShellToolbarAppearanceTracker(this);
        }

        protected override IShellToolbarTracker CreateTrackerForToolbar(Toolbar toolbar)
        {
            return new MyShellToolbarTracker(this, toolbar, ((IShellContext)this).CurrentDrawerLayout);
        }
    }

    public class MyShellToolbarAppearanceTracker : ShellToolbarAppearanceTracker
    {
        public MyShellToolbarAppearanceTracker(IShellContext context) : base(context)
        {
        }

        public override void SetAppearance(Android.Support.V7.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker, ShellAppearance appearance)
        {
            base.SetAppearance(toolbar, toolbarTracker, appearance);
            //Change the following code to change the icon of the Header back button.

            toolbar?.SetNavigationIcon(Resource.Drawable.back);
        }
    }

    public class MyShellToolbarTracker : ShellToolbarTracker
    {
        public MyShellToolbarTracker(IShellContext shellContext, Toolbar toolbar, DrawerLayout drawerLayout) : base(shellContext, toolbar, drawerLayout)
        {
        }

        protected override void UpdateTitleView(Context context, Toolbar toolbar, View titleView)
        {
            base.UpdateTitleView(context, toolbar, titleView);
            for (int index = 0; index < toolbar.ChildCount; index++)
            {
                if (toolbar.GetChildAt(index) is TextView)
                {
                    var title = toolbar.GetChildAt(index) as TextView;
                    //Change the following code to change the font size of the Header title.
                    title.SetTextSize(ComplexUnitType.Sp, 20);
                    toolbar.SetTitleMargin(MainActivity.displayMetrics.WidthPixels / 4 - Convert.ToInt32(title.TextSize) - title.Text.Length / 2, 0, 0, 0);
                }
            }  
        }
    }
}

Here is the code for MainActivity.cs

public class MainActivity : FormsAppCompatActivity
{
    public static DisplayMetrics displayMetrics;

    protected override void OnCreate(Bundle savedInstanceState)
    {
        Window.AddFlags(WindowManagerFlags.Fullscreen);

        base.OnCreate(savedInstanceState);
        Xamarin.Essentials.Platform.Init(this, savedInstanceState);
        global::Xamarin.Forms.Forms.Init(this, savedInstanceState);

        displayMetrics = new DisplayMetrics();
        WindowManager.DefaultDisplay.GetRealMetrics(displayMetrics);

        LoadApplication(new App());

        if (Window != null) Window.SetStatusBarColor(Android.Graphics.Color.Transparent);
        if (isPhone(this)) RequestedOrientation = ScreenOrientation.Portrait;

    }
}