dotnet / maui

.NET MAUI is the .NET Multi-platform App UI, a framework for building native device applications spanning mobile, tablet, and desktop.
https://dot.net/maui
MIT License
22.28k stars 1.76k forks source link

[Android] Tabs briefly display wrong background color when navigating between flyout items #16522

Open richardrigutins opened 1 year ago

richardrigutins commented 1 year ago

Description

The bottom TabBar on Android shows a weird behavior when combining tab pages and flyout navigation (see the second exercise of the Create multi-page .NET MAUI apps with tab and flyout navigation Microsoft Learn module).

When the dark theme is enabled on an Android device and I navigate between flyout pages, where only one of the pages has a bottom tab bar, the bar briefly appears white before changing back to the desired dark theme color.

Is this by design? This visual inconsistency does not look great from a user perspective.

The same issue also occurs with light theme, when the TabBarBackgroundColor is set to a value different from the default white.

Steps to Reproduce

  1. Do File / New Project / MAUI App.
  2. Create some additional pages (e.g. SettingsPage, AboutPage) and configure routing.
  3. Open AppShell.xaml and create two flyout items, where one item will include tabs and the other a single page:

    <FlyoutItem Title="Main">
        <ShellContent Title="Main"
            ContentTemplate="{DataTemplate local:MainPage}"/>
    
        <ShellContent Title="Settings"
            ContentTemplate="{DataTemplate local:SettingsPage}"/>
    </FlyoutItem>
    
    <FlyoutItem Title="About">
        <ShellContent Title="About"
            ContentTemplate="{DataTemplate local:AboutPage}"/>
    </FlyoutItem>
  4. Launch the Android application and set the device's dark theme.
  5. Open the flyout and navigate between the pages.

Result:

When navigating to the item with multiple tabs, the background of the tab bar briefly appears white before changing to the initial dark color.

Link to public reproduction project repository

https://github.com/richardrigutins/maui-tabbar-color-change-sample

Version with bug

7.0.92

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Tested on Android 10 and up

Did you find any workaround?

Creating custom ShellRenderer and ShellBottomNavViewAppearanceTracker implementations to remove animations when setting the background color of the bottom navigation view.

Relevant log output

No response

ghost commented 1 year ago

We've added this issue to our backlog, and we will work to address it as time and resources allow. If you have any additional information or questions about this issue, please leave a comment. For additional info about issue management, please read our Triage Process.

AnnYang01 commented 1 year ago

Verified this on Visual Studio Enterprise 17.8.0 Preview 1.0 in Android 13.0-API33, This issue repro on .NET 8.0 with below Project. maui-tabbar-color-change-sample-main.zip

sthewissen commented 3 days ago

Fwiw, I can repro this on .NET 9.0 in Android 14.