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

Issue

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:

Solution

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;

    }
}

Answered By – Nikhil