Xamarin Forms change ToolbarItem icon color on Android

EJ 366 Reputation points
2021-08-17T01:13:08.857+00:00

Hi,

I've icons which created in black colour. When I add them to toolbar in iOS they are automatically showing in white colour:

123669-image.png

On Android icons are shown in black colour:

123771-image.png

XAML:

<ContentPage.ToolbarItems>
<ToolbarItem IconImageSource="erase24.png" Command="{Binding ClearCommand}"/>
<ToolbarItem IconImageSource="checkmark24.png" Command="{Binding DoneCommand}"/>
</ContentPage.ToolbarItems>

Question: how can I change toolbar item icon colour in Android? is there some setting in Android styles that I can apply so all images has white tint/colour?
Is this even possible on Android, or do I need to have 2 sets of images, e.g. black and white?

Another approach would be to use my own NavigationBar in every page, but would rather avoid doing this if possible.

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

1 answer

Sort by: Most helpful
  1. JarvanZhang 23,961 Reputation points
    2021-08-17T09:02:42.41+00:00

    Hello,​

    Welcome to our Microsoft Q&A platform!

    I've icons which created in black colour. When I add them to toolbar in iOS they are automatically showing in white colour

    This is because the icon will be turned to the default theme color in iOS, and not shrunk.

    how can I change toolbar item icon colour in Android?

    For this function, try creating a custom page renderer to obtain the toolbarItem from the page. Then re-set the color for the toolbar items. Here is the sample code, you could refer to it.

       [assembly: ExportRenderer(typeof(ContentPage), typeof(CustomPageRenderer))]  
       namespace TestApplication_6.Droid  
       {  
           public class CustomPageRenderer : PageRenderer  
           {  
               private Context context;  
               public CustomPageRenderer(Context context) : base(context)  
               {  
                   this.context = context;  
               }  
         
               protected override void OnElementChanged(ElementChangedEventArgs<Page> e)  
               {  
                   base.OnElementChanged(e);  
         
                   if (e.NewElement != null || Element == null)  
                   {  
                       if (Element == null)  
                           return;  
         
                       if (context == null) context = Android.App.Application.Context;  
         
                       var toolbar = (context as MainActivity).FindViewById<AndroidX.AppCompat.Widget.Toolbar>(Resource.Id.toolbar);  
                       if (toolbar != null)  
                       {  
                           var menu = toolbar.Menu;  
                           if (menu != null && menu.HasVisibleItems)  
                           {  
                               int i = 0;  
                               foreach (var toolbarItem in Element.ToolbarItems)  
                               {  
                                   try  
                                   {  
                                       var nativeToolbarItem = menu.GetItem(Element.ToolbarItems.IndexOf(toolbarItem));  
                                       var bitmap = ((BitmapDrawable)nativeToolbarItem.Icon).Bitmap;  
         
                                       nativeToolbarItem.Icon.SetColorFilter(Android.Graphics.Color.White, Android.Graphics.PorterDuff.Mode.SrcOut);  
                                       i++;  
                                   }  
                                   catch (Exception ex)  
                                   {  
                                   }  
                               }  
                           }  
                       }  
                   }  
               }  
           }  
       }  
    

    Best Regards,

    Jarvan Zhang


    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.


Your answer

Answers can be marked as Accepted Answers by the question author, which helps users to know the answer solved the author's problem.