feat: ElevatedView unification on Android

Author: MartinZikmund

src/SamplesApp/UITests.Shared/Toolkit/ElevatedView_Tester.xaml

@@ -8,17 +8,19 @@
     mc:Ignorable="d"
     Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">
 
-    <Grid RowSpacing="8">
+    <Grid RowSpacing="8" Padding="20">
 		<Grid.RowDefinitions>
 			<RowDefinition Height="Auto" />
 			<RowDefinition Height="Auto" />
 			<RowDefinition Height="Auto" />
 			<RowDefinition Height="*" />
 		</Grid.RowDefinitions>
 
-		<Slider Header="Elevation" Value="{x:Bind Elevation, Mode=TwoWay}" Minimum="0" Maximum="128" />
+		<TextBlock Margin="4" Text="{Binding ElementName=ElevationSlider, Path=Value}" HorizontalAlignment="Right" />
+		<Slider x:Name="ElevationSlider" Header="Elevation" Value="{x:Bind Elevation, Mode=TwoWay}" Minimum="0" Maximum="128" />
 
-		<Slider Header="Corner radius" Value="{x:Bind Radius, Mode=TwoWay}" Minimum="0" Maximum="40" Grid.Row="1" />
+		<TextBlock Margin="4" Text="{Binding ElementName=CornerRadiusSlider, Path=Value}" HorizontalAlignment="Right" Grid.Row="1" />
+		<Slider x:Name="CornerRadiusSlider" Header="Corner radius" Value="{x:Bind Radius, Mode=TwoWay}" Minimum="0" Maximum="40" Grid.Row="1" />
 
 		<TextBox Header="Color" Text="{x:Bind ColorString, Mode=TwoWay}" Grid.Row="2" />
 

src/Uno.UI.Toolkit/ElevatedView.Android.cs

@@ -0,0 +1,132 @@
+#nullable enable
+
+using AndroidCanvas = Android.Graphics.Canvas;
+using AndroidColor = Android.Graphics.Color;
+using AndroidPaint = Android.Graphics.Paint;
+using AndroidBitmap = Android.Graphics.Bitmap;
+using Android.Graphics;
+using System;
+using Android.App;
+
+namespace Uno.UI.Toolkit;
+
+partial class ElevatedView
+{
+	private const int MaximumRadius = 128;
+	
+	private AndroidCanvas? _shadowCanvas = null;
+	private AndroidPaint? _shadowPaint = null;
+	private AndroidBitmap? _shadowBitmap = null;
+	private bool _invalidateShadow = true;
+	
+	protected override void DispatchDraw(Canvas canvas)
+	{
+		if (Elevation > 0)
+		{
+			DrawShadow(canvas);
+		}
+		else
+		{
+			DisposeShadow();
+		}
+
+		// Draw children
+		base.DispatchDraw(canvas);
+	}
+
+	private void DisposeShadow()
+	{
+		_shadowCanvas?.Dispose();
+		_shadowPaint?.Dispose();
+		_shadowBitmap?.Dispose();
+		_shadowCanvas = null;
+		_shadowPaint = null;
+		_shadowBitmap = null;
+	}
+
+	private void DrawShadow(AndroidCanvas canvas)
+	{
+		_shadowCanvas ??= new AndroidCanvas();
+
+		_shadowPaint ??= new AndroidPaint
+		{
+			AntiAlias = true,
+			Dither = true,
+			FilterBitmap = true
+		};
+
+		AndroidColor? solidColor = null;
+
+		if (_invalidateShadow)
+		{
+			var viewHeight = ActualHeight;
+			var viewWidth = ActualWidth;
+
+			// If bounds is zero
+			if (viewHeight != 0 && viewWidth != 0)
+			{
+				var bitmapHeight = viewHeight + MaximumRadius;
+				var bitmapWidth = viewWidth + MaximumRadius;
+
+				// Reset bitmap to bounds
+				_shadowBitmap = AndroidBitmap.CreateBitmap(
+					(int)bitmapWidth,
+					(int)bitmapHeight,
+					AndroidBitmap.Config.Argb8888);
+
+				// Reset Canvas
+				_shadowCanvas.SetBitmap(_shadowBitmap);
+
+				_invalidateShadow = false;
+
+				// Create the local copy of all content to draw bitmap as a
+				// bottom layer of natural canvas.
+				base.DispatchDraw(_shadowCanvas);
+
+				// Get the alpha bounds of bitmap
+				var extractAlpha = _shadowBitmap!.ExtractAlpha();
+				if (extractAlpha is not null)
+				{
+					// Clear past content content to draw shadow
+					_shadowCanvas.DrawColor(AndroidColor.Black, PorterDuff.Mode.Clear);
+
+					_shadowPaint.Color = ShadowColor;
+					const float x = 0.28f;
+					const float y = 0.90f * 0.5f; // Looks more accurate than the recommended 0.92f.
+												  // Apply the shadow radius 
+					var radius = (float)Math.Round(0.3f * (float)Elevation, 1, MidpointRounding.AwayFromZero);
+
+					if (radius > 0)
+					{
+						_shadowPaint.SetMaskFilter(new BlurMaskFilter(radius, BlurMaskFilter.Blur.Normal));
+					}
+
+					float shadowOffsetX = (float)Elevation * x;
+					float shadowOffsetY = (float)Elevation * y;
+
+					_shadowCanvas.DrawBitmap(extractAlpha!, (int)shadowOffsetX, (int)shadowOffsetY, _shadowPaint);
+
+					extractAlpha?.Recycle();
+				}
+
+				// Reset alpha to draw child with full alpha
+				if (solidColor != null)
+				{
+#pragma warning disable CA1416 // https://github.com/xamarin/xamarin-android/issues/6962
+					_shadowPaint.Color = ShadowColor;
+#pragma warning restore CA1416
+				}
+
+				// Draw shadow bitmap
+				if (_shadowCanvas != null && _shadowBitmap != null && !_shadowBitmap.IsRecycled)
+				{
+					canvas.DrawBitmap(_shadowBitmap, 0.0F, 0.0F, _shadowPaint);
+				}
+			}
+			else
+			{
+				DisposeShadow();
+			}
+		}
+	}
+}

