Shell flyout with round corners

Question

Trying to customize the Shell flyout by setting it corner radius in order to have a flyout with round corners. Since there is no property related to Shell flyout corner radius, is there a way to achieve that with a custom renderer?

Answer 1

Unfortunately I don't see a way to do it in the shared code when using the auto generated flyout content based on AppShell hierarchy (if you are overriding it skip to the Edit section), here is a solution to get it done using a custom renderer for Android:

1. In your Android project, in Resources\drawable, add:

flyoutbackground.xml

<?xml version="1.0" encoding="utf-8" ?>
<shape xmlns:android="http://schemas.android.com/apk/res/android">
    <solid android:color="@android:color/transparent" />
    <corners android:bottomRightRadius="30dp" android:topRightRadius="30dp" />
</shape>

2. In your Android project, implement a ShellRenderer for your AppShell:

[assembly: ExportRenderer(typeof(App1.AppShell), typeof(AppShellRenderer))]
namespace App1.Droid.Renderers
{
    public class AppShellRenderer : ShellRenderer
    {
        public AppShellRenderer(Context context) : base(context)
        {
        }

        protected override IShellFlyoutContentRenderer CreateShellFlyoutContentRenderer()
        {
            var flyoutContentRenderer = base.CreateShellFlyoutContentRenderer();
            var flyoutbackground = AppCompatResources.GetDrawable(Platform.CurrentActivity, Resource.Drawable.flyoutbackground);

            if (Android.OS.Build.VERSION.SdkInt > Android.OS.BuildVersionCodes.O)
            {
                flyoutbackground.SetColorFilter(new BlendModeColorFilter(
                    Shell.Current.FlyoutBackgroundColor.ToAndroid(), BlendMode.Color));
                flyoutContentRenderer.AndroidView.SetBackground(flyoutbackground);
            }
            else
            {
                flyoutbackground.SetColorFilter(Shell.Current.FlyoutBackgroundColor.ToAndroid(), PorterDuff.Mode.Src);
                flyoutContentRenderer.AndroidView.SetBackgroundDrawable(flyoutbackground);
            }
            return flyoutContentRenderer;
        }
}

Render result

Limitation

• The corner radius is hard-coded.
• Seems to be not working for Android API <= 26, please feel free to fix/improve the code on this answer.

Note

A similar analogy could be implemented for iOS, here is an answer that might help Xamarin Forms Shell TabBar Rounded Corner.

Related question: Shell TabBar rounded corners with view behind

Edit

If you are overriding the flyout content using Shell.FlyoutContent or FlyoutContentTemplate instead of the auto generated content based on AppShell hierarchy, then check @FabriBertani comment as you don't require a custom renderer to achieve that.