fix(mobile): fit the Android splash icon to its circular mask (#10620)

Julius Marminge committed 2 months ago

Commit 892de471 parent d081ab76 files · +91 −24Browse files

Unified · Split

6 files

apps/mobile/app.config.ts +12 −0
apps/mobile/assets/android-splash-icon-dev.png +0 −0
apps/mobile/assets/android-splash-icon-nightly.png +0 −0
apps/mobile/assets/android-splash-icon-prod.png +0 −0
assets/README.md +7 −5
scripts/export-android-icons.ts +75 −22

apps/mobile/app.config.ts+12−0

   androidAdaptiveForeground,
   androidAdaptiveBackgroundColor: "#347FF8",
   androidAdaptiveBackgroundImage: "./assets/android-icon-background-dev.png",
+  androidSplashIcon: "./assets/android-splash-icon-dev.png",
   androidMonochromeIcon: "./assets/android-icon-mark.png",
   androidNotificationIcon: "./assets/android-notification-icon.png",
   androidNotificationColor: "#00639B",
   androidAdaptiveForeground,
   androidAdaptiveBackgroundColor: "#111533",
   androidAdaptiveBackgroundImage: "./assets/android-icon-background-nightly.png",
+  androidSplashIcon: "./assets/android-splash-icon-nightly.png",
   androidMonochromeIcon: "./assets/android-icon-mark.png",
   androidNotificationIcon: "./assets/android-notification-icon.png",
   androidNotificationColor: "#7565C7",
   androidAdaptiveForeground,
   androidAdaptiveBackgroundColor: "#000000",
   androidAdaptiveBackgroundImage: undefined,
+  androidSplashIcon: "./assets/android-splash-icon-prod.png",
   androidMonochromeIcon: "./assets/android-icon-mark.png",
   androidNotificationIcon: "./assets/android-notification-icon.png",
   androidNotificationColor: "#FFFFFF",
           image: variant.assets.splashIcon,
           backgroundColor: "#0a0a0a",
         },
