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

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.

Does this answer your question? [Xamarin Forms Shell TabBar Rounded Corner](https://stackoverflow.com/questions/65783667/xamarin-forms-shell-tabbar-rounded-corner) — Cfun, Sep 22 '22 at 18:30

score 1 · Answer 1 · answered Sep 23 '22 at 02:26

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

I was actually trying to do this method but it seems like the Drawable data is stored in the Resource meta data now as where in Xamarin there was a Drawable folder in the Android project folder.. Do you know where I would put this xml code? — Codinger, Sep 23 '22 at 13:43
Yes, the xml file should be put in the Android project folder and you can find the Drawable folder in Resource, then put the xml file in it. You rewrite the form and you should give it a new form for Android project. If you want change it in ios you should rewrite it in ios project folder. — Guangyu Bai - MSFT, Sep 26 '22 at 01:15
I understand what you said but what I was trying to say is that in .NET MAUI apps there isn't a Drawable folder in the Resource folder. There is only a values folder. Your solution is for Xamarin and I am using .NET MAUI. — Codinger, Sep 26 '22 at 12:42
In maui, you can put it in the Platform/Android/resources/values and change the resource route in the code to use the xml file. — Guangyu Bai - MSFT, Sep 27 '22 at 08:27
As long as the route is right and you will get the xml file. — Guangyu Bai - MSFT, Sep 27 '22 at 08:29

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

1 Answers1