1

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?

Cfun
  • 8,442
  • 4
  • 30
  • 62
  • 1
    I never try it, but did you try to set the flyout background color to Transparent and then create a view inside with PancakeView ? – FabriBertani Apr 16 '21 at 18:33
  • Thanks for the suggestion no I didn't, because the flyout content is auto generated (the default) based on whatever is your Appshell hiearchy. I am not setting `Shell.FlyoutContent` – Cfun Apr 16 '21 at 18:38
  • @FabriBertani you may convert your comment suggestion into an answer for future readers, I tried it and it is working :). In the case where `FlyoutContent` or `FlyoutContentTemplate` is being set instead of the auto generated one, it's a much better approach than a custom renderer. – Cfun Apr 16 '21 at 18:50
  • Oh cool, also I'll assume that works on both platforms ;-D – FabriBertani Apr 16 '21 at 19:45
  • @FabriBertani Sure since it is implemented in shared code unless a bug in XF itself :) – Cfun Apr 17 '21 at 16:48

1 Answers1

0

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>
  1. 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

enter image description here

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.

Cfun
  • 8,442
  • 4
  • 30
  • 62