Changing size of Xamarin Flyout page

Question

I'm trying to make a Flyout page (previously MasterDetailPage) take up a 1/3 of the screen for the Flyout and 2/3 for Detail.

I was able to accomplish this on iOS by using a custom renderer that's a modification of the Xamarin.Form's Flyout implementation

But there isn't any such implementation for Android and I can't figure out how to accomplish this.

Anyone know how to do this?

Answer 1

You could use custom renderer to do that.

The renderer of FlyoutPage in Android is FlyoutPageRenderer . The following link lists the renderer and native control classes that implement each Xamarin.Forms Page type: https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/custom-renderer/renderers

The source code of FlyoutPageRenderer: https://github.com/xamarin/Xamarin.Forms/blob/5.0.0/Xamarin.Forms.Platform.Android/AppCompat/FlyoutPageRenderer.cs

You could get the field _flyoutLayout in source code. Then, you could set the height and width like the code below.

   [assembly: ExportRenderer(typeof(FlyoutPage), typeof(FlyoutPageCustomRenderer))]
namespace App14.Droid
{
class FlyoutPageCustomRenderer: FlyoutPageRenderer
{
    public FlyoutPageCustomRenderer(Context context) : base(context)
    {

    }
    protected override void OnElementChanged(VisualElement oldElement, VisualElement newElement)
    {
        base.OnElementChanged(oldElement, newElement);
        var fieldInfo = GetType().BaseType.GetField("_flyoutLayout", System.Reflection.BindingFlags.Instance | System.Reflection.BindingFlags.NonPublic);
        var _flyoutLayou = (ViewGroup)fieldInfo.GetValue(this);
        var lp = new LayoutParams(_flyoutLayou.LayoutParameters);

        lp.Width = 400;
        lp.Height = 600;

        lp.Gravity = (int)GravityFlags.Left;
        _flyoutLayou.LayoutParameters = lp;

    }
}
}

For better effect, i set the background color to pink. The background color is set in flyout menu page.

If you wanna more information about the FlyoutPage , you could refer to the MS docs. https://docs.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage