Skip to content
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.

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

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

Open
wants to merge 18 commits into
base: main
Choose a base branch
from

Conversation

NanthiniMahalingam
Copy link
Contributor

@NanthiniMahalingam NanthiniMahalingam commented Sep 27, 2024

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

@dotnet-policy-service dotnet-policy-service bot added the community ✨ Community Contribution label Sep 27, 2024
@NanthiniMahalingam NanthiniMahalingam marked this pull request as ready for review October 3, 2024 11:41
@NanthiniMahalingam NanthiniMahalingam requested a review from a team as a code owner October 3, 2024 11:41
@jfversluis
Copy link
Member

/azp run

Copy link

Azure Pipelines successfully started running 3 pipeline(s).

Copy link
Member

@PureWeen PureWeen left a comment

Choose a reason for hiding this comment

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

Test failures on this one seem accurate

@jsuarezruiz jsuarezruiz added platform/android 🤖 area-controls-shell Shell Navigation, Routes, Tabs, Flyout labels Oct 4, 2024
@vishnumenon2684
Copy link
Contributor

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
Copy link
Contributor

/rebase

@jsuarezruiz
Copy link
Contributor

jsuarezruiz commented Oct 9, 2024

/azp run

Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@PureWeen
Copy link
Member

PureWeen commented Oct 9, 2024

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.

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

Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@NanthiniMahalingam
Copy link
Contributor Author

NanthiniMahalingam commented Oct 15, 2024

@PureWeen

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.

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

• I identified the cause of the crash during device testing on Android API 23.
• The issue arises because the EffectiveTabBarBackgroundColor property is null in this API version.
• To resolve this, I applied the DefaultBottomNavigationViewBackgroundColor as a fallback to ensure the background color is set properly.

@jsuarezruiz
Copy link
Contributor

/azp run

Copy link

Azure Pipelines successfully started running 3 pipeline(s).

Copy link
Contributor

@jsuarezruiz jsuarezruiz left a comment

Choose a reason for hiding this comment

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

Could you include an UITest verifying the tabs background color?

@NanthiniMahalingam
Copy link
Contributor Author

Could you include an UITest verifying the tabs background color?

Hi @jsuarezruiz
I have added UI test case for TabBarBackgroundColor. Please let us know if you have any further concerns.

@jsuarezruiz
Copy link
Contributor

/azp run

@dotnet dotnet deleted a comment from azure-pipelines bot Nov 11, 2024
Copy link

Azure Pipelines successfully started running 3 pipeline(s).

@sheiksyedm
Copy link

/rebase

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
area-controls-shell Shell Navigation, Routes, Tabs, Flyout community ✨ Community Contribution platform/android 🤖
Projects
None yet
Development

Successfully merging this pull request may close these issues.

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