[Bug] Can't overlay Shell FlyoutHeader on FlyoutBackgroundImage

[rmarinho]

If i set a FlyoutBackgroundImage to fill all my flyout, then want to overlay my header so it sits on top of the background image, this works fine on iOS, but on Android it renders a white background on the flyout header area and my FlyoutHeaderTemplate above, not sure if the FlyoutBackgroundImage is behind the white on the FlyoutHeader

Description

Steps to Reproduce

FloutHeaderTemplate
<ContentView xmlns="http://xamarin.com/schemas/2014/forms" xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" x:Class="SCE.Templates.FlyoutHeader"
             BackgroundColor="Transparent" >
 <Image Source="logo_sce_peq.png" >
</ContentView >

<Shell xmlns="http://xamarin.com/schemas/2014/forms" 
       xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml" 
       FlyoutHeaderTemplate="{StaticResource ShellFlyoutTemplate}"
       xmlns:xfh="http://xamarin.forms/schemas/helpers"
       FlyoutBackgroundImage="back.jpg"
       FlyoutBackgroundImageAspect="Fill">

Expected Behavior

Should render a transparent background , the logo png should be above the back.jpg

Actual Behavior

Renderes white background

Basic Information

• Version with issue: master

Screenshots

Reproduction Link

[Qythyx]

Is there any workaround for this? Even a custom renderer?

[Qythyx]

I finally found a work around for this using a custom renderer in Android. This works for me, hopefully it'll help others.

using Android.Content;
using BeerApp.App.Droid.CustomRenderers;
using Xamarin.Forms;
using Xamarin.Forms.Platform.Android;

[assembly: ExportRenderer(typeof(Shell), typeof(CustomShellRenderer))]
namespace BeerApp.App.Droid.CustomRenderers
{
	public class CustomShellRenderer : ShellRenderer
	{
		public CustomShellRenderer(Context context) : base(context)
		{
		}

		/// <summary>
		/// This is needed due to bug (https://github.com/xamarin/Xamarin.Forms/issues/6595)
		/// in Xamarin such that setting the background color
		/// to Transparent for the content in Shell.FlyoutHeader does not work and shows some
		/// default underlying color. This sets that underlying color to Transparent.
		/// </summary>
		/// <returns>The renderer.</returns>
		protected override IShellFlyoutContentRenderer CreateShellFlyoutContentRenderer()
		{
			var renderer = base.CreateShellFlyoutContentRenderer();
			if(renderer != null) {
				var viewGroup = (Android.Views.ViewGroup)renderer.AndroidView;
				var linearLayout = (Android.Widget.LinearLayout)viewGroup.GetChildAt(0)!;
				linearLayout.SetBackgroundColor(Color.Transparent.ToAndroid());
				linearLayout.SetOutlineSpotShadowColor(Color.Transparent.ToAndroid());
			}
			return renderer!;
		}
	}
}

[PureWeen]

#13322