locked
Changing Tint of Toolbar Item Icon RRS feed

  • Question

  • User371970 posted

    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.

    Sunday, September 16, 2018 1:54 PM

All replies

  • User368992 posted

    @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

    Sunday, September 16, 2018 5:40 PM
  • User371688 posted

    @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

    Monday, September 17, 2018 7:24 AM
  • User368992 posted

    @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 +

    Monday, September 17, 2018 6:01 PM
  • User76049 posted

    @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

    Monday, September 17, 2018 7:05 PM
  • User371970 posted

    @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

    Monday, September 17, 2018 11:26 PM
  • User76049 posted

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

    Monday, September 17, 2018 11:35 PM
  • User371970 posted

    @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

    Tuesday, September 18, 2018 12:12 AM
  • User368992 posted

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

    Tuesday, September 18, 2018 12:38 AM
  • User368992 posted

    @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

    Tuesday, September 18, 2018 12:39 AM
  • User42522 posted

    @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?

    Tuesday, September 18, 2018 2:46 PM
  • User368992 posted

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

    Tuesday, September 18, 2018 9:37 PM
  • User365795 posted

    This worked for me:

    Toolbar.axml:

    <?xml version="1.0" encoding="UTF-8"?>
    <android.support.v7.widget.Toolbar xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/toolbar"
        android:layout_width="match_parent" android:layout_height="wrap_content"
        android:background="?attr/colorPrimary" android:theme="@style/MyAwesomeApp.DarkTheme.Toolbar"
        android:popupTheme="@style/ThemeOverlay.AppCompat.Light" />
    

    values/styles.xml:

    <?xml version="1.0" encoding="utf-8"?>
    <resources>
        <color name="myCustomYellowColor">#FFF080</color>
    
        <style name="MyAwesomeApp.DarkTheme.Base" parent="Theme.AppCompat">
            <!-- Your app's theme defined here -->
        </style>
        <style name="MyAwesomeApp.DarkTheme.Toolbar" parent="MyAwesomeApp.DarkTheme.Base">
            <item name="android:drawableTint">@color/myCustomYellowColor</item>
        </style>
    </resources>
    

    Images are saved as png files.

    Wednesday, April 24, 2019 5:52 PM
  • User20378 posted

    @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?

    Tuesday, June 11, 2019 5:52 PM
  • User375790 posted

    @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?

    Thursday, February 20, 2020 5:17 PM
  • User375790 posted

    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

    Thursday, February 20, 2020 5:20 PM