Gradient Tabbar Color in .Net Maui

Question

As you can see that is tabbar I am able to create it in .net maui. But, one thing that this tabbar background color is gradient. There is an option for changing color of tabbar but not gradient color. How can I change it? Also, I found one solution that is using image, but it is not effective. Any solution to do it using like renders and handlers?

Answer 1

Hello,

You can do this by shellrenderer.

Firstly, please create a custom ShellRenderer in Platforms\Android folder. Then override CreateBottomNavViewAppearanceTracker method. You can set BottomNavigationView background.

using AndroidX.Core.Content;
using Google.Android.Material.BottomNavigation;
using Microsoft.Maui.Controls.Handlers.Compatibility;
using Microsoft.Maui.Controls.Platform.Compatibility;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;


namespace YourProject.Platforms.Android
{
    internal class MyShellRenderer:ShellRenderer
    {
        protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)
        {
            return new MyBottomNavViewAppearanceTracker();
        }
    }


   internal class MyBottomNavViewAppearanceTracker : IShellBottomNavViewAppearanceTracker
    {
        public void Dispose()
        {
        }


       public void ResetAppearance(BottomNavigationView bottomView)
        {
        }


       public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)
        {
            bottomView.Background = ContextCompat.GetDrawable(Microsoft.Maui.ApplicationModel.Platform.CurrentActivity, Resource.Drawable.gradient);
        }
    }
}

Next, you need to create a folder called drawable in Platforms\Android\Resources\ folder.

Then add a xml called gradient.xml with following in Platforms\Android\Resources\drawable\.

And set gradient.xml's build action is AndroidResource, open gradient.xml and copy following code in it.

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="
http://schemas.android.com/apk/res/android">

    <gradient

        android:type="linear"

        android:startColor="#ee5f8a"

        android:endColor="#ed8f6d"

        android:angle="0"/>
</shape>

In the end, you can set this shell renderer in MauiProgram.cs like following code.

 public static MauiApp CreateMauiApp()

        {

            var builder = MauiApp.CreateBuilder();

            builder

                .UseMauiApp<App>()

                .ConfigureFonts(fonts =>

                {

                    fonts.AddFont("OpenSans-Regular.ttf", "OpenSansRegular");

                    fonts.AddFont("OpenSans-Semibold.ttf", "OpenSansSemibold");

                }).ConfigureMauiHandlers((handlers) =>

                {
// set custom renderer here
#if ANDROID
                handlers.AddHandler(typeof(AppShell), typeof(MauiGradientTabbar.Platforms.Android.MyShellRenderer));
#endif
                });

Best Regards,

Leon Lu

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.