Android Tabbar, clicking 4th tab opens the 5th tab

[Zachary-271]

Description

When I first open the app, and then I click on the fourth tab, it shows that it's on the 4th tab, while showing the contents of the 5th tab. This only happened to me when I clicked on the 4th tab first, if I click on any other tab first the app behaves as expected. Then, if I continue to click on the other tabs, the correct tab contents are shown, and the app behaves as expected from that point on. If the tabs in my project only have 1 or 2 items in the collectionviews, the bug doesn't occur.

Screen.Recording.2024-07-19.165608.mp4

Tabbar code:

<TabbedPage
    xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
    xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
    xmlns:root="clr-namespace:MauiTabs"
    xmlns:pages="clr-namespace:MauiTabs.Pages"
    x:Class="MauiTabs.Pages.MainPage"
    xmlns:android="clr-namespace:Microsoft.Maui.Controls.PlatformConfiguration.AndroidSpecific;assembly=Microsoft.Maui.Controls"
    android:TabbedPage.IsSwipePagingEnabled="False"
    android:TabbedPage.ToolbarPlacement="Bottom">
    <NavigationPage
        Title="Home">
        <x:Arguments>
            <pages:UserPage
                Icon="{x:Static root:Constants.FontAwesomeHome}"
                Label="home"
                x:Name="Home"/>
        </x:Arguments>
        <NavigationPage.IconImageSource>
            <FontImageSource
                FontFamily="FontAwesome-Solid"
                Glyph="{x:Static root:Constants.FontAwesomeHome}"/>
        </NavigationPage.IconImageSource>
    </NavigationPage>
    <NavigationPage
        Title="Page 2">
        <x:Arguments>
            <pages:UserPage
                Icon="2"
                Label="page2"
                x:Name="Page2"/>
        </x:Arguments>
        <NavigationPage.IconImageSource>
            <FontImageSource
                FontFamily="FontAwesome-Solid"
                Glyph="2"/>
        </NavigationPage.IconImageSource>
    </NavigationPage>
    <NavigationPage
        Title="Page 3">
        <x:Arguments>
            <pages:UserPage
                Icon="3"
                Label="page3"
                x:Name="Page3"/>
        </x:Arguments>
        <NavigationPage.IconImageSource>
            <FontImageSource
                FontFamily="FontAwesome-Solid"
                Glyph="3"/>
        </NavigationPage.IconImageSource>
    </NavigationPage>
    <NavigationPage
        Title="Page 4">
        <x:Arguments>
            <pages:UserPage
                Icon="4"
                Label="page4"
                x:Name="Page4"/>
        </x:Arguments>
        <NavigationPage.IconImageSource>
            <FontImageSource
                FontFamily="FontAwesome-Solid"
                Glyph="4"/>
        </NavigationPage.IconImageSource>
    </NavigationPage>
    <NavigationPage
        Title="Page 5">
        <x:Arguments>
            <pages:UserPage
                Icon="5"
                Label="page5"
                x:Name="Page5"/>
        </x:Arguments>
        <NavigationPage.IconImageSource>
            <FontImageSource
                FontFamily="FontAwesome-Solid"
                Glyph="5"/>
        </NavigationPage.IconImageSource>
    </NavigationPage>
</TabbedPage>

Steps to Reproduce

No response

Link to public reproduction project repository

No response

Version with bug

8.0.70 SR7

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

No response

Did you find any workaround?

No response

Relevant log output

No response

[github-actions]

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

• [Android] Collectionview scroll position resets in Shell Tabbar page when changing tabs on Android (#17162), similarity score: 0.77
• Terrible performance of MAUI Shell Tabs (#21971), similarity score: 0.77
• TabbedPage: content not shown after readding (#21640), similarity score: 0.77

Closed similar issues:

• [Android] Content wrapped in NavigationPage objects in Tabbed Page disappears after tabs navigating (#9743), similarity score: 0.80
• Whole App Shell and Shell content disapear when changing between tabs fast enough (Release mode on Android) (#18555), similarity score: 0.77

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

[vyn203]

I'm also experiencing the same issue on Android. The content of the 5th tab shows up when navigating to the 4th tab for the first time after app-reload, but for some reason, the 4th tab's page code-behind is triggered instead of the 5th tab's. I've checked the Navigation stack and binding context which all shows that the current page is the 4th tab's content, even though the 5th content is appearing instead. This issue does not occur on iOS or when there is 4 or less tabs on Android. Any advice?

[ninachen03]

I use the sample demo. could not reproduce your issue. Could you provide us with a sample project so we can investigate it further? Looking forward to your reply!
TabbedPage.zip

[Zachary-271]

Here is my project, I found that if the CollectionView only has a few items the bug doesn't show up. So on faster phones it might not be easy to reproduce, the bug is present on my Galaxy S9 when the app is in Release mode.
TabBug.zip

[vyn203]

@Zachary-271 I noticed the same thing in my case. The chance of reproducibility on my Samsung Galaxy S9 Android 10 is 100%. Whereas on Galaxy S21 Android 13 and Galaxy S22 Android 14, it’s roughly 30%.

[ninachen03]

This issue has been verified using Visual Studio 17.12.0 Preview 2.0(8.0.90 & 8.0.82 & 8.0.3). Can repro this issue at android platform with Android 12.

[Arviksain]

Hi @jfversluis @jamesmontemagno Can u please look into this problem?
As most of the users are suffering with this issue, who is still using freshmvvm.maui & tabbedpage in their maui application.
As this is very urgent, within very short of time we can't change the implementation from tabbedpage to shell tabs.
So kindly fix this issue as soon as possible.

[Thaldoras]

This is a very weird bug. I have been going through the TabbedPageManager and other files trying to find why specifically the 4th tab is impacted. Can't figure it out.

I have discovered something interesting though. I don't use xaml so I add my tabs in the constructor of my TabbedPage like follows

Children.Add(tab1);
Children.Add(tab2);
Children.Add(tab3);
Children.Add(tab4);
Children.Add(tab5);

if (Children.Count > 4)
{
    SelectedItem = Children[3];
}

This sets my selected tab to tab4 instead of tab1. Now when I open my app that tab is displayed correctly and I don't notice any problems when navigating to the others.

Been trying to come up with a workaround that automatically swaps to tab 4 and then back. But I have wasted enough time already.