[Android] Tabs briefly display wrong background color when navigating between flyout items by NanthiniMahalingam · Pull Request #24965 · dotnet/maui

NanthiniMahalingam · 2024-09-27T10:35:33Z

Root Cause:

On Android, the BottomNavigationView initially has a ColorDrawable with a white background, which is the default color during its creation.
Later, the BottomNavigationView background is changed to a ColorChangeRevealDrawable with an animation, transitioning to the color specified by IShellAppearanceElement.EffectiveTabBarBackgroundColor.
Since the previous background color (white) differs from the current color (black), the animation displays a transition from white to black when switching pages.

Description of Change:

To resolve this issue, the IShellAppearanceElement.EffectiveTabBarBackgroundColor is applied to the background of the BottomNavigationView immediately after its creation.
This ensures that no animation is triggered later, as the previous background color (black) and the current color (black) remain the same.

Tested the behaviour in the following platforms.

Android
Windows
iOS
Mac

Reference

N/A

Issues Fixed

Fixes #16522

Screenshots

Before	After

… between flyout items

…into fix-16522

jfversluis · 2024-10-03T12:20:36Z

/azp run

azure-pipelines · 2024-10-03T12:20:57Z

Azure Pipelines successfully started running 3 pipeline(s).

PureWeen

Test failures on this one seem accurate

vishnumenon2684 · 2024-10-09T06:58:58Z

Test failures on this one seem accurate

@PureWeen The test case failing seems to be in Windows, even though the fix is specifically added for android.
Could you please check this once? If not can we try triggering the CI once.

jsuarezruiz · 2024-10-09T11:27:20Z

/rebase

… between flyout items

jsuarezruiz · 2024-10-09T13:26:17Z

/azp run

azure-pipelines · 2024-10-09T13:26:39Z

Azure Pipelines successfully started running 3 pipeline(s).

PureWeen · 2024-10-09T15:30:44Z

Test failures on this one seem accurate

@PureWeen The test case failing seems to be in Windows, even though the fix is specifically added for android. Could you please check this once? If not can we try triggering the CI once.

The failure I'm referring to is that both API levels of the Android aren't running to completion

It looks like the changes here are causing the device tests on android to crash.
If you download the logcat file from the device test runs you should be able to see a crash in there that will need to be resolved

https://github.com/dotnet/maui/blob/main/docs/design/UITesting.md#logging

…into fix-16522

jsuarezruiz · 2025-03-03T10:43:24Z

/azp run

azure-pipelines · 2025-03-03T10:43:44Z

Azure Pipelines successfully started running 3 pipeline(s).

PureWeen · 2025-03-04T22:07:27Z

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

 			HookEvents(ShellItem);
 			SetupMenu();
-
+			var appearance = ShellContext.Shell.GetAppearanceForPivot(ShellItem);


If I move this code into the SetAppearance call of this class it seems to do the same thing

Can we do that instead of setting the GetAppearanceForPivot to internal?

If I move this code into the SetAppearance call of this class it seems to do the same thing

Can we do that instead of setting the GetAppearanceForPivot to internal?

Yes It is working in SetAppearance call. I have modified the fix based on your suggestion. Could you please review it and let me know if you have any concerns?

rmarinho · 2025-03-17T18:42:11Z

/azp run

azure-pipelines · 2025-03-17T18:42:35Z

Azure Pipelines successfully started running 3 pipeline(s).

jsuarezruiz · 2025-03-19T08:03:26Z

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

+
+		[Test]
+		[Category(UITestCategories.Shell)]
+		public void ShellTabBarBackgroundColor()


The test is failing on Windows:
Snapshot different than baseline: ShellTabBarBackgroundColor.png (1.51% difference)

Note, in red the differences:

Could you take a look?

The test is failing on Windows: Snapshot different than baseline: ShellTabBarBackgroundColor.png (1.51% difference)

Note, in red the differences: Could you take a look?

I have updated the snapshot. Could you please review it and let me know if you have any concerns?

jsuarezruiz · 2025-03-25T06:56:36Z

/azp run

azure-pipelines · 2025-03-25T06:56:56Z

Azure Pipelines successfully started running 3 pipeline(s).

jsuarezruiz · 2025-06-09T07:37:52Z

@NanthiniMahalingam Could you rebase? Thanks in advance.

NanthiniMahalingam · 2025-06-09T12:18:15Z

I'm closing this PR in reference to the newly created PR #29883

KarthikRajaKalaimani and others added 2 commits September 27, 2024 14:29

[Android] Tabs briefly display wrong background color when navigating…

44fae26

… between flyout items

Merge branch 'dotnet:main' into fix-16522

69d6dca

dotnet-policy-service bot added the community ✨ Community Contribution label Sep 27, 2024

KarthikRajaKalaimani and others added 4 commits September 27, 2024 18:25

[Android] Tabs briefly display wrong background color when navigating…

ec6d044

… between flyout items

