[Android] Fixed TabbedPage bar background visual bug when using gradient stops with transparent colors. #32392
Conversation
|
Hey there @@SubhikshaSf4851! Thank you so much for your PR! Someone from the team will get assigned to your PR shortly and we'll get it reviewed. |
dotnet-policy-service
bot
added
the
partner/syncfusion
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
Tamilarasan-Paranthaman
added
platform/android
area-controls-tabbedpage
There was a problem hiding this comment.
Pull Request Overview
This PR fixes a visual bug in Android TabbedPage where a separation line appears when using gradients as the bar background, particularly when tabs are positioned at the bottom. The fix sets the elevation to 0 on the BottomNavigationView to remove the visual separation line.
Key Changes
- Added
Elevation = 0property toBottomNavigationViewinTabbedPageManager.cs - Created UI test
Issue12324to verify the fix with gradient backgrounds - Added test snapshots for Android and Windows platforms
Reviewed Changes
Copilot reviewed 3 out of 6 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
TabbedPageManager.cs |
Sets elevation to 0 on BottomNavigationView to prevent visual separation lines |
Issue12324.cs (HostApp) |
Test page demonstrating bottom-placed tabs with gradient background |
Issue12324.cs (Shared.Tests) |
UI test verifying the visual fix works correctly |
Issue12324TabbedPageVisualTest.png (Android) |
Baseline screenshot for Android platform |
Issue12324TabbedPageVisualTest.png (Windows) |
Baseline screenshot for Windows platform |
| @@ -0,0 +1,25 @@ | |||
| #if TEST_FAILS_ON_CATALYST // TabBar not visible on Catalyst: https://github.com/dotnet/maui/issues/32329 | |||
There was a problem hiding this comment.
The test is excluded from Catalyst due to TabBar visibility issues. According to UI testing guidelines, tests should run on all applicable platforms by default unless there's a documented limitation. Since this is a TabbedPage visual test specific to Android's bottom tab placement (line 11 in HostApp), consider whether this test should also be excluded from iOS and Windows platforms, or if the platform-specific code in the HostApp (AndroidSpecific.TabbedPage.SetToolbarPlacement) makes it inherently Android-only. If it's Android-only, the Issue attribute should reflect PlatformAffected.Android which it already does, but the test conditional compilation should be more explicit about which platforms it runs on.
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
| } | ||
| }, | ||
| // Set elevation to 0 to prevent visual separation lines, especially with gradients | ||
| Elevation = 0 |
There was a problem hiding this comment.
Can only set it if the Background is a GradientBrush?
There was a problem hiding this comment.
I have updated the changes
|
/azp run |
|
Azure Pipelines successfully started running 3 pipeline(s). |
| if (_bottomNavigationView is not null && _bottomNavigationView.Elevation > 0) | ||
| { | ||
| _bottomNavigationView.Elevation = 0; | ||
| } |
There was a problem hiding this comment.
Should we store and restore the original elevation value?
4 participants
Note
Are you waiting for the changes in this PR to be merged?
It would be very helpful if you could test the resulting artifacts from this PR and let us know in a comment if this change resolves your issue. Thank you!
Root Cause:
The visual separation line appears because of Android’s default elevation shadow on
BottomNavigationView, which becomes visible when rendered together with transparent gradient backgrounds.Description of Change :
Set the
Elevationproperty to0in theBottomNavigationViewon Android to prevent visual separation lines, especially with gradients.Issues Fixed
Fixes #12324
Tested the behavior in the following platforms
Screenshot
Screen.Recording.2025-11-05.at.10.04.49.mov
Screen.Recording.2025-11-05.at.10.01.14.mov