Add monochrome XML item

GoogleChromeLabs · Feb 11, 2022 · 127513b · 127513b
1 parent 8979edc
commit 127513b
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 16 deletions.
diff --git a/packages/core/src/lib/TwaGenerator.ts b/packages/core/src/lib/TwaGenerator.ts
@@ -38,14 +38,14 @@ const COPY_FILE_LIST = [
   'app/src/main/res/values/colors.xml',
   'app/src/main/res/xml/filepaths.xml',
   'app/src/main/res/xml/shortcuts.xml',
-  'app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml',
   'app/src/main/res/drawable-anydpi/shortcut_legacy_background.xml',
 ];
 
 const TEMPLATE_FILE_LIST = [
   'app/build.gradle',
   'app/src/main/AndroidManifest.xml',
   'app/src/main/res/values/strings.xml',
+  'app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml',
 ];
 
 const JAVA_DIR = 'app/src/main/java/';
@@ -71,6 +71,20 @@ const DELETE_FILE_LIST = [
   'app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml',
 ];
 
+function scaledIconDefinitions(
+    folder: string,
+    filename: string,
+    mdpiSize: number,
+): IconDefinition[] {
+  return [
+    {dest: `app/src/main/res/${folder}-mdpi/${filename}`, size: mdpiSize},
+    {dest: `app/src/main/res/${folder}-hdpi/${filename}`, size: mdpiSize * 1.5},
+    {dest: `app/src/main/res/${folder}-xhdpi/${filename}`, size: mdpiSize * 2},
+    {dest: `app/src/main/res/${folder}-xxhdpi/${filename}`, size: mdpiSize * 3},
+    {dest: `app/src/main/res/${folder}-xxxhdpi/${filename}`, size: mdpiSize * 4},
+  ];
+}
+
 const SPLASH_IMAGES: IconDefinition[] = scaledIconDefinitions('drawable', 'splash.png', 300);
 
 const IMAGES: IconDefinition[] = [
@@ -80,7 +94,10 @@ const IMAGES: IconDefinition[] = [
 
 const ADAPTIVE_IMAGES: IconDefinition[] = scaledIconDefinitions('mipmap', 'ic_maskable.png', 82);
 
-const NOTIFICATION_IMAGES: IconDefinition[] = scaledIconDefinitions('drawable', 'ic_notification_icon.png', 24);
+const THEMED_IMAGES: IconDefinition[] = scaledIconDefinitions('mipmap', 'ic_monochrome.png', 82);
+
+const NOTIFICATION_IMAGES: IconDefinition[] =
+    scaledIconDefinitions('drawable', 'ic_notification_icon.png', 24);
 
 const WEB_MANIFEST_LOCATION = '/app/src/main/res/raw/';
 const WEB_MANIFEST_FILE_NAME = 'web_app_manifest.json';
@@ -90,16 +107,6 @@ type ShareTargetIntentFilter = {
   mimeTypes: string[];
 };
 
-function scaledIconDefinitions(folder: string, filename: string, mdpiSize: number): IconDefinition[] {
-  return [
-    {dest: `app/src/main/res/${folder}-mdpi/${filename}`, size: mdpiSize},
-    {dest: `app/src/main/res/${folder}-hdpi/${filename}`, size: mdpiSize * 1.5},
-    {dest: `app/src/main/res/${folder}-xhdpi/${filename}`, size: mdpiSize * 2},
-    {dest: `app/src/main/res/${folder}-xxhdpi/${filename}`, size: mdpiSize * 3},
-    {dest: `app/src/main/res/${folder}-xxxhdpi/${filename}`, size: mdpiSize * 4},
-  ];
-}
-
 function shortcutMaskableTemplateFileMap(assetName: string): Record<string, string> {
   return {
     'app/src/main/res/drawable-anydpi-v26/shortcut_maskable.xml':
@@ -354,7 +361,7 @@ export class TwaGenerator {
   async createTwaProject(targetDirectory: string, twaManifest: TwaManifest, log: Log,
       reportProgress: twaGeneratorProgress = noOpProgress): Promise<void> {
     const features = new FeatureManager(twaManifest, log);
-    const progress = new Progress(9, reportProgress);
+    const progress = new Progress(10, reportProgress);
     const error = twaManifest.validate();
     if (error !== null) {
       throw new Error(`Invalid TWA Manifest: ${error}`);
@@ -363,8 +370,12 @@ export class TwaGenerator {
     const templateDirectory = path.join(__dirname, '../../template_project');
 
     const copyFileList = new Set(COPY_FILE_LIST);
+    const templateFileList = new Set(TEMPLATE_FILE_LIST);
     if (!twaManifest.maskableIconUrl) {
-      DELETE_FILE_LIST.forEach((file) => copyFileList.delete(file));
+      DELETE_FILE_LIST.forEach((file) => {
+        copyFileList.delete(file);
+        templateFileList.delete(file);
+      });
     }
     progress.update();
 
@@ -389,7 +400,7 @@ export class TwaGenerator {
 
     // Generate templated files
     await this.applyTemplateList(
-        templateDirectory, targetDirectory, TEMPLATE_FILE_LIST, args);
+        templateDirectory, targetDirectory, Array.from(templateFileList), args);
     progress.update();
 
     // Generate java files
@@ -414,6 +425,12 @@ export class TwaGenerator {
     }
     progress.update();
 
+    // Generate themed images
+    if (twaManifest.monochromeIconUrl) {
+      await this.generateIcons(twaManifest.monochromeIconUrl, targetDirectory, THEMED_IMAGES);
+    }
+    progress.update();
+
     // Generate notification images
     const iconOrMonochromeIconUrl = twaManifest.monochromeIconUrl || twaManifest.iconUrl;
     if (twaManifest.enableNotifications && iconOrMonochromeIconUrl) {

diff --git a/packages/core/template_project/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml b/packages/core/template_project/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml
@@ -18,7 +18,7 @@
     <background>
         <layer-list>
             <item android:drawable="@android:color/white" />
-            <!-- 
+            <!--
                 The paddings below give the icons a similar proportion as the
                 icon generated by WebAPKs.
             -->
@@ -30,4 +30,13 @@
         </layer-list>
     </background>
     <foreground android:drawable="@android:color/transparent" />
+    <% if (monochromeIconUrl) { %>
+    <monochrome>
+        <inset android:drawable="@mipmap/ic_monochrome"
+            android:insetLeft="30%"
+            android:insetTop="30%"
+            android:insetRight="30%"
+            android:insetBottom="30%" />
+    </monochrome>
+    <% } %>
 </adaptive-icon>