How to Equally space menu items of BottomNavigationView in Android Tab?

Mohammed, Rahil 0

Screenshot 2024-07-11 at 5.25.28 PM.png

https://github.com/dotnet/maui-samples/tree/main/8.0/Fundamentals/Shell
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. How to Equally space menu items to fill the width of the Tablet Device

Leon Lu (Shanghai Wicresoft Co,.Ltd.) 79,546 Reputation points Microsoft Vendor

2024-07-12T09:16:07.09+00:00

If you have four items in the BottomNavigationView, will you get Equally space menu items?I test it in my side, I find this issue only appears in the tablet 10 inches and above, if you run it in the android phone, it is running normally.

You can try to bottomView.ItemHorizontalTranslationEnabled = false; in the custom renderer. Is that working.
Mohammed, Rahil 0 Reputation points

2024-07-12T10:07:57.6533333+00:00
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.

Yes, this issue is easily noticeable in tabs of large display size.

bottomView.ItemHorizontalTranslationEnabled = false; is not working.
FYI, i am able to modify height of the BottomNavigation View.

// CustomShellRenderer.cs

public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance) { bottomView.LayoutParameters.Height = 70; bottomView.ItemHorizontalTranslationEnabled = false; base.SetAppearance(bottomView, appearance); }
Mohammed, Rahil 0 Reputation points

2024-07-12T10:18:12.95+00:00
Having four items makes it seem to be equally spaced in potrait mode but technically not as i landscape mode, the four menu items are positioned centered.

Yes, this issue is clearly visible in tablets of large display size.

bottomView.ItemHorizontalTranslationEnabled = false; is not working.
FYI, I am able to modify the height of BottomNavigationView.

// CustomShellRenderer.cs

public override void SetAppearance(BottomNavigationView bottomView, IShellAppearanceElement appearance) { bottomView.LayoutParameters.Height = 110; base.SetAppearance(bottomView, appearance); bottomView.ItemHorizontalTranslationEnabled = false; }

2 answers

Deleted

This answer has been deleted due to a violation of our Code of Conduct. The answer was manually reported or identified through automated detection before action was taken. Please refer to our Code of Conduct for more information.
1 deleted comment

Comments have been turned off. Learn more
Leon Lu (Shanghai Wicresoft Co,.Ltd.) 79,546 Reputation points Microsoft Vendor

2024-07-16T02:36:28.2066667+00:00

Hello,

I find you have opened an issue in the MAUI GitHub:Not able to equally space menu items of BottomNavigationView using Shell in Android Tablets #23606

Please track on this issue in the MAUI GitHub repo.

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

Best Regards,

Leon Lu

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.
Please sign in to rate this answer.

0 comments No comments
Sign in to comment

Use comments to ask for clarification, additional information, or improvements to the question.

Share via

How to Equally space menu items of BottomNavigationView in Android Tab?

2 answers

Your answer