question

EJ-5254 avatar image
0 Votes"
EJ-5254 asked JarvanZhang-MSFT commented

Xamarin Forms change ToolbarItem icon color on Android

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.

dotnet-xamarin
image.png (16.2 KiB)
image.png (6.6 KiB)
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

1 Answer

JarvanZhang-MSFT avatar image
0 Votes"
JarvanZhang-MSFT answered JarvanZhang-MSFT commented

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.


· 3
5 |1600 characters needed characters left characters exceeded

Up to 10 attachments (including images) can be used with a maximum of 3.0 MiB each and 30.0 MiB total.

Hi Jarvan,

Thank you. For some reason menu.HasVisibleItems returns false for me, even if there are icons in NavigationBar, any ideas?

0 Votes 0 ·

Do you use an application template like shell in your project? Or do add some other settings? The 'menu.HasVisibleItems' is awalys true on my side, please post more details about the code.

0 Votes 0 ·

Hi, @EJ-5254
I have not heard from you for a couple of days. Please let me know if there is anything that I can help here.

0 Votes 0 ·