Merge branch 'fix-16522' of https://github.com/NanthiniMahalingam/maui …

d4f54ef

…into fix-16522

Merge branch 'dotnet:main' into fix-16522

2013130

Remove unwanted casting.

bea929b

NanthiniMahalingam marked this pull request as ready for review October 3, 2024 11:41

NanthiniMahalingam requested a review from a team as a code owner October 3, 2024 11:41

NanthiniMahalingam requested review from PureWeen and mattleibow October 3, 2024 11:41

PureWeen previously requested changes Oct 3, 2024

View reviewed changes

jsuarezruiz added platform/android area-controls-shell Shell Navigation, Routes, Tabs, Flyout labels Oct 4, 2024

Merge branch 'dotnet:main' into fix-16522

ab26c9b

KarthikRajaKalaimani and others added 3 commits October 9, 2024 11:27

[Android] Tabs briefly display wrong background color when navigating…

df6427f

… between flyout items

[Android] Tabs briefly display wrong background color when navigating…

aa50a13

… between flyout items

Remove unwanted casting.

3240bee

github-actions bot force-pushed the fix-16522 branch from ab26c9b to 3240bee Compare October 9, 2024 11:28

dotnet deleted a comment from azure-pipelines bot Oct 9, 2024

KarthikRajaKalaimani and others added 3 commits October 14, 2024 16:14

Merge branch 'dotnet:main' into fix-16522

670af0f

Merge branch 'fix-16522' of https://github.com/NanthiniMahalingam/maui …

f832659

…into fix-16522

Fix for device test failed in android api 23 has committed

099302c

PureWeen moved this from Changes Requested to Ready To Review in MAUI SDK Ongoing Mar 2, 2025

PureWeen requested changes Mar 4, 2025

View reviewed changes

github-project-automation bot moved this from Ready To Review to Changes Requested in MAUI SDK Ongoing Mar 4, 2025

Fix modified based on the suggestion

67559a6

PureWeen modified the milestones: .NET 9 SR5, .NET 9 SR6 Mar 7, 2025

PureWeen moved this from Changes Requested to Ready To Review in MAUI SDK Ongoing Mar 18, 2025

PureWeen requested review from PureWeen and jsuarezruiz March 18, 2025 15:12

jsuarezruiz suggested changes Mar 19, 2025

View reviewed changes

github-project-automation bot moved this from Ready To Review to Changes Requested in MAUI SDK Ongoing Mar 19, 2025

PureWeen modified the milestones: .NET 9 SR6, .NET 9 SR7 Mar 23, 2025

Updated Snapshot for windows platform

7423922

PureWeen modified the milestones: .NET 9 SR7, .NET 9 SR8 May 8, 2025

PureWeen removed this from MAUI SDK Ongoing May 8, 2025

PureWeen modified the milestones: .NET 9 SR8, .NET 9 Servicing May 8, 2025

NanthiniMahalingam closed this Jun 9, 2025

sheiksyedm mentioned this pull request Jun 10, 2025

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

Merged

4 tasks

github-actions bot locked and limited conversation to collaborators Jul 10, 2025

Conversation

NanthiniMahalingam commented Sep 27, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Root Cause:

Description of Change:

Reference

Issues Fixed

Screenshots

Uh oh!

jfversluis commented Oct 3, 2024

Uh oh!

azure-pipelines bot commented Oct 3, 2024

Uh oh!

PureWeen left a comment

Choose a reason for hiding this comment

Uh oh!

vishnumenon2684 commented Oct 9, 2024

Uh oh!

jsuarezruiz commented Oct 9, 2024

Uh oh!

jsuarezruiz commented Oct 9, 2024 • edited by jfversluis Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

azure-pipelines bot commented Oct 9, 2024

Uh oh!

PureWeen commented Oct 9, 2024

Uh oh!

jsuarezruiz commented Mar 3, 2025

Uh oh!

azure-pipelines bot commented Mar 3, 2025

Uh oh!

PureWeen Mar 4, 2025

Choose a reason for hiding this comment

Uh oh!

KarthikRajaKalaimani Mar 5, 2025

Choose a reason for hiding this comment

Uh oh!

rmarinho commented Mar 17, 2025

Uh oh!

azure-pipelines bot commented Mar 17, 2025

Uh oh!

jsuarezruiz Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

KarthikRajaKalaimani Mar 24, 2025

Choose a reason for hiding this comment

Uh oh!

jsuarezruiz commented Mar 25, 2025

Uh oh!

azure-pipelines bot commented Mar 25, 2025

Uh oh!

jsuarezruiz commented Jun 9, 2025

Uh oh!

NanthiniMahalingam commented Jun 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

9 participants

NanthiniMahalingam commented Sep 27, 2024 •

edited

Loading

jsuarezruiz commented Oct 9, 2024 •

edited by jfversluis

Loading

NanthiniMahalingam commented Jun 9, 2025 •

edited

Loading