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

[MohdIB]

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

1. Clone the attached .NET Shell project
2. Remove one ShellContent item from AppShell.xaml
3. Build the application in an android tablet of size greater or equal to 10 inches.
4. 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]

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]

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

[MohdIB]

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]

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

[PureWeen]

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

[MohdIB]

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

[MohdIB]

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]

@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.

[kubaflo]

Hi, @MohdIB, I'm not sure it is possible with the BottomNavigationView. Currently, the BottomNavigationView in the MAUI app behaves like the native Android one generated by Android Studio, and Android doesn't seem to provide a property that would let developers to evenly distribute icons across the full width of the view