Skip to content

[Android] Shell: Fix top-tab unselected text visibility in Material 3 light theme #35128

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
kubaflo merged 6 commits into from
Apr 25, 2026
Merged

[Android] Shell: Fix top-tab unselected text visibility in Material 3 light theme #35128

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
388b82f
Integrate code-review skill into pr-review Pre-Flight and Try-Fix (#3…
kubaflo Apr 23, 2026
a55edf8
Fix: Shell top-tab unselected text visibility in Material 3 light theme
SyedAbdulAzeemSF4852 Apr 24, 2026
831004a
Modified the fix
SyedAbdulAzeemSF4852 Apr 24, 2026
f4e5671
Fix Android Shell top-tab unselected text visibility in Material 3 li…
SyedAbdulAzeemSF4852 Apr 24, 2026
79c900a
Rename Issue1418 test case files to Issue35125 and update identifiers
SyedAbdulAzeemSF4852 Apr 24, 2026
8281aae
Merge branch 'inflight/current' into ix/material3-shell-top-tab-text-…
kubaflo Apr 25, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion src/Controls/src/Core/Compatibility/Handlers/Shell/Android/ShellRenderer.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,9 @@ void IAppearanceObserver.OnAppearanceChanged(ShellAppearance appearance)
public static Color DefaultBackgroundColor => ResolveThemeColor(RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#FEF7FF") : Color.FromArgb("#2c3e50"), RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#141218") : Color.FromArgb("#1B3147"));
public static Color DefaultForegroundColor => ResolveThemeColor(RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#1D1B20") : Colors.Black, RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#E6E0E9") : Colors.White);
public static Color DefaultTitleColor => ResolveThemeColor(RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#1D1B20") : Colors.White, RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#E6E0E9") : Colors.White);
public static readonly Color DefaultUnselectedColor = Color.FromRgba(255, 255, 255, 180);
public static Color DefaultUnselectedColor => ResolveThemeColor(
RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#49454F") : Color.FromRgba(255, 255, 255, 180),
RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#CAC4D0") : Color.FromRgba(255, 255, 255, 180));
internal static Color DefaultBottomNavigationViewBackgroundColor => ResolveThemeColor(RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#F3EDF7") : Colors.White, RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#1D1B20") : Color.FromArgb("#1B3147"));
internal static bool IsDarkTheme => Application.Current?.RequestedTheme == AppTheme.Dark;

Comment on lines +98 to 103
Copy link

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

DefaultUnselectedColor is a shipped public API as a static readonly field (see PublicAPI.Shipped.txt). Converting it to a property is a binary breaking change; the framework-side fix should avoid removing/reshaping this shipped member (e.g., keep the field and introduce a new API/internal resolver for theme-aware defaults).

Suggested change
public static Color DefaultUnselectedColor => ResolveThemeColor(
RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#49454F") : Color.FromRgba(255, 255, 255, 180),
RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#CAC4D0") : Color.FromRgba(255, 255, 255, 180));
internal static Color DefaultBottomNavigationViewBackgroundColor => ResolveThemeColor(RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#F3EDF7") : Colors.White, RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#1D1B20") : Color.FromArgb("#1B3147"));
internal static bool IsDarkTheme => Application.Current?.RequestedTheme == AppTheme.Dark;
public static readonly Color DefaultUnselectedColor = ResolveDefaultUnselectedColor();
internal static Color CurrentDefaultUnselectedColor => ResolveDefaultUnselectedColor();
internal static Color DefaultBottomNavigationViewBackgroundColor => ResolveThemeColor(RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#F3EDF7") : Colors.White, RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#1D1B20") : Color.FromArgb("#1B3147"));
internal static bool IsDarkTheme => Application.Current?.RequestedTheme == AppTheme.Dark;
static Color ResolveDefaultUnselectedColor()
{
return ResolveThemeColor(
RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#49454F") : Color.FromRgba(255, 255, 255, 180),
RuntimeFeature.IsMaterial3Enabled ? Color.FromArgb("#CAC4D0") : Color.FromRgba(255, 255, 255, 180));
}

Copilot uses AI. Check for mistakes.
Expand Down
2 changes: 2 additions & 0 deletions src/Controls/src/Core/PublicAPI/net-android/PublicAPI.Unshipped.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
#nullable enable
*REMOVED*~static readonly Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultForegroundColor -> Microsoft.Maui.Graphics.Color
*REMOVED*~static readonly Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultTitleColor -> Microsoft.Maui.Graphics.Color
*REMOVED*~static readonly Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultUnselectedColor -> Microsoft.Maui.Graphics.Color
~static Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultForegroundColor.get -> Microsoft.Maui.Graphics.Color
~static Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultTitleColor.get -> Microsoft.Maui.Graphics.Color
~static Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultUnselectedColor.get -> Microsoft.Maui.Graphics.Color
Comment on lines 2 to +7
Copy link

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This PublicAPI update indicates removal of ShellRenderer.DefaultUnselectedColor as a shipped static readonly field and replacement with a property getter. Since the field is present in PublicAPI.Shipped.txt, it should not be marked as removed/replaced this way; please preserve the shipped signature and add any new API separately.

Suggested change
*REMOVED*~static readonly Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultForegroundColor -> Microsoft.Maui.Graphics.Color
*REMOVED*~static readonly Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultTitleColor -> Microsoft.Maui.Graphics.Color
*REMOVED*~static readonly Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultUnselectedColor -> Microsoft.Maui.Graphics.Color
~static Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultForegroundColor.get -> Microsoft.Maui.Graphics.Color
~static Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultTitleColor.get -> Microsoft.Maui.Graphics.Color
~static Microsoft.Maui.Controls.Handlers.Compatibility.ShellRenderer.DefaultUnselectedColor.get -> Microsoft.Maui.Graphics.Color

Copilot uses AI. Check for mistakes.
override Microsoft.Maui.Controls.Shapes.Shape.OnPropertyChanged(string? propertyName = null) -> void
~override Microsoft.Maui.Controls.Handlers.Items.MauiRecyclerView<TItemsView, TAdapter, TItemsViewSource>.OnInterceptTouchEvent(Android.Views.MotionEvent e) -> bool
~override Microsoft.Maui.Controls.Handlers.Items.MauiRecyclerView<TItemsView, TAdapter, TItemsViewSource>.OnTouchEvent(Android.Views.MotionEvent e) -> bool
Expand Down
Binary file added ...sts/snapshots/android-notch-36/TopTabUnselectedTextVisibleWhenSwitchingTabs.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
63 changes: 63 additions & 0 deletions src/Controls/tests/TestCases.HostApp/Issues/Issue35125.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
namespace Maui.Controls.Sample.Issues;

[Issue(IssueTracker.Github, 35125, "Shell top-tab unselected text should remain visible in Material 3 light theme", PlatformAffected.Android)]
public class Issue35125 : Shell
{
public Issue35125()
{
Tab shellTab = new Tab
{
Title = "Top Tabs"
};

Comment on lines +6 to +12
Copy link

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The issue is specific to Material3 light theme, but this page doesn’t force light theme. To make the UI test reliable across device/theme defaults, set Application.Current.UserAppTheme = AppTheme.Light when constructing the page (and consider noting that the repro requires a Material3 build).

Copilot uses AI. Check for mistakes.
shellTab.Items.Add(new ShellContent
{
Title = "TAB ONE",
ContentTemplate = new DataTemplate(typeof(Issue35125PageOne))
});

shellTab.Items.Add(new ShellContent
{
Title = "TAB TWO",
ContentTemplate = new DataTemplate(typeof(Issue35125PageTwo))
});

FlyoutItem flyoutItem = new FlyoutItem
{
Title = "Issue35125"
};

flyoutItem.Items.Add(shellTab);
Items.Add(flyoutItem);
}
}

class Issue35125PageOne : ContentPage
{
public Issue35125PageOne()
{
Title = "Page One";
Content = new Label
{
Text = "The test passes if the unselected tabs are visible in view.",
AutomationId = "Issue35125PageOneLabel",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
}
}

class Issue35125PageTwo : ContentPage
{
public Issue35125PageTwo()
{
Title = "Page Two";
Content = new Label
{
Text = "The test passes if the unselected tabs are visible in view.",
AutomationId = "Issue35125PageTwoLabel",
HorizontalOptions = LayoutOptions.Center,
VerticalOptions = LayoutOptions.Center
};
}
}
27 changes: 27 additions & 0 deletions src/Controls/tests/TestCases.Shared.Tests/Tests/Issues/Issue35125.cs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
#if ANDROID
using NUnit.Framework;
using UITest.Appium;
using UITest.Core;

namespace Microsoft.Maui.TestCases.Tests.Issues;

public class Issue35125 : _IssuesUITest
{
public Issue35125(TestDevice device) : base(device)
{
}

public override string Issue => "Shell top-tab unselected text should remain visible in Material 3 light theme";

[Test]
[Category(UITestCategories.Shell)]
Copy link

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This test targets the Material3-specific Shell top-tab behavior, but the Android Material3 CI stage only runs tests with TestCategory=Material3 (see eng/pipelines/common/ui-tests.yml). With [Category(UITestCategories.Shell)] it won't execute in the Material3 stage, so the regression won’t be covered.

Suggested change
[Category(UITestCategories.Shell)]
[Category(UITestCategories.Material3)]

Copilot uses AI. Check for mistakes.
public void TopTabUnselectedTextVisibleWhenSwitchingTabs()
{
App.WaitForElement("TAB TWO");
App.Tap("TAB TWO");
App.WaitForElement("Issue35125PageTwoLabel");

VerifyScreenshot();
}
Comment on lines +20 to +25
Copy link

Copilot AI Apr 24, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

After switching tabs, the selected/unselected indicator/text can animate; capturing immediately can make the screenshot comparison flaky. Consider using VerifyScreenshot(retryTimeout: ...) here to allow the tab layout to settle before asserting.

Copilot uses AI. Check for mistakes.
}
#endif
Loading