Update all Basic samples to multi-page layouts with designer support

samples/Basic/Android/README.md

@@ -0,0 +1,81 @@
+# SkiaSharp Android Sample
+
+Demonstrates all SkiaSharp Android view types with Material 3 bottom navigation, dark/light theming, and touch interaction.
+
+## Sample Pages
+
+This sample shows how to integrate SkiaSharp views into an Android app using native XML layouts, AndroidX fragments, and Material 3 theming. Each view type can be placed in a layout file and configured in the Android designer, just like any other Android view.
+
+### CPU
+
+A static scene rendered entirely on the CPU — a radial gradient background overlaid with semi-transparent colored circles and centered "SkiaSharp" text.
+
+**Features:**
+
+- **`SKCanvasView`** — Software-rendered canvas that draws each frame on the CPU, ideal for static or infrequently updated content.
+- **`SKShader`** — Radial gradient background created with `SKShader.CreateRadialGradient`.
+- **`SKCanvas.DrawCircle`** — Semi-transparent colored circles composited over the gradient.
+- **`SKCanvas.DrawText`** — Centered "SkiaSharp" text rendered with measured alignment.
+- **`SKTypeface`** — Custom Noto Sans font loaded from an embedded asset via `SKTypeface.FromStream`.
+
+### GPU (Surface)
+
+A real-time animated shader running at full frame rate on the GPU, with touch interaction that adds a white-hot blob to the metaball field.
+
+**Features:**
+
+- **`SKGLSurfaceView`** — Hardware-accelerated OpenGL ES canvas backed by Android's `SurfaceView`, suitable for full-screen GPU content.
+- **`SKRuntimeEffect`** — SkSL metaball "lava lamp" shader compiled at runtime with `SKRuntimeEffect.BuildShader`.
+- **Render loop** — Continuous animation driven by `Rendermode.Continuously` with an FPS counter overlay.
+- **Touch interaction** — Touch position is passed as a shader uniform, adding a white-hot blob to the metaball field.
+
+### GPU (Texture)
+
+A real-time animated shader running at full frame rate on the GPU, rendered into a `TextureView` that supports transparency, transforms, and compositing within the view hierarchy.
+
+**Features:**
+
+- **`SKGLTextureView`** — Hardware-accelerated OpenGL ES canvas backed by Android's `TextureView`, which supports transparency, transforms, and compositing within the view hierarchy.
+- **`SKRuntimeEffect`** — SkSL metaball "lava lamp" shader compiled at runtime with `SKRuntimeEffect.BuildShader`.
+- **Render loop** — Continuous animation with an FPS counter overlay.
+- **Touch interaction** — Touch position is passed as a shader uniform, adding a white-hot blob to the metaball field.
+
+### Drawing
+
+A freehand drawing canvas with a floating toolbox for choosing colors and brush sizes. Strokes persist across color and size changes.
+
+**Features:**
+
+- **`SKCanvasView`** — Software-rendered canvas used for on-demand drawing, invalidated after each stroke or clear.
+- **`SKPath`** — Freehand strokes captured as paths with `MoveTo` and `LineTo` from touch events.
+- **`SKTouchEventArgs`** — Pointer tracking for press, move, and release across the canvas.
+- **Color palette** — Six selectable colors with dark/light mode variants.
+- **Brush size** — Adjustable stroke width (1–50px) via a Material 3 slider.
+
+## Requirements
+
+- [.NET 8 SDK](https://dotnet.microsoft.com/download) or later
+- Android workload: `dotnet workload install android`
+
+## Running the Sample
+
+Build and deploy to a connected device or emulator:
+
+```bash
+dotnet build -t:Install -f net8.0-android
+```
+
+To start on a different page, change `DefaultPage` in `MainActivity.cs`:
+
+```csharp
+public static SamplePage DefaultPage { get; set; } = SamplePage.GpuSurface;
+```
+
+Available pages: `Cpu` (default), `GpuSurface`, `GpuTexture`, `Drawing`
+
+## Screenshots
+
+| CPU | GPU (Surface) | GPU (Texture) | Drawing |
+|---|---|---|---|
+| <img src="screenshots/cpu-light.png" width="250" alt="CPU Light"> | <img src="screenshots/surface-light.png" width="250" alt="GPU Surface Light"> | <img src="screenshots/texture-light.png" width="250" alt="GPU Texture Light"> | <img src="screenshots/drawing-light.png" width="250" alt="Drawing Light"> |
+| <img src="screenshots/cpu-dark.png" width="250" alt="CPU Dark"> | <img src="screenshots/surface-dark.png" width="250" alt="GPU Surface Dark"> | <img src="screenshots/texture-dark.png" width="250" alt="GPU Texture Dark"> | <img src="screenshots/drawing-dark.png" width="250" alt="Drawing Dark"> |

samples/Basic/Android/SkiaSharpSample/CpuFragment.cs

@@ -0,0 +1,96 @@
+using System;
+using Android.OS;
+using Android.Views;
+using AndroidX.Fragment.App;
+
+using SkiaSharp;
+using SkiaSharp.Views.Android;
+
+namespace SkiaSharpSample;
+
+public class CpuFragment : Fragment
+{
+	static readonly (float X, float Y, float R, SKColor Color)[] circles =
+	{
+		(0.20f, 0.30f, 0.10f, new SKColor(0xFF, 0x4D, 0x66, 0xCC)),
+		(0.75f, 0.25f, 0.08f, new SKColor(0x4D, 0xB3, 0xFF, 0xCC)),
+		(0.15f, 0.70f, 0.07f, new SKColor(0xFF, 0x99, 0x1A, 0xCC)),
+		(0.80f, 0.70f, 0.12f, new SKColor(0x66, 0xFF, 0xB3, 0xCC)),
+		(0.50f, 0.15f, 0.06f, new SKColor(0xB3, 0x4D, 0xFF, 0xCC)),
+		(0.40f, 0.80f, 0.09f, new SKColor(0xFF, 0xE6, 0x33, 0xCC)),
+	};
+
+	static readonly SKColor[] gradientColors =
+	{
+		new SKColor(0x44, 0x88, 0xFF),
+		new SKColor(0x88, 0x33, 0xCC),
+	};
+
+	private SKCanvasView skiaView;
+	private SKTypeface typeface;
+
+	public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
+	{
+		var view = inflater.Inflate(Resource.Layout.fragment_cpu, container, false);
+		skiaView = view.FindViewById<SKCanvasView>(Resource.Id.skiaView);
+		skiaView.PaintSurface += OnPaintSurface;
+
+		using var stream = Context.Assets.Open("Fonts/NotoSans-Regular.ttf");
+		typeface = SKTypeface.FromStream(stream);
+
+		return view;
+	}
+
+	private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
+	{
+		var canvas = e.Surface.Canvas;
+		var width = e.Info.Width;
+		var height = e.Info.Height;
+		var center = new SKPoint(width / 2f, height / 2f);
+		var radius = Math.Max(width, height) / 2f;
+
+		canvas.Clear(SKColors.White);
+
+		// Background gradient
+		using var shader = SKShader.CreateRadialGradient(center, radius, gradientColors, SKShaderTileMode.Clamp);
+		using var bgPaint = new SKPaint
+		{
+			IsAntialias = true,
+			Shader = shader,
+		};
+		canvas.DrawRect(0, 0, width, height, bgPaint);
+
+		// Circles
+		using var circlePaint = new SKPaint
+		{
+			IsAntialias = true,
+			Style = SKPaintStyle.Fill,
+		};
+		foreach (var (x, y, r, color) in circles)
+		{
+			circlePaint.Color = color;
+			canvas.DrawCircle(x * width, y * height, r * Math.Min(width, height), circlePaint);
+		}
+
+		// Centered text
+		using var textPaint = new SKPaint
+		{
+			Color = SKColors.White,
+			IsAntialias = true,
+		};
+		using var font = new SKFont(typeface, width * 0.12f);
+		canvas.DrawText("SkiaSharp", center.X, center.Y + font.Size / 3f, SKTextAlign.Center, font, textPaint);
+	}
+
+	public override void OnDestroyView()
+	{
+		if (skiaView != null)
+		{
+			skiaView.PaintSurface -= OnPaintSurface;
+			skiaView = null;
+		}
+		typeface?.Dispose();
+		typeface = null;
+		base.OnDestroyView();
+	}
+}

samples/Basic/Android/SkiaSharpSample/DrawingFragment.cs

@@ -0,0 +1,201 @@
+using System;
+using System.Collections.Generic;
+using Android.Graphics;
+using Android.Graphics.Drawables;
+using Android.OS;
+using Android.Views;
+using AndroidX.Fragment.App;
+using Google.Android.Material.Button;
+
+using SkiaSharp;
+using SkiaSharp.Views.Android;
+
+namespace SkiaSharpSample;
+
+public class DrawingFragment : Fragment
+{
+	private static readonly int[] SwatchIds = new[]
+	{
+		Resource.Id.colorBlack,
+		Resource.Id.colorRed,
+		Resource.Id.colorBlue,
+		Resource.Id.colorGreen,
+		Resource.Id.colorOrange,
+		Resource.Id.colorPurple,
+	};
+
+	private SKCanvasView skiaView;
+	private View selectedSwatch;
+	private Google.Android.Material.Slider.Slider brushSlider;
+	private readonly List<(SKPath Path, SKColor Color, float StrokeWidth)> strokes = new();
+	private SKPath currentPath;
+	private SKColor currentColor = SKColors.Black;
+	private SKColor canvasBackground = SKColors.White;
+
+	private float BrushSize => brushSlider?.Value ?? 4f;
+
+	public override View OnCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState)
+	{
+		var view = inflater.Inflate(Resource.Layout.fragment_drawing, container, false);
+
+		// Resolve theme surface color for canvas background
+		var typedValue = new Android.Util.TypedValue();
+		if (Context.Theme.ResolveAttribute(Resource.Attribute.colorSurface, typedValue, true))
+		{
+			var c = new Color(typedValue.Data);
+			canvasBackground = new SKColor((byte)c.R, (byte)c.G, (byte)c.B, (byte)c.A);
+		}
+
+		// Resolve theme onSurface color as default drawing color
+		if (Context.Theme.ResolveAttribute(Resource.Attribute.colorOnSurface, typedValue, true))
+		{
+			var c = new Color(typedValue.Data);
+			currentColor = new SKColor((byte)c.R, (byte)c.G, (byte)c.B, (byte)c.A);
+		}
+
+		skiaView = view.FindViewById<SKCanvasView>(Resource.Id.skiaView);
+		skiaView.PaintSurface += OnPaintSurface;
+		skiaView.Touch += OnTouch;
+
+		// Wire up color swatches — resolve SKColor from each swatch's background
+		foreach (var viewId in SwatchIds)
+		{
+			var swatch = view.FindViewById<View>(viewId);
+			SKColor bgColor = SKColors.Black;
+			if (OperatingSystem.IsAndroidVersionAtLeast(24)
+				&& swatch.Background is GradientDrawable gd && gd.Color != null)
+			{
+				var c = new Color(gd.Color.DefaultColor);
+				bgColor = new SKColor((byte)c.R, (byte)c.G, (byte)c.B);
+			}
+			else if (swatch.Background is ColorDrawable cd)
+			{
+				bgColor = new SKColor((byte)cd.Color.R, (byte)cd.Color.G, (byte)cd.Color.B);
+			}
+			var captured = bgColor;
+			swatch.Click += (s, e) =>
+			{
+				currentColor = captured;
+				SetSelectedSwatch(swatch);
+			};
+		}
+
+		// Select first swatch by default
+		selectedSwatch = view.FindViewById<View>(Resource.Id.colorBlack);
+		SetSelectedSwatch(selectedSwatch);
+
+		// Brush size slider
+		brushSlider = view.FindViewById<Google.Android.Material.Slider.Slider>(Resource.Id.brushSlider);
+
+		// Clear button
+		var clearBtn = view.FindViewById<MaterialButton>(Resource.Id.btnClear);
+		clearBtn.Click += (s, e) =>
+		{
+			foreach (var (path, _, _) in strokes)
+				path.Dispose();
+			strokes.Clear();
+			currentPath?.Dispose();
+			currentPath = null;
+			skiaView?.Invalidate();
+		};
+
+		return view;
+	}
+
+	private void SetSelectedSwatch(View swatch)
+	{
+		// Reset previous selection
+		if (selectedSwatch != null)
+		{
+			selectedSwatch.ScaleX = 1.0f;
+			selectedSwatch.ScaleY = 1.0f;
+			selectedSwatch.Elevation = 0;
+		}
+
+		// Highlight selected with scale and elevation
+		swatch.ScaleX = 1.3f;
+		swatch.ScaleY = 1.3f;
+		swatch.Elevation = 8;
+		selectedSwatch = swatch;
+	}
+
+	private void OnPaintSurface(object sender, SKPaintSurfaceEventArgs e)
+	{
+		var canvas = e.Surface.Canvas;
+		canvas.Clear(canvasBackground);
+
+		if (skiaView.Width <= 0 || skiaView.Height <= 0)
+			return;
+
+		using var paint = new SKPaint
+		{
+			IsAntialias = true,
+			Style = SKPaintStyle.Stroke,
+			StrokeCap = SKStrokeCap.Round,
+			StrokeJoin = SKStrokeJoin.Round,
+		};
+
+		float sx = (float)e.Info.Width / skiaView.Width;
+		float sy = (float)e.Info.Height / skiaView.Height;
+		canvas.Scale(sx, sy);
+
+		foreach (var (path, color, strokeWidth) in strokes)
+		{
+			paint.Color = color;
+			paint.StrokeWidth = strokeWidth;
+			canvas.DrawPath(path, paint);
+		}
+
+		if (currentPath != null)
+		{
+			paint.Color = currentColor;
+			paint.StrokeWidth = BrushSize;
+			canvas.DrawPath(currentPath, paint);
+		}
+	}
+
+	private void OnTouch(object sender, View.TouchEventArgs e)
+	{
+		var x = e.Event.GetX();
+		var y = e.Event.GetY();
+
+		switch (e.Event.Action)
+		{
+			case MotionEventActions.Down:
+				currentPath = new SKPath();
+				currentPath.MoveTo(x, y);
+				skiaView.Invalidate();
+				break;
+			case MotionEventActions.Move:
+				currentPath?.LineTo(x, y);
+				skiaView.Invalidate();
+				break;
+			case MotionEventActions.Up:
+			case MotionEventActions.Cancel:
+				if (currentPath != null)
+				{
+					strokes.Add((currentPath, currentColor, BrushSize));
+					currentPath = null;
+					skiaView.Invalidate();
+				}
+				break;
+		}
+		e.Handled = true;
+	}
+
+	public override void OnDestroyView()
+	{
+		if (skiaView != null)
+		{
+			skiaView.PaintSurface -= OnPaintSurface;
+			skiaView.Touch -= OnTouch;
+			skiaView = null;
+		}
+		foreach (var (path, _, _) in strokes)
+			path.Dispose();
+		strokes.Clear();
+		currentPath?.Dispose();
+		currentPath = null;
+		base.OnDestroyView();
+	}
+}