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

Anonymous
2020-12-15T08:44:24.937+00:00

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

Xamarin
Xamarin
A Microsoft open-source app platform for building Android and iOS apps with .NET and C#.
5,288 questions
0 comments No comments
{count} votes

Accepted answer
  1. Leon Lu (Shanghai Wicresoft Co,.Ltd.) 67,781 Reputation points Microsoft Vendor
    2020-12-15T12:24:10.18+00:00

    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.

    48316-image.png

    ===============
    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.


0 additional answers

Sort by: Most helpful