How can I make custom tabbed page in MAUI?

Question

I created a tabbed page, and I am trying to achieve this kind of Bottom Tab Bar.

I manage to do this in Android using TabbedViewHandler, but there is an unwanted white layer behind the custom tab bar, how can I remove this? and also I couldn't found a similar solution for iOS.

I tried this for Android:

using Microsoft.Maui.Handlers;
using Microsoft.Maui.Controls.Platform;
using System.Reflection;
#if ANDROID
using static Android.Views.ViewGroup;
using Android.Graphics.Drawables;
using Google.Android.Material.BottomNavigation;
using AndroidX.Core.View;
#endif

namespace Project.Views.Handlers
{
    public class AndroidTabbedPageHandler : TabbedViewHandler
    {
        public AndroidTabbedPageHandler()
        {
            Mapper.AppendToMapping(nameof(CustomTabbedPage), (handler, view) =>
            {
#if ANDROID
                if (view is CustomTabbedPage)
                {
                    FieldInfo tabbedPageManagerFieldInfo = typeof(TabbedPage).GetField("_tabbedPageManager", BindingFlags.NonPublic | BindingFlags.Instance);
                    object tabbedPageManager = tabbedPageManagerFieldInfo?.GetValue(view);

                    FieldInfo tabLayoutFieldInfo = tabbedPageManager?.GetType().GetField("_bottomNavigationView", BindingFlags.NonPublic | BindingFlags.Instance);
                    BottomNavigationView bottomNavigationView = tabLayoutFieldInfo?.GetValue(tabbedPageManager) as BottomNavigationView;

                    if (bottomNavigationView != null)
                    {
                        GradientDrawable drawable = new GradientDrawable();
                        drawable.SetShape(ShapeType.Rectangle);
                        drawable.SetColor(Android.Graphics.Color.White);
                        drawable.SetCornerRadius(40);
                        MarginLayoutParams layoutParams = new(LayoutParams.WrapContent, LayoutParams.WrapContent);
                        layoutParams.SetMargins(20, 0, 20, 40);
                        bottomNavigationView.LayoutParameters = layoutParams;
                        bottomNavigationView.LabelVisibilityMode = LabelVisibilityMode.LabelVisibilityUnlabeled;
                        bottomNavigationView.SetElevation(12);
                        ViewCompat.SetBackground(bottomNavigationView, drawable);
                    }
                }
#endif
            });
        }
    }
}

Answer 1

For iOS, please refer to the TabbarRenderer source code in .NET MAUI ,the TabbedPage is implemented by TabbedRenderer on iOS platform, so you can try to create a new Renderer class and let it inherit TabbedRenderer.

Specifically, you can change the position and angle of the Tabbar by override the iOS native method named ViewDidLayoutSubviews like the following code.

    public class CustomTabbar : TabbedRenderer
    {
#if iOS
        public override void ViewDidLayoutSubviews()
        {
            Tabbar.Layer.CornerRadius = 40;
            Tabbar.Layer.MasksToBounds = True;
            TabBar.Frame = new CoreGraphics.CGRect(TabBar.Frame.X + 10, TabBar.Frame.Y - 20, TabBar.Frame.Width - 20, TabBar.Frame.Height + 5);
        }
#end if
    }