CODEWITHSUNDEEP
xamarinxamarin.formsxamarin.android
Brad Dean
Brad Dean

Reputation: 396

Changing size of Xamarin Flyout page

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?

Upvotes: 1

Views: 1146

Answers (1)

Wendy Zang - MSFT
Wendy Zang - MSFT

Reputation: 10958

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://learn.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://learn.microsoft.com/en-us/xamarin/xamarin-forms/app-fundamentals/navigation/flyoutpage

Upvotes: 3

Related Questions