Xamarin.Forms: Changing TabbedPage tab icons depending on active/inactive

Hey guys!

I'm working on a Xamarin.Forms project and I'm trying to change the icons of the TabbedPage tabs depending on whether the tab is active or inactive. I have gotten it to work on iOS with the following code, but for some unknown reason it doesn't work on Android.

MainPage.xaml

<TabbedPage xmlns:Views="clr-namespace:Project.Views" x:Class="Project.Views.MainPage">
    <NavigationPage x:Name="HomeTab" Title="Home" Icon="home_inactive.png">
        <x:Arguments>
            <Views:Home/>
        </x:Arguments>
    </NavigationPage>
    <NavigationPage x:Name="FavoritesTab" Title="Favorites" Icon="favorites_inactive.png">
        <x:Arguments>
            <Views:Favorites/>
        </x:Arguments>
    </NavigationPage>
    <NavigationPage x:Name="AlertsTab" Title="Alerts" Icon="alerts_inactive.png">
        <x:Arguments>
            <Views:Alerts/>
        </x:Arguments>
    </NavigationPage>
    <NavigationPage x:Name="AccountTab" Title="Account" Icon="account_inactive.png">
        <x:Arguments>
            <Views:Account/>
        </x:Arguments>
    </NavigationPage>
    <NavigationPage x:Name="TestViewTab" Title="TestView">
        <x:Arguments>
            <Views:TestView/>
        </x:Arguments>
    </NavigationPage>
</TabbedPage>

MainPage.xaml.cs

public partial class MainPage : TabbedPage
{
    public MainPage()
    {

        InitializeComponent();

        this.CurrentPageChanged += (object sender, EventArgs e) => {

            var i = this.Children.IndexOf(this.CurrentPage);

            HomeTab.Icon = "home_inactive.png";
            FavoritesTab.Icon = "favorites_inactive.png";
            AlertsTab.Icon = "alerts_inactive.png";
            AccountTab.Icon = "account_inactive.png";

            switch (i)
            {
                case 0:
                    HomeTab.Icon = "home_active.png";
                    break;
                case 1:
                    FavoritesTab.Icon = "favorites_active.png";
                    break;
                case 2:
                    AlertsTab.Icon = "alerts_active.png";
                    break;
                case 3:
                    AccountTab.Icon = "account_active.png";
                    break;
            }

        };

    }

}

Using the CurrentPageChanged event works perfectly for iOS, but for some reason it doesn't work on Android. If I change something like Title instead of Icon, then it'll work on both iOS and Android.

How would I go about fixing this so it works on both Android and iOS? Can I do it all in shared code? If not, could someone walk me through creating platform specific code to do the job?

I would very much appreciate if you guys could help me out! Thanks in advance!

Best Answer

Answers

  • CharwakaCharwaka INMember ✭✭✭✭

    @BillyLiu

    Thank you Simple and Perfect Solution

  • fabby329fabby329 Member ✭✭

    @BillyLiu
    I'm trying to do something similar but for some reason, OnTabSelected and OnTabUnselected are not called.
    I looked a little bit on google and it looks like it might need a TabLayout and set a IOnTabSelectedListener to the given TabLayout.

    Did something change since this your answer or I might be doing something wrong? (using XF 3.4)

  • CharwakaCharwaka INMember ✭✭✭✭

    @fabby329 said:
    @BillyLiu
    I'm trying to do something similar but for some reason, OnTabSelected and OnTabUnselected are not called.
    I looked a little bit on google and it looks like it might need a TabLayout and set a IOnTabSelectedListener to the given TabLayout.

    Did something change since this your answer or I might be doing something wrong? (using XF 3.4)

    i think your using BottomNavigationBar , so they dont work !

    if your using TopNavigation bar make sure your using TabbedPageRenderer

  • fabby329fabby329 Member ✭✭

    @Charwaka that's right, thanks for the clarification.

Sign In or Register to comment.