Can't add multi-colour images to TabbedPage navigation bar in Xamarin Forms

Question

So when I designed the navigation bar for my Android application I made it look like this: The only problem I have with coding this is that when I add the .png images for each icon into my XAML code on the MainPage.xaml the icons end up looking like this (the icons just turn to into black shapes with no other colours).

Is android only capable of handling single colour icons for Android? Is there any way to disable this default feature?

I know that the android style guidelines specify that you shouldn't use more than one colour for the icon in your navigation bar but I need to make an exception for this app.

Answer 1

If you want to use the colorful icon in the Tabbedpage, you should create a custom renderer for Tabbedpage

using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Support.Design.Widget;
using Android.Views;
using Android.Widget;
using TabbedDemo.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedRenderer))]
namespace TabbedDemo.Droid
{
    public class MyTabbedRenderer : TabbedPageRenderer
    {
        public MyTabbedRenderer(Context context) : base(context)
        {
        }
        protected override void OnElementChanged(ElementChangedEventArgs<TabbedPage> e)
        {
            base.OnElementChanged(e);
            if (e.OldElement == null && e.NewElement != null)
            {
                for (int i = 0; i <= this.ViewGroup.ChildCount - 1; i++)
                {
                    var childView = this.ViewGroup.GetChildAt(i);
                    if (childView is ViewGroup viewGroup)
                    {
                        for (int j = 0; j <= viewGroup.ChildCount - 1; j++)
                        {
                            var childRelativeLayoutView = viewGroup.GetChildAt(j);
                            if (childRelativeLayoutView is BottomNavigationView)
                            {
                                ((BottomNavigationView)childRelativeLayoutView).ItemIconTintList = null;
                            }
                        }
                    }
                }
            }
        }
    }
}

Here is running screenshot.