Not able to equally space menu items of BottomNavigationView using Shell in Android Tablets

MohdIB commented 1 month ago

Description

I've set up this MAUI Shell project and removed one item from the BottomNavigationView. Once removed the remaing three items are concentrated in the center. This issue is easily noticeable in tabs of large display size.

Having four items makes it seem to be equally spaced in potrait mode but technically not as in Landscape mode, the menu items are centered even for four items. Tried implementing a CustomShellRenderer for android but no expected output.

This issue is observed only in android devices and not not in iOS (The items are equally spaced by default)

Steps to Reproduce

Clone the attached .NET Shell project
Remove one ShellContent item from AppShell.xaml
Build the application in an android tablet of size greater or equal to 10 inches.
Observe the Bottom Navigation Menu Items.

Link to public reproduction project repository

https://github.com/dotnet/maui-samples/tree/main/8.0/Fundamentals/Shell

Version with bug

8.0.60 SR6

Is this a regression from previous behavior?

No, this is something new

Last version that worked well

Unknown/Other

Affected platforms

Android

Affected platform versions

Android 9 and up

Did you find any workaround?

No.

Relevant log output

No response

github-actions[bot] commented 1 month ago

Hi I'm an AI powered bot that finds similar issues based off the issue title.

Please view the issues below to see if they solve your problem, and if the issue describes your problem please consider closing this one and thumbs upping the other issue to help us prioritize it. Thank you!

Open similar issues:

[Bug] [Android] Shell.TitleView incorrect positioning of content (#3559), similarity score: 0.74

Closed similar issues:

Using Shell, more than 5 tabs works until navigating to another tab bar and back. (#22875), similarity score: 0.73
Shell navigation creates a void space after navigating to the target page (#1551), similarity score: 0.73
Shell: Top tabs are not displayed correctly (wrong color on Android, invisible on Windows) (#6558), similarity score: 0.73
[iOS]Additional space between FlyoutHeader and FlyoutItem in Shell page (#12329), similarity score: 0.73

Note: You can give me feedback by thumbs upping or thumbs downing this comment.

RoiChen001 commented 1 month ago

This problem cannot be reproduced at Android platform on the latest 17.11.0 Preview 3.0(8.0.40 & 8.0.60). image (4)

MohdIB commented 1 month ago

Remove one menu item (e.g. bears) and see that the items are not equally spaced. The three items will be centered.

Having four items makes it seem to be equally spaced visually. In landscape mode, having four items too makes them positioned centered.

RoiChen001 commented 1 month ago

Can repro this issue at Android platform on the latest 17.11.0 Preview 3.0(8.0.40 & 8.0.60).

PureWeen commented 1 month ago

Interesting, we set the visibility mode to LabelVisibilityLabeled which I was thinking would equally space everything

MohdIB commented 1 month ago

I tried to set the visibility mode to LabelVisibilityLabeled in the shell custom render, this issue still existed.

MohdIB commented 1 month ago

Not able to equally space menu items of BottomNavigationView using Shell in Android Tablets even after using many ways in Shell Custom Renderer for Android.

Commenting to highlight the urgency of this issue.

MohdIB commented 1 month ago

@PureWeen, Any update or help on this open issue as i am unable to get a work around to equally space menu items of BottomNavigationView using shell in Android Tablets.

dotnet / maui