Xamarin Forms Remove SHELL Navigation Bar Left Padding

Question

This question is similar to these (1, 2, & 3) questions, but none of their solutions solve my problem.

The issue is the same, I need to remove the left padding in the TitleView, shown below:

I have created a custom Toolbar layout defined as:

<androidx.appcompat.widget.Toolbar
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/toolbar"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:background="?attr/colorPrimary"
    android:theme="@style/ThemeOverlay.AppCompat.Dark.ActionBar"
    android:popupTheme="@style/ThemeOverlay.AppCompat.Light"
    app:contentInsetLeft="0dp"
    app:contentInsetStart="0dp"
    app:contentInsetStartWithNavigation="0dp"/>

And I have set the ToolbarResource to Resource.Layout.Toolbar before calling base.OnCreate(savedInstanceState); in my MainActivity.cs. The padding is still there.

<NavigationPage.TitleView> ... </NavigationPage.TitleView>

It seems that the custom Toolbar layout does not override the Shell's navigation bar but NavigationPages. I am using Shell.TitleView.

Does anyone know how to override and remove the padding from Shell's navigation bar?

@ToolmakerSteve These are two *different* Navigation paradigms. `Shell` provides a different Navigation paradigm as was available with `NavigationPage`, defining my `MainPage` as `NavigationPage` creates a navigation bar without the padding. As I mentioned previously I am using `Shell`, and it's navigation bar still has the padding which I am struggling to override. — Muhammad Khan, Dec 31 '21 at 16:49

score 0 · Answer 1 · answered Dec 31 '21 at 08:18

You can use the CustomShellRenderer to get the toolbar of the shellpage and set the properties. Such as the following code.

MyShellRenderer.cs

using Android.Content;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
[assembly: ExportRenderer(typeof(App9.ShellTest), 
typeof(App9.Droid.MyShellRenderer))]
namespace App9.Droid
{
    internal class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

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

MyShellToolbarAppearanceTracker.cs

using Xamarin.Forms.Platform.Android;

namespace App9.Droid
{
    public class MyShellToolbarAppearanceTracker : 
ShellToolbarAppearanceTracker
    {
        public MyShellToolbarAppearanceTracker(IShellContext context) : 
base(context)
    {
    }

        public override void ResetAppearance(AndroidX.AppCompat.Widget.Toolbar toolbar, IShellToolbarTracker toolbarTracker)
        {
            base.ResetAppearance(toolbar, toolbarTracker);
            toolbar.SetContentInsetsRelative(0, 0);
            toolbar.ContentInsetStartWithNavigation = 0;
        }

    }
}

I implemented this renderer, but there is no change to the padding in `Shell`s nav bar. Setting some breakpoints showed that the class was initialized but the override for `ResetAppearance` was never hit. — Muhammad Khan, Jan 01 '22 at 09:01
In the offical document, the example overrides the SetAppearance method and I have tried but it wasn't hit. So I override the ResetAppearance. You can try to override the SetAppearance method. There is the link about the offical document.[link](https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/shell/customrenderers)@MuhammadKhan — Liyun Zhang - MSFT, Jan 04 '22 at 01:15

Xamarin Forms Remove SHELL Navigation Bar Left Padding

1 Answers1