maui
maui copied to clipboard
dotnet
Not able to equally space menu items of BottomNavigationView using Shell in Android Tablets
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
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.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
This problem cannot be reproduced at Android platform on the latest 17.11.0 Preview 3.0(8.0.40 & 8.0.60).
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.
Can repro this issue at Android platform on the latest 17.11.0 Preview 3.0(8.0.40 & 8.0.60).
Interesting, we set the visibility mode to LabelVisibilityLabeled which I was thinking would equally space everything
I tried to set the visibility mode to LabelVisibilityLabeled in the shell custom render, this issue still existed.
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.
@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.
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
