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
});
}
}
}
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
}