.NET MAUI Is there a way to make the TabBar element have rounded corners?

Viewed 32

I have been looking at the Shell class and it seems that they only have a few properties available regarding changing the look of the tabbar. I have also looked on Microsoft's docs and couldn't find any info.

I am specifically looking for solutions that work for android.

1 Answers

First, you need to define a Shellrenderer in your project to overwrite the method.

using Android.Content;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Xaminals.AppShell), typeof(Xaminals.Droid.MyShellRenderer))]
namespace Xaminals.Droid
{
    public class MyShellRenderer : ShellRenderer
    {
        public MyShellRenderer(Context context) : base(context)
        {
        }

        protected overrideIShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new MyShellToolbarAppearanceTracker();
        }
    }
}

Second, The MyShellRenderer class overrides the CreateBottomNavViewAppearanceTracker method and returns an instance of the MyShellToolbarAppearanceTracker class, so you need to rewrite the return class to change the form of the tabbar.

Here is the code :

using AndroidX.AppCompat.Widget;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

namespace Xaminals.Droid
{
    public class MyShellToolbarAppearanceTracker : IShellBottomNavViewAppearanceTracker
    {
        public MyShellToolbarAppearanceTracker(IShellContext context) : base(context)
        {
        }

         public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
       {
           bottomView.SetBackgroundResource(Resource.Drawable.forms);
       }
    }
}

Last, you create a form.xml in your Resources/drawable and you can change the form of the shell tabbar.

Here is the code:

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
  <corners 
     android:topLeftRadius="15dp"
     android:topRightRadius="15dp"
     android:bottomLeftRadius="15dp"
     android:bottomRightRadius="15dp"
  />
</shape>

More information for Shellrenderer

Related