+        android: {
+          // Android 12+ masks the splash icon to a circle over the central two thirds of
+          // its 288dp canvas, so the iOS export's corners get cut. A full-canvas image of
+          // the composed adaptive layers puts the wordmark in the same frame the launcher
+          // icon uses.
+          image: variant.assets.androidSplashIcon,
+          imageWidth: 288,
+          dark: { image: variant.assets.androidSplashIcon },
+        },
       },
     ],
     [

apps/mobile/assets/android-splash-icon-dev.png+0−0

Binary file not shown.

apps/mobile/assets/android-splash-icon-nightly.png+0−0

Binary file not shown.

apps/mobile/assets/android-splash-icon-prod.png+0−0

Binary file not shown.

assets/README.md+7−5

@@ -49,17 +49,19 @@ Verify every result is 1024×1024 and has the classic macOS safe area: an 824×8 · 48 unmodified lines
49		49
50	Do not edit the generated PNG or ICO files directly.	50	Do not edit the generated PNG or ICO files directly.
51		51
52	## Android adaptive icon layers	52	## Android launcher and splash artwork
53		53
54	Android masks the central 72dp of a 108dp adaptive canvas, so the Icon Composer exports cannot be	54	Android masks the central 72dp of a 108dp adaptive canvas, and the Android 12+ splash screen masks
55	used directly: their rounded-square silhouette gets framed again and the wordmark is cropped. The	55	the central two thirds of a 288dp canvas, so the Icon Composer exports cannot be used directly:
56	Android layers are instead rendered from the same Icon Composer SVG sources by	56	their rounded-square silhouette gets framed again and the wordmark is cropped. The Android artwork
57	`vp run icons:export:android`:	57	is instead rendered from the same Icon Composer SVG sources by `vp run icons:export:android`:
58		58
59	- `apps/mobile/assets/android-icon-foreground.png`: the shared transparent wordmark, sized to stay	59	- `apps/mobile/assets/android-icon-foreground.png`: the shared transparent wordmark, sized to stay
60	inside the safe zone	60	inside the safe zone
61	- `apps/mobile/assets/android-icon-background-dev.png` and `-nightly.png`: full-bleed variant	61	- `apps/mobile/assets/android-icon-background-dev.png` and `-nightly.png`: full-bleed variant
62	artwork (blueprint grid and annotations; night sky and clouds). Production uses a solid color.	62	artwork (blueprint grid and annotations; night sky and clouds). Production uses a solid color.
		63	- `apps/mobile/assets/android-splash-icon-*.png`: the two layers composed into one 288dp image, so
		64	the splash mask reproduces the launcher icon's framing.
63		65
64	Rerun the export after changing a layer SVG. `android-icon-mark.png` remains a flat silhouette for	66	Rerun the export after changing a layer SVG. `android-icon-mark.png` remains a flat silhouette for
65	Android's monochrome themed icon.	67	Android's monochrome themed icon.

scripts/export-android-icons.ts+75−22

 #!/usr/bin/env node
-// Renders the Android adaptive-icon layers from the Icon Composer SVG sources.
+// Renders the Android launcher and splash artwork from the Icon Composer SVG sources.
 //
 // Icon Composer exports already contain a rounded-square silhouette, and Android masks
 // the central 72dp of a 108dp adaptive canvas, so exporting them as a foreground produces
 // a double-framed icon with the letters cropped by the mask. Instead, each variant gets a
 // full-bleed background layer (the artwork behind the wordmark) and a shared transparent
 // foreground that keeps the wordmark inside the safe zone.
+//
+// The Android 12+ splash screen masks its icon to a circle covering the central two thirds
+// of a 288dp canvas, which is the same proportion the launcher crops. Composing the two
+// adaptive layers into one 288dp image therefore makes the splash frame the wordmark
+// exactly like the launcher icon does.
 import * as NodeRuntime from "@effect/platform-node/NodeRuntime";
 import * as NodeServices from "@effect/platform-node/NodeServices";
 type IconVariant = "dev" | "nightly" | "prod";
-// 108dp at xxxhdpi. Expo's prebuild derives every density bucket from this.
+// 108dp at xxxhdpi. Expo's prebuild derives every launcher density bucket from this.
-const CANVAS = 432;
+const ADAPTIVE_CANVAS = 432;
+// 288dp at xxxhdpi: the full Android 12+ splash canvas, so the icon needs no upscaling.
+const SPLASH_CANVAS = 1152;
 // Icon Composer's layer sources use a 128pt viewBox; the wordmark path spans this box.
 const TEXT = { x: 15.53, y: 37, width: 94.5, height: 57 };
 // Wordmark width as a fraction of the 108dp canvas. The visible area is 72dp (66dp
 const COMPOSER_CANVAS_PT = 1024;
 const SVG_DENSITY = 300;
 const OUTPUT_DIRECTORY = "apps/mobile/assets";
+// Production has no background artwork, so its splash composes onto the adaptive color.
+const PRODUCTION_BACKGROUND_COLOR = "#000000";
 export class AndroidIconRenderError extends Schema.TaggedErrorClass<AndroidIconRenderError>()(
   "AndroidIconRenderError",
   { layer: Schema.String, cause: Schema.Defect() },
 ) {}
-const wordmarkTransform = () => {
+const wordmarkTransform = (size: number) => {
-  const scale = (CANVAS * WORDMARK_FRACTION) / TEXT.width;
+  const scale = (size * WORDMARK_FRACTION) / TEXT.width;
-  const tx = (CANVAS - TEXT.width * scale) / 2 - TEXT.x * scale;
+  const tx = (size - TEXT.width * scale) / 2 - TEXT.x * scale;
-  const ty = (CANVAS - TEXT.height * scale) / 2 - TEXT.y * scale;
+  const ty = (size - TEXT.height * scale) / 2 - TEXT.y * scale;
   return `translate(${tx.toFixed(3)} ${ty.toFixed(3)}) scale(${scale.toFixed(4)})`;
 };
-const canvasSvg = (inner: string) =>
+const canvasSvg = (size: number, inner: string) =>
-  `<svg xmlns="http://www.w3.org/2000/svg" width="${CANVAS}" height="${CANVAS}" viewBox="0 0 ${CANVAS} ${CANVAS}" fill="none">${inner}</svg>`;
+  `<svg xmlns="http://www.w3.org/2000/svg" width="${size}" height="${size}" viewBox="0 0 ${size} ${size}" fill="none">${inner}</svg>`;
 // The layer sources clip to a 10pt rounded rectangle for the iOS silhouette. Android
 // applies its own mask, so the layer must bleed to the canvas edge.
     catch: (cause) => new AndroidIconRenderError({ layer, cause }),
   });
