Custom control Tabbar color change on iOS and Android when selected or unselected Dynamically

Question

Hi how to change Custom control Tabbar color change on iOS and Android when selected or unselected Dynamically. ![48342-image.png][1] [1]: /api/attachments/48342-image.png?platform=QnA

Answer 1

Hello,​

Welcome to our Microsoft Q&A platform!

TabbedPage defines the following properties:

SelectedTabColor, of type Color, the color of the tab when it's selected.
UnselectedTabColor, of type Color, the color of the tab when it's unselected.

You can use it directly.

   <TabbedPage xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"   
               xmlns:local="clr-namespace:TabbedPageWithNavigationPage;assembly=TabbedPageWithNavigationPage"   
                   xmlns:android="clr-namespace:Xamarin.Forms.PlatformConfiguration.AndroidSpecific;assembly=Xamarin.Forms.Core"  
                x:Name="tabbedPage"  
               SelectedTabColor="Green"  
               UnselectedTabColor="Gray"  
                android:TabbedPage.ToolbarPlacement="Bottom"  
               x:Class="TabbedPageWithNavigationPage.MainPage">  

Here is related thread:https://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/tabbed-page#create-a-tabbedpage

Here is running screenshot.

===============
New Update=================

I create an custom renderer for shell. Based on your comment: i am using below code and it's working UITabBar.Appearance.TintColor = UIColor.FromRGB(0, 157, 87);

For Android, same achievement like following code.

   [assembly: ExportRenderer(typeof(AppShell), typeof(CustomShellRenderer))]  
   namespace ShellNavi.Droid  
   {  
       public class CustomShellRenderer : ShellRenderer  
       {  
           public CustomShellRenderer(Context context) : base(context)  
           {  
           }  
     
           protected override IShellBottomNavViewAppearanceTracker CreateBottomNavViewAppearanceTracker(ShellItem shellItem)  
           {  
               return new CustomBottomNavView();  
           }  
            
       }  
         
       public class CustomBottomNavView : IShellBottomNavViewAppearanceTracker  
       {  
           public void Dispose()  
           {  
     
           }  
     
           public void ResetAppearance(BottomNavigationView bottomView)  
           {  
     
           }  
     
        
     
           public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)  
           {  
     
               bottomView.ItemIconTintList = null;  
     
               
           int[][] states = new int[][]  
            {  
                   // disabled  
                   new int[] {-Android.Resource.Attribute.Checked}, // unchecked  
                   new int[] { Android.Resource.Attribute.Checked }  // pressed  
            };  
     
           int[] colors = new int[]  
           {  
     
               Xamarin.Forms.Color.Green.ToAndroid(),  
               Xamarin.Forms.Color.Blue.ToAndroid(),  
           };  
           ColorStateList colorStateList = new ColorStateList(states, colors);  
     
           bottomView.ItemIconTintList = colorStateList;  
               bottomView.ItemTextColor = colorStateList;  
     
       }  
   }  

If you want to set specific icon in the ButtomNavigationView. But this way, it cannot change the color of text.

   public void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance)  
           {  
     
               bottomView.ItemIconTintList = null;  
     
                 IMenu menu =   bottomView.Menu;  
                 
     
               if (menu.GetItem(0).IsChecked)  
               {  
                   menu.GetItem(0).Icon.SetColorFilter(Color.Red.ToAndroid(), PorterDuff.Mode.SrcIn);  
                   IMenuItem menuItem = menu.GetItem(0);  
                   var view=menuItem.ActionView;  
               }  
               else  
               {  
                   menu.GetItem(0).Icon.SetColorFilter(Color.Green.ToAndroid(), PorterDuff.Mode.SrcIn);  
               }  
           }  

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.