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

Question

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.

Answer 1

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