question

6666666 avatar image
0 Votes"
6666666 asked JarvanZhang-MSFT commented

How to switch tab icon in xamarin.android?

I am using tabbed page.

how to switch from a1.png to a2.png when I tap the menu?

I mean first menu is selected then the icon is a1.png if not then icon is a2.png

and remove the color in it.

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

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

Hello,​

Welcome to our Microsoft Q&A platform!

I mean first menu is selected then the icon is a1.png if not then icon is a2.png

For this function, try to custom a custom TabbedPage renderer and implement the TabLayout.IOnTabSelectedListener to override the related methods. Check the code:

[assembly: ExportRenderer(typeof(CustomTabbedPage), typeof(CustomTabbedPageRenderer))]
namespace TestApplication.Droid
{
    public class CustomTabbedPageRenderer : TabbedPageRenderer, TabLayout.IOnTabSelectedListener
    {
        public CustomTabbedPageRenderer(Context context) : base(context)
        {
        }

        void TabLayout.IOnTabSelectedListener.OnTabSelected(TabLayout.Tab tab)
        {
            if (tab == null)
            {
                return;
            }

            switch (tab.Text)
            {
                case "Tab 1":
                    tab.SetIcon(Resource.Drawable.selectedIcon);
                    break;
                case "Tab 2":
                    tab.SetIcon(Resource.Drawable.selectedIcon);
                    break;
                case "Tab 3":
                    tab.SetIcon(Resource.Drawable.selectedIcon);
                    break;
                default:
                    break;
            }
        }

        void TabLayout.IOnTabSelectedListener.OnTabUnselected(TabLayout.Tab tab)
        {
            if (tab == null)
            {
                return;
            }

            switch (tab.Text)
            {
                case "Tab 1":
                    tab.SetIcon(Resource.Drawable.unSelectedIcon);
                    break;
                case "Tab 2":
                    tab.SetIcon(Resource.Drawable.unSelectedIcon);
                    break;
                case "Tab 3":
                    tab.SetIcon(Resource.Drawable.unSelectedIcon);
                    break;
                default:
                    break;
            }
        }
    }
}


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.


· 5
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.

and then how to remove the color on it?

0 Votes 0 ·

Hi, what color do you mean? Could you please post a screenshot do display that?

0 Votes 0 ·

I tried but it is not work.

0 Votes 0 ·

The 'tab.Text' corresponds to the Title of the subpage, please make sure the value is the same. Check the code:

<local:CustomTabbedPage ...
    xmlns:local="clr-namespace:TestApplication_5"
    x:Class="TestApplication_5.TabbedPage1">
    
    <local:Page1 Title="Tab 1" IconImageSource="selectedIcon"/>
    <local:Page2 Title="Tab 2"  IconImageSource="unSelectedIcon"/>
    <local:Page3 Title="Tab 3"  IconImageSource="unSelectedIcon"/>
</local:CustomTabbedPage>

0 Votes 0 ·

May I know whether your issue has been solved or not? If not, please share it in here. We can work together to figure it out.

0 Votes 0 ·