+const solidCanvas = (layer: string, size: number, background: string) =>
+  Effect.tryPromise({
+    try: () =>
+      sharp({ create: { width: size, height: size, channels: 4, background } })
+        .png()
+        .toBuffer(),
+    catch: (cause) => new AndroidIconRenderError({ layer, cause }),
+  });
 const readLayerSource = Effect.fn("androidIcons.readLayerSource")(function* (
   repositoryRoot: string,
   variant: IconVariant,
 const renderForeground = Effect.fn("androidIcons.renderForeground")(function* (
   repositoryRoot: string,
+  size: number,
 ) {
   const text = yield* readLayerSource(repositoryRoot, "prod", "text.svg");
   const paths = text.match(/<path[^>]*\/>/g) ?? [];
   return yield* rasterize(
     "foreground",
-    canvasSvg(`<g transform="${wordmarkTransform()}">${paths.join("")}</g>`),
+    canvasSvg(size, `<g transform="${wordmarkTransform(size)}">${paths.join("")}</g>`),
-    CANVAS,
+    size,
   );
 });
 const renderDevelopmentBackground = Effect.fn("androidIcons.renderDevelopmentBackground")(
-  function* (repositoryRoot: string) {
+  function* (repositoryRoot: string, size: number) {
     // The annotation layer shares the wordmark's coordinate space, so it is scaled and
     // centered the same way to keep the dimension lines around the letters.
     const annotations = yield* readLayerSource(repositoryRoot, "dev", "annotations.svg");
     const defs = annotations.match(/<defs>[\s\S]*?<\/defs>/)?.[0] ?? "";
     const body = annotations.replace(/^[\s\S]*?<\/defs>/, "").replace(/<\/svg>\s*$/, "");
     const paper = yield* readLayerSource(repositoryRoot, "dev", "background.svg");
-    const background = yield* rasterize("dev-background", fullBleed(paper), CANVAS);
+    const background = yield* rasterize("dev-background", fullBleed(paper), size);
     const overlay = yield* rasterize(
       "dev-annotations",
-      canvasSvg(`${defs}<g transform="${wordmarkTransform()}">${body}</g>`),
+      canvasSvg(size, `${defs}<g transform="${wordmarkTransform(size)}">${body}</g>`),
-      CANVAS,
+      size,
     );
     return yield* composite("dev-background", background, [{ input: overlay }]);
   },
 const renderNightlyBackground = Effect.fn("androidIcons.renderNightlyBackground")(function* (
   repositoryRoot: string,
+  size: number,
 ) {
   // Positions mirror assets/nightly/app-icon.icon/icon.json. The SVG blur filter is
   // dropped because Icon Composer ignores it and it smears at this raster size.
       translation: [387.9605131881942, -134.30064713259117],
     },
   ] as const;
-  const k = CANVAS / COMPOSER_CANVAS_PT;
+  const k = size / COMPOSER_CANVAS_PT;
   const overlays = yield* Effect.forEach(clouds, (cloud) =>
     Effect.gen(function* () {
       const width = Math.round(64 * cloud.scale * k);
       );
       const x0 = Math.max(0, left);
       const y0 = Math.max(0, top);
-      const x1 = Math.min(CANVAS, left + width);
+      const x1 = Math.min(size, left + width);
-      const y1 = Math.min(CANVAS, top + height);
+      const y1 = Math.min(size, top + height);
       const clipped = yield* Effect.tryPromise({
         try: () =>
           sharp(png)
     }),
   );
   const sky = yield* readLayerSource(repositoryRoot, "nightly", "background.svg");
-  const background = yield* rasterize("nightly-background", fullBleed(sky), CANVAS);
+  const background = yield* rasterize("nightly-background", fullBleed(sky), size);
   return yield* composite("nightly-background", background, overlays);
 });
+const renderBackground = Effect.fn("androidIcons.renderBackground")(function* (
+  repositoryRoot: string,
+  variant: IconVariant,
+  size: number,
+) {
+  switch (variant) {
+    case "dev":
+      return yield* renderDevelopmentBackground(repositoryRoot, size);
+    case "nightly":
+      return yield* renderNightlyBackground(repositoryRoot, size);
+    case "prod":
+      return yield* solidCanvas("prod-background", size, PRODUCTION_BACKGROUND_COLOR);
+  }
+});
+const renderSplashIcon = Effect.fn("androidIcons.renderSplashIcon")(function* (
+  repositoryRoot: string,
+  variant: IconVariant,
+) {
+  const background = yield* renderBackground(repositoryRoot, variant, SPLASH_CANVAS);
+  const foreground = yield* renderForeground(repositoryRoot, SPLASH_CANVAS);
+  return yield* composite(`${variant}-splash`, background, [{ input: foreground }]);
+});
 const exportAndroidIcons = Effect.gen(function* () {
   const fs = yield* FileSystem.FileSystem;
   const path = yield* Path.Path;
   const repositoryRoot = path.resolve(import.meta.dirname, "..");
   const outputs = [
-    ["android-icon-foreground.png", yield* renderForeground(repositoryRoot)],
+    ["android-icon-foreground.png", yield* renderForeground(repositoryRoot, ADAPTIVE_CANVAS)],
-    ["android-icon-background-dev.png", yield* renderDevelopmentBackground(repositoryRoot)],
+    [
-    ["android-icon-background-nightly.png", yield* renderNightlyBackground(repositoryRoot)],
+      "android-icon-background-dev.png",
+      yield* renderDevelopmentBackground(repositoryRoot, ADAPTIVE_CANVAS),
+    ],
+    [
+      "android-icon-background-nightly.png",
+      yield* renderNightlyBackground(repositoryRoot, ADAPTIVE_CANVAS),
+    ],
+    ["android-splash-icon-dev.png", yield* renderSplashIcon(repositoryRoot, "dev")],
+    ["android-splash-icon-nightly.png", yield* renderSplashIcon(repositoryRoot, "nightly")],
+    ["android-splash-icon-prod.png", yield* renderSplashIcon(repositoryRoot, "prod")],
   ] as const;
   for (const [name, contents] of outputs) {
     yield* fs.writeFile(path.join(repositoryRoot, OUTPUT_DIRECTORY, name), contents);