How to use a custom icon in tab page xamarin forms?

Question

I made a tabbed page,and want to use custom tab icon,but the icon is not showing actual image,its changes the overlay.

Here is my tabs

I want to like this middle icon

how to do it using tabbed page in xamarin forms

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

Please add following custom renderer for tabbedpage.

   using Android.App;  
   using Android.Content;  
   using Android.OS;  
   using Android.Runtime;  
   using Android.Views;  
   using Android.Widget;  
   using Google.Android.Material.BottomNavigation;  
   using System;  
   using System.Collections.Generic;  
   using System.Linq;  
   using System.Text;  
   using TabbedPageWithNavigationPage.Droid;  
   using Xamarin.Forms;  
   using Xamarin.Forms.Platform.Android;  
   using Xamarin.Forms.Platform.Android.AppCompat;  
     
   [assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedPageRenderer))]  
   namespace TabbedPageWithNavigationPage.Droid  
   {  
       class MyTabbedPageRenderer : TabbedPageRenderer  
       {  
           public MyTabbedPageRenderer(Context context) : base(context)  
           {  
     
           }  
     
           protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)  
           {  
               base.OnElementChanged(e);  
     
               if (e.OldElement == null && e.NewElement != null)  
               {  
                   for (int i = 0; i <= this.ViewGroup.ChildCount - 1; i++)  
                   {  
                       var childView = this.ViewGroup.GetChildAt(i);  
                       if (childView is ViewGroup viewGroup)  
                       {  
                           for (int j = 0; j <= viewGroup.ChildCount - 1; j++)  
                           {  
                               var childRelativeLayoutView = viewGroup.GetChildAt(j);  
                               if (childRelativeLayoutView is BottomNavigationView)  
                               {  
                                   ((BottomNavigationView)childRelativeLayoutView).ItemIconTintList = null;  
                               }  
                           }  
                       }  
                   }  
               }  
           }  
       }  
   }  

Before

After

Best Regards,

Leon Lu

---

If the response is helpful, please click "Accept Answer" and upvote it.

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.