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

src/Controls/src/Core/Compatibility/Handlers/Shell/Android/ShellItemRenderer.cs

@@ -13,6 +13,7 @@
 using Google.Android.Material.Navigation;
 using Microsoft.Extensions.DependencyInjection;
 using Microsoft.Extensions.Logging;
+using Microsoft.Maui.Controls.Handlers.Compatibility;
 using Microsoft.Maui.Graphics;
 using AColor = Android.Graphics.Color;
 using AView = Android.Views.View;
@@ -85,7 +86,21 @@ public override AView OnCreateView(LayoutInflater inflater, ViewGroup container,
 
 			HookEvents(ShellItem);
 			SetupMenu();
-
+			var appearance = ShellContext.Shell.GetAppearanceForPivot(ShellItem);
+			if (_bottomView.Background is ColorDrawable background)
+			{
+				if (appearance is IShellAppearanceElement appearanceElement)
+				{
+					if (appearanceElement.EffectiveTabBarBackgroundColor is not null)
+					{
+						background.Color = appearanceElement.EffectiveTabBarBackgroundColor.ToPlatform();
+					}
+					else
+					{
+						background.Color = ShellRenderer.DefaultBottomNavigationViewBackgroundColor.ToPlatform();
+					}
+				}
+			}
 			_appearanceTracker = ShellContext.CreateBottomNavViewAppearanceTracker(ShellItem);
 			_bottomNavigationTracker = new BottomNavigationViewTracker();
 			((IShellController)ShellContext.Shell).AddAppearanceObserver(this, ShellItem);

src/Controls/src/Core/Shell/Shell.cs

@@ -1816,7 +1816,7 @@ internal T GetEffectiveValue<T>(
 			return defaultValue();
 		}
 
-		ShellAppearance GetAppearanceForPivot(Element pivot)
+		internal ShellAppearance GetAppearanceForPivot(Element pivot)
 		{
 			// this algorithm is pretty simple
 			// 1) Get the "CurrentPage" by walking down from the pivot

src/Controls/tests/TestCases.HostApp/Issues/Issue16522.xaml

@@ -0,0 +1,47 @@
+<?xml version="1.0" encoding="utf-8" ?>
+<Shell xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
+            xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
+            x:Class="Maui.Controls.Sample.Issues.Issue16522"
+            TabBarBackgroundColor="#0000FF"
+            >
+  <FlyoutItem Title="Main">
+    <Tab Title="Main">
+      <ShellContent>
+        <ContentPage Title="Main">
+          <StackLayout Padding="10">
+            <Label AutomationId="Label" Text="Welcome to the Main Page!"
+                               FontSize="24"
+                               HorizontalOptions="Center" />
+            <!-- Add additional UI elements here -->
+          </StackLayout>
+        </ContentPage>
+      </ShellContent>
+    </Tab>
+
+    <Tab Title="Settings">
+      <ShellContent>
+        <ContentPage Title="Settings">
+          <StackLayout Padding="10">
+            <Label Text="Settings Page"
+                               FontSize="24"
+                               HorizontalOptions="Center" />
+            <!-- Additional UI for Settings -->
+          </StackLayout>
+        </ContentPage>
+      </ShellContent>
+    </Tab>
+  </FlyoutItem>
+
+  <FlyoutItem Title="About">
+    <ShellContent>
+      <ContentPage Title="About">
+        <StackLayout Padding="10">
+          <Label Text="About Page"
+                           FontSize="24"
+                           HorizontalOptions="Center" />
+          <!-- Additional UI for About -->
+        </StackLayout>
+      </ContentPage>
+    </ShellContent>
+  </FlyoutItem>
+</Shell>

src/Controls/tests/TestCases.HostApp/Issues/Issue16522.xaml.cs

@@ -0,0 +1,12 @@
+namespace Maui.Controls.Sample.Issues
+{
+	[Issue(IssueTracker.Github, 16522, "[Android] Tabs briefly display wrong background color when navigating between flyout items", PlatformAffected.Android)]
+	public partial class Issue16522 : Shell
+	{
+		public Issue16522()
+		{
+			InitializeComponent();
+
+		}
+	}
+}

src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue16522.cs

@@ -0,0 +1,25 @@
+#if !MACCATALYST
+using NUnit.Framework;
+using UITest.Appium;
+using UITest.Core;
+
+namespace Microsoft.Maui.TestCases.Tests.Issues
+{
+    public class Issue16522 : _IssuesUITest
+    {
+		public Issue16522(TestDevice device) : base(device)
+		{
+		}
+
+		public override string Issue => "[Android] Tabs briefly display wrong background color when navigating between flyout items";
+
+		[Test]
+		[Category(UITestCategories.Shell)]
+		public void ShellTabBarBackgroundColor()
+		{
+			App.WaitForElement("Label");
+			VerifyScreenshot();
+		}
+	}
+}
+#endif