question

SPTutorial-0387 avatar image
0 Votes"
SPTutorial-0387 asked LeonLu-MSFT commented

How to use a custom icon in tab page xamarin forms?

I made a tabbed page,and want to use custom tab icon,but the icon is not showing actual image,its changes the overlay.

Here is my tabs
97163-whatsapp-image-2021-05-17-at-153823.jpeg


I want to like this middle icon

97076-whatsapp-image-2021-05-16-at-164211.jpeg




how to do it using tabbed page in xamarin forms

dotnet-xamarin
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

LeonLu-MSFT avatar image
1 Vote"
LeonLu-MSFT answered LeonLu-MSFT commented

Hello,​

Welcome to our Microsoft Q&A platform!

Please add following custom renderer for tabbedpage.

using Android.App;
using Android.Content;
using Android.OS;
using Android.Runtime;
using Android.Views;
using Android.Widget;
using Google.Android.Material.BottomNavigation;
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using TabbedPageWithNavigationPage.Droid;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;
using Xamarin.Forms.Platform.Android.AppCompat;

[assembly: ExportRenderer(typeof(TabbedPage), typeof(MyTabbedPageRenderer))]
namespace TabbedPageWithNavigationPage.Droid
{
    class MyTabbedPageRenderer : TabbedPageRenderer
    {
        public MyTabbedPageRenderer(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;
                            }
                        }
                    }
                }
            }
        }
    }
}


Before

97089-image.png

After

97079-image.png

Best Regards,

Leon Lu



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.



image.png (7.0 KiB)
image.png (8.8 KiB)
· 2
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.

Hello, Its fantastic and working but middle icon showing very small,how to set the size of that perticular icon? and what is the renderer code for ios?

97193-whatsapp-image-2021-05-17-at-180943.jpeg


0 Votes 0 ·

In this thread, we are mainly discussing about this issue(use a custom icon in tab page xamarin forms) as indicated by the first post. And it is solved. Then for your new question it would be best if you try to open up a new thread for it. In this way, it will make answer searching in the forum easier and be beneficial to other community members as well.

0 Votes 0 ·