dotnet
[Android] Tabs briefly display wrong background color when navigating between flyout items
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.
- [x] Android
- [x] Windows
- [x] iOS
- [x] Mac
Reference
N/A
Issues Fixed
Fixes #16522
Screenshots
| Before | After |
|---|---|
![azure-pipelines[bot] avatar](https://avatars.githubusercontent.com/in/9426?v=4 "Published by a pub.dev verified publisher"){kind=small}
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.
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
@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.
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.