src/Uno.UI.Toolkit/ElevatedView.cs

@@ -11,6 +11,8 @@
 #elif __MACOS__
 using CoreGraphics;
 using _View = AppKit.NSView;
+#elif __ANDROID__
+using Android.Views;
 #endif
 
 
@@ -46,11 +48,7 @@ public sealed partial class ElevatedView : Control
 		 *
 		 */
 
-#if __ANDROID__
-		private static readonly Color DefaultShadowColor = Colors.Black;
-#else
 		private static readonly Color DefaultShadowColor = Color.FromArgb(64, 0, 0, 0);
-#endif
 
 		private Border _border;
 		private Panel _shadowHost;
@@ -194,9 +192,13 @@ private void UpdateElevation()
 #elif __IOS__ || __MACOS__
 				this.SetElevationInternal(Elevation, ShadowColor, _border.BoundsPath);
 #elif __ANDROID__
-				// The elevation must be applied on the border, since
-				// it will get the right shape (with rounded corners)
-				_border.SetElevationInternal(Elevation, ShadowColor);
+#if __ANDROID__
+				_invalidateShadow = true;
+				((ViewGroup)this).Invalidate();
+#endif
+				//// The elevation must be applied on the border, since
+				//// it will get the right shape (with rounded corners)
+				//_border.SetElevationInternal(Elevation, ShadowColor);
 #elif __SKIA__
 				this.SetElevationInternal(Elevation, ShadowColor);
 #elif (NETFX_CORE || NETCOREAPP) && !HAS_UNO
@@ -212,6 +214,11 @@ private void UpdateElevation()
 
 		protected override Windows.Foundation.Size ArrangeOverride(Windows.Foundation.Size finalSize)
 		{
+#if __ANDROID__
+			_invalidateShadow = true;
+			((ViewGroup)this).Invalidate();
+#endif
+
 			return base.ArrangeOverride(this.ApplySizeConstraints(finalSize));
 		}
 #endif

src/Uno.UI.Toolkit/UIElementExtensions.cs

@@ -103,7 +103,7 @@ internal static void SetElevationInternal(this DependencyObject element, double
 					// Values for 1dp elevation according to https://material.io/guidelines/resources/shadows.html#shadows-illustrator
 					const float x = 0.28f;
 					const float y = 0.92f * 0.5f; // Looks more accurate than the recommended 0.92f.
-					const float blur = 0.17f;
+					const float blur = 0.18f;
 
 #if __MACOS__
 					view.WantsLayer = true;
@@ -152,7 +152,7 @@ internal static void SetElevationInternal(this DependencyObject element, double
 				var visual = uiElement.Visual;
 				const float x = 0.28f;
 				const float y = 0.92f * 0.5f;
-				const float blur = 0.17f;
+				const float blur = 0.18f;
 
 				var dx = (float)elevation * x;
 				var dy = (float)elevation * y;