How to make my Tabbar transparent in MAUI App

Question

I have used a customShellHandler to make a tabBar in my home screen placed bottom of my screen. Since I used margin and radius, the background of tab show as white. I wanted to make it transparent to display the content page's color This is How my page looks

Here is my AppShell.XAML

<TabBar >
     <Tab Title="Add New" >
         <ShellContent
         ContentTemplate="{DataTemplate local:AddNewAwake}"
         Route="AddNewAwake" />
     </Tab>
     <Tab Title="Upcoming">
         <ShellContent
         ContentTemplate="{DataTemplate local:UpcomingAwake}"
         Route="UpcomingAwake" />
     </Tab>
</TabBar>

---Below is my CustomHandler

internal class CustomShellBottomNavViewAppearanceTracker(IShellContext shellContext, ShellItem shellItem)
    : ShellBottomNavViewAppearanceTracker(shellContext, shellItem)
{
    private readonly IShellContext shellContext = shellContext;
    public static Color color = Colors.Red;
    public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
    {

        base.SetAppearance(bottomView, appearance);
        if (Shell.GetTabBarIsVisible(shellContext.Shell.CurrentPage))
        {
            var backgroundDrawable = new GradientDrawable();
            backgroundDrawable.SetShape(ShapeType.Rectangle);
            backgroundDrawable.SetCornerRadius(30);
            backgroundDrawable.SetColor(appearance.EffectiveTabBarBackgroundColor.ToPlatform());

            bottomView.SetBackground(backgroundDrawable);
            var layoutParams = bottomView.LayoutParameters;
            if (layoutParams is ViewGroup.MarginLayoutParams marginLayoutParams)
            {
                const int margin = 30;
                marginLayoutParams.BottomMargin = margin;
                marginLayoutParams.LeftMargin = margin;
                marginLayoutParams.RightMargin = margin;
                bottomView.LayoutParameters = layoutParams;
            }
        }
    }

}

I want the background of my tab to be transparent

Answer 1

Take the gray background in your picture as an example:

Create styles.xml file in Platforms/Android/Resources/values, and set its Build Action to AndroidResource:

<?xml version="1.0" encoding="utf-8" ?>
<resources>
    <style name="MyTheme" parent="@style/Maui.SplashTheme">
        <item name="android:background">#BEBEBE</item>

   </style>
</resources>

Change @style/Maui.SplashTheme to Theme = "@style/MyTheme" :

[Activity(Theme = "@style/MyTheme", ...)]
public class MainActivity : MauiAppCompatActivity
{
}

In your CustomShellBottomNavViewAppearanceTracker:

public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
{


   base.SetAppearance(bottomView, appearance);
    if (Shell.GetTabBarIsVisible(shellContext.Shell.CurrentPage))
    {
        var backgroundDrawable = new GradientDrawable();
        backgroundDrawable.SetShape(ShapeType.Rectangle);
        backgroundDrawable.SetCornerRadius(30);
        backgroundDrawable.SetColor(appearance.EffectiveTabBarBackgroundColor.ToPlatform());


       bottomView.SetBackground(backgroundDrawable);
       
        bottomView.SetElevation(0);


       
        var layoutParams = bottomView.LayoutParameters;
        if (layoutParams is ViewGroup.MarginLayoutParams marginLayoutParams)
        {
            const int margin = 30;
            marginLayoutParams.BottomMargin = margin;
            marginLayoutParams.LeftMargin = margin;
            marginLayoutParams.RightMargin = margin;
            bottomView.LayoutParameters = layoutParams;
        }
        


       for (int i = 0; i < bottomView?.ChildCount; i++)
        {
            BottomNavigationMenuView? res =bottomView.GetChildAt(i) as BottomNavigationMenuView;
            if (res != null)
            {
                res.ItemIconSize = 0;
            }


           for (int j = 0;j<res?.ChildCount;j++)
            {
                var res2 =res.GetChildAt(j) as BottomNavigationItemView;
                res2?.SetBackgroundColor(Color.Black);
                
                for (int k = 0; k < res2?.ChildCount; k++)
                {
                    var res3 = res2.GetChildAt(k) as BaselineLayout;
                    res3?.SetBackgroundColor(Color.Black);


                   for (int L = 0; L < res3?.ChildCount; L++)
                    {
                        var res4 = res3.GetChildAt(k) as MaterialTextView;
                        res4?.SetBackgroundColor(Color.Black);
                        
                    }
                }
            }
        }
         
    }
}

And your appshell:

<Shell
    x:Class="MauiApp2.AppShell"
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:local="clr-namespace:MauiApp2"
    Shell.TabBarBackgroundColor="Black"
    Shell.TabBarTitleColor="White"
    Shell.TabBarUnselectedColor="Grey"
    Shell.NavBarIsVisible="False"
    Shell.FlyoutBehavior="Disabled"
    Title="MauiApp2" >



    <TabBar>
        <Tab Title="Add New">
            <ShellContent Title="Home"
                          ContentTemplate="{DataTemplate local:MainPage}"
                          Route="MainPage" />
        </Tab>
        <Tab Title="Upcoming">
            <ShellContent Title="NewPage2"
                          ContentTemplate="{DataTemplate local:NewPage2}"
                          Route="NewPage2" />
        </Tab>
    </TabBar>

</Shell>