Forum Xamarin.Forms

Changing Tint of Toolbar Item Icon

mchtsmchts Member ✭✭
edited September 2018 in Xamarin.Forms

I've been looking for days but couldn't find a way to change the tint color of a toolbar item on Android like on iOS

UINavigationBar.Appearance.TintColor = Color.FromHex("#FFFFFF").ToUIColor();

I found and applied lots of answers including defining your own style in xml but they just change back button color, title text color so on.
Is there a proper way to change toolbar items tint?

Any help would be appreciated.

Answers

  • Anderson_VieiraAnderson_Vieira Member ✭✭
    edited September 2018

    @mchts

    PCL CodeBehind:

    using FormsToolkit;
    using Xamarin.Forms.PlatformConfiguration;
    using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
    using Models;

     protected override void OnAppearing()
            {
                base.OnAppearing();
                var navigationPage = Parent as Xamarin.Forms.NavigationPage;
    
                if (navigationPage != null)
                    navigationPage.On<iOS>().EnableTranslucentNavigationBar();
    
                // MessagingService.Current.SendMessage(MessageKeys.ChangeToolbar, false);
                MessagingService.Current.SendMessage(MessageKeys.ToolbarColor, Color.FromHex("#181818"));
    
            }
    

    Create a new class in Models

    namespace ProjetoTeste.Droid.Models
    {
     public class MessageKeys
        {
            public const string ChangeToolbar = "ChangeToolbar";
            public const string ToolbarColor = "ToolbarColor";
        }
    }
    

    https://www.nuget.org/packages/FormsToolkit/1.1.18

    Works with android, ios and uwp

  • jezhjezh Member, Xamarin Team Xamurai

    @mchts
    You can use the more general approach of using the NavigationPage method.
    So if you are using a NavigationPage, then you can do something like this:
    NavigationPage navPage = new NavigationPage {
    BarBackgroundColor = Color.FromHex("#1FBED6"),
    BarTextColor = Color.FromHex("#000000")
    }

    For more details:
    https://stackoverflow.com/questions/35504955/change-background-color-of-toolbaritems-from-codebehind
    https://forums.xamarin.com/discussion/98711/change-background-color-of-toolbaritems

  • @jezh said:
    @mchts
    You can use the more general approach of using the NavigationPage method.
    So if you are using a NavigationPage, then you can do something like this:
    NavigationPage navPage = new NavigationPage {
    BarBackgroundColor = Color.FromHex("#1FBED6"),
    BarTextColor = Color.FromHex("#000000")
    }

    For more details:
    https://stackoverflow.com/questions/35504955/change-background-color-of-toolbaritems-from-codebehind
    https://forums.xamarin.com/discussion/98711/change-background-color-of-toolbaritems

    @jezh I already tested this, it does not work with xamarin forms 2.5 +

  • NMackayNMackay GBInsider, University mod

    @Anderson_Vieira

    This falls into platform specific, you may have to mess about with the Android theme and it seems to depend on the Android API level, I don't think you'll achieve this via Forms.

    https://stackoverflow.com/questions/33104246/change-navigation-bar-icon-color-on-android

    https://forums.xamarin.com/discussion/103665/xamarin-forms-set-android-in-light-theme

    You could try setting the opacity/color with platform specifics? could try setting the opacity level with BarSelectedItemColor

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/platform-specifics/consuming/android

  • mchtsmchts Member ✭✭

    @jezh said:
    @mchts
    You can use the more general approach of using the NavigationPage method.
    So if you are using a NavigationPage, then you can do something like this:
    NavigationPage navPage = new NavigationPage {
    BarBackgroundColor = Color.FromHex("#1FBED6"),
    BarTextColor = Color.FromHex("#000000")
    }

    For more details:
    https://stackoverflow.com/questions/35504955/change-background-color-of-toolbaritems-from-codebehind
    https://forums.xamarin.com/discussion/98711/change-background-color-of-toolbaritems

    This works for iOS but didnt do the trick for android

  • NMackayNMackay GBInsider, University mod

    This falls into platform specific, you may have to mess about with the Android theme.

    https://stackoverflow.com/questions/33104246/change-navigation-bar-icon-color-on-android&gt; @mchts said:

    @jezh said:
    @mchts
    You can use the more general approach of using the NavigationPage method.
    So if you are using a NavigationPage, then you can do something like this:
    NavigationPage navPage = new NavigationPage {
    BarBackgroundColor = Color.FromHex("#1FBED6"),
    BarTextColor = Color.FromHex("#000000")
    }

    For more details:
    https://stackoverflow.com/questions/35504955/change-background-color-of-toolbaritems-from-codebehind
    https://forums.xamarin.com/discussion/98711/change-background-color-of-toolbaritems

    This works for iOS but didnt do the trick for android

    Did you try the other suggestions I mentioned for Android? you'll probably have to use Platform Specifics or the Android theme to achieve this.

  • mchtsmchts Member ✭✭

    @NMackay I tried platform specifics as @Anderson_Vieira suggested before but couldnt find a way to colorize icons (at least for android). The other two solutions you suggested are about navigation bar. Im trying to colorize icons

  • Anderson_VieiraAnderson_Vieira Member ✭✭
    edited September 2018

    @NMackay said:
    @Anderson_Vieira

    This falls into platform specific, you may have to mess about with the Android theme and it seems to depend on the Android API level, I don't think you'll achieve this via Forms.

    https://stackoverflow.com/questions/33104246/change-navigation-bar-icon-color-on-android

    https://forums.xamarin.com/discussion/103665/xamarin-forms-set-android-in-light-theme

    You could try setting the opacity/color with platform specifics? could try setting the opacity level with BarSelectedItemColor

    https://docs.microsoft.com/en-us/xamarin/xamarin-forms/platform/platform-specifics/consuming/android

    @NMackayI use the code I sent and it works perfectly, I did not have to work on the platforms individually.

  • @mchts said:
    @NMackay I tried platform specifics as @Anderson_Vieira suggested before but couldnt find a way to colorize icons (at least for android). The other two solutions you suggested are about navigation bar. Im trying to colorize icons

    @mchts That code is just to tinker with the title bar

  • ShantimohanElchuriShantimohanElchuri USMember ✭✭✭✭✭

    @Anderson_Vieira said:
    @mchts

    PCL CodeBehind:

    using FormsToolkit;
    using Xamarin.Forms.PlatformConfiguration;
    using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
    using Models;

     protected override void OnAppearing()
            {
                base.OnAppearing();
                var navigationPage = Parent as Xamarin.Forms.NavigationPage;
    
                if (navigationPage != null)
                    navigationPage.On<iOS>().EnableTranslucentNavigationBar();
    
                // MessagingService.Current.SendMessage(MessageKeys.ChangeToolbar, false);
                MessagingService.Current.SendMessage(MessageKeys.ToolbarColor, Color.FromHex("#181818"));
    
            }
    

    Create a new class in Models

    namespace ProjetoTeste.Droid.Models
    {
     public class MessageKeys
        {
            public const string ChangeToolbar = "ChangeToolbar";
            public const string ToolbarColor = "ToolbarColor";
        }
    }
    

    https://www.nuget.org/packages/FormsToolkit/1.1.18

    Works with android, ios and uwp

    Do we have to necessarily install the Forms Toolkit NuGet package? Also this is somewhat old. The latest version is at least 8 months old. I find Xamarin.Forms.MessageCenter. Can I substitute MessagingService with this MessageCenter? Or are they two completely different ones?

  • Anderson_VieiraAnderson_Vieira Member ✭✭
    edited September 2018

    @ShantimohanElchuri said:

    @Anderson_Vieira said:
    @mchts

    PCL CodeBehind:

    using FormsToolkit;
    using Xamarin.Forms.PlatformConfiguration;
    using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
    using Models;

     protected override void OnAppearing()
            {
                base.OnAppearing();
                var navigationPage = Parent as Xamarin.Forms.NavigationPage;
    
                if (navigationPage != null)
                    navigationPage.On<iOS>().EnableTranslucentNavigationBar();
    
                // MessagingService.Current.SendMessage(MessageKeys.ChangeToolbar, false);
                MessagingService.Current.SendMessage(MessageKeys.ToolbarColor, Color.FromHex("#181818"));
    
            }
    

    Create a new class in Models

    namespace ProjetoTeste.Droid.Models
    {
     public class MessageKeys
        {
            public const string ChangeToolbar = "ChangeToolbar";
            public const string ToolbarColor = "ToolbarColor";
        }
    }
    

    https://www.nuget.org/packages/FormsToolkit/1.1.18

    Works with android, ios and uwp

    Do we have to necessarily install the Forms Toolkit NuGet package? Also this is somewhat old. The latest version is at least 8 months old. I find Xamarin.Forms.MessageCenter. Can I substitute MessagingService with this MessageCenter? Or are they two completely different ones?

    @ShantimohanElchuri
    The two are completely different.

    I recommend using version 1.1.18 because it works fine on android, uwp and ios to change the color of the bar, maybe another version of the package does not work on any of the platforms, but you can test and see the result you will get.

  • XamFormCoderXamFormCoder USMember ✭✭

    @Anderson_Vieira said:
    @mchts

    PCL CodeBehind:

    using FormsToolkit;
    using Xamarin.Forms.PlatformConfiguration;
    using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
    using Models;

     protected override void OnAppearing()
            {
                base.OnAppearing();
                var navigationPage = Parent as Xamarin.Forms.NavigationPage;
    
                if (navigationPage != null)
                    navigationPage.On<iOS>().EnableTranslucentNavigationBar();
    
                // MessagingService.Current.SendMessage(MessageKeys.ChangeToolbar, false);
                MessagingService.Current.SendMessage(MessageKeys.ToolbarColor, Color.FromHex("#181818"));
    
            }
    

    Create a new class in Models

    namespace ProjetoTeste.Droid.Models
    {
     public class MessageKeys
        {
            public const string ChangeToolbar = "ChangeToolbar";
            public const string ToolbarColor = "ToolbarColor";
        }
    }
    

    Can you help me?
    I'm having a hard time understanding how sending a message will change the color?

    Who is listening for the message?

  • divyamorampudidivyamorampudi Member ✭✭

    @Anderson_Vieira

    PCL CodeBehind:

    using FormsToolkit;
    using Xamarin.Forms.PlatformConfiguration;
    using Xamarin.Forms.PlatformConfiguration.iOSSpecific;
    using Models;

    protected override void OnAppearing()
    {
    base.OnAppearing();
    var navigationPage = Parent as Xamarin.Forms.NavigationPage;

            if (navigationPage != null)
                navigationPage.On<iOS>().EnableTranslucentNavigationBar();
    
            // MessagingService.Current.SendMessage(MessageKeys.ChangeToolbar, false);
            MessagingService.Current.SendMessage(MessageKeys.ToolbarColor, Color.FromHex("#181818"));
    
        }
    

    Create a new class in Models

    namespace ProjetoTeste.Droid.Models
    {
    public class MessageKeys
    {
    public const string ChangeToolbar = "ChangeToolbar";
    public const string ToolbarColor = "ToolbarColor";
    }
    }

    help me please how sending a message will change the color?

    Who is listening for the message?

  • divyamorampudidivyamorampudi Member ✭✭

    i want to change the color of toolbar icon in PCL project because we are sending the color from backend please help me in this

Sign In or Register to comment.