Shell Flyout Right to Left

subbupothuraju

Hi ,

How to create Right to Left Flyout menu in xamarin Forms with hamburger icon on right....?

Thanks,
Subbu

LeonLu

It could be achieved but we do not recommand you to achieve that, because it is not a good design to move the burger menu to the right side(shell layout design is same as the MasterDetailPage).If you moved hamburger icon and Flyout menu, this back arrow icon is very hard to change it from left to right.

You can see this thread: https://forums.xamarin.com/discussion/151646/how-can-i-move-the-burger-menu-to-the-right-side-in-the-navigation-bar

Based on my research, you should achieved by custom renderer for shell in IOS and Android.

subbupothuraju

but in my scenario i need hamburger icon on right side of the screen in every screen

DavidOrtinau

Today you would need to create a custom Shell renderer and override the layout and positioning of the flyout. We will add RTL support as some point in the future.

It is an appropriate pattern to adopt: https://material.io/design/usability/bidirectionality.html#mirroring-layout

DavidOrtinau

And actually you can use this solution here. I've not verified it myself, but it appears it ought to work.

https://github.com/xamarin/Xamarin.Forms/issues/6227#issuecomment-569703851

MayankPatil

Issue:
I am facing same issue in Xamarin.Forms Android with Shell Flyout, I have set the Shell property FlowDirection="RightToLeft" and it is working fine in iOS but not in Android.

In Android, The Flyout opening from LTR even after setting this property FlowDirection="RightToLeft" but working fine in iOS.

Requirement:
I want the Flyout to open from RTL, in same fashion how it is working in iOS after setting that property.

Details:
Xamarin.Form version: 5.0.0.2012
Xamarin.Android version: 11.2.2.1

Please help.. thanks