[pve-devel] [PATCH futter_frontend 1/2] fix android splash screen logo

Aaron Lauterer a.lauterer at proxmox.com
Mon Dec 20 16:38:38 CET 2021


The new splash screen that came with Android 12 has stricter rules
regarding the size and form of the logo in the splash screen [0].

We do need to have a drawable that is a square with the logo / icon in
the center. That means the current approach with the png image resulted
in it being scaled to the full width and the circular mask cut if off.
The result was a broken looking splash screen.

I opted for the stacked variant of the logo and saved it as a vector
drawable in the xml format that android wants.

[0] https://developer.android.com/guide/topics/ui/splash-screen

Signed-off-by: Aaron Lauterer <a.lauterer at proxmox.com>
---
 .../main/res/drawable/proxmox_splash_logo.xml | 69 +++++++++++++++++++
 .../app/src/main/res/values-night/styles.xml  |  2 +-
 android/app/src/main/res/values/styles.xml    |  2 +-
 3 files changed, 71 insertions(+), 2 deletions(-)
 create mode 100644 android/app/src/main/res/drawable/proxmox_splash_logo.xml

diff --git a/android/app/src/main/res/drawable/proxmox_splash_logo.xml b/android/app/src/main/res/drawable/proxmox_splash_logo.xml
new file mode 100644
index 0000000..7bf4f6b
--- /dev/null
+++ b/android/app/src/main/res/drawable/proxmox_splash_logo.xml
@@ -0,0 +1,69 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="108dp"
+    android:height="108dp"
+    android:viewportWidth="28.574999"
+    android:viewportHeight="28.575">
+  <group>
+    <clip-path
+        android:pathData="M15.2415,4.9491l-4.7537,4.3921l3.7999,2.999l4.7537,-4.3921z"/>
+    <path
+        android:pathData="M14.2876,12.3402 L11.461,9.2317C11.5707,9.122 11.6984,9.0359 11.8442,8.9732 11.99,8.9106 12.1466,8.8787 12.3141,8.8774 12.4919,8.8788 12.6549,8.9141 12.8029,8.9832 12.951,9.0523 13.0796,9.1472 13.1888,9.2678L14.2876,10.4678 15.3792,9.2678C15.4923,9.1472 15.6239,9.0523 15.774,8.9832 15.9242,8.9141 16.0865,8.8788 16.2611,8.8774 16.4286,8.8787 16.5852,8.9106 16.731,8.9732 16.8768,9.0359 17.0045,9.122 17.1141,9.2317L14.2875,12.3401"
+        android:strokeWidth="0.0014572581"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"/>
+  </group>
+  <group>
+    <clip-path
+        android:pathData="M13.3336,20.2069l4.7537,-4.3921l-3.7999,-2.999l-4.7537,4.3921z"/>
+    <path
+        android:pathData="M14.2875,12.8158 L17.114,15.9244C17.0044,16.034 16.8767,16.1201 16.7309,16.1828 16.5851,16.2454 16.4285,16.2774 16.261,16.2786 16.0831,16.2772 15.9202,16.242 15.7721,16.1729 15.6241,16.1037 15.4955,16.0088 15.3863,15.8882L14.2875,14.6882 13.1959,15.8882C13.0828,16.0088 12.9512,16.1037 12.801,16.1729 12.6509,16.242 12.4885,16.2772 12.314,16.2786 12.1465,16.2774 11.9899,16.2454 11.8441,16.1828 11.6983,16.1201 11.5706,16.034 11.461,15.9244L14.2876,12.8159"
+        android:strokeWidth="0.0014572581"
+        android:fillColor="#ffffff"
+        android:strokeColor="#00000000"/>
+  </group>
+  <path
+      android:pathData="m14.0498,12.5781l0,0l-2.1291,-2.3349c-0.1238,-0.1321 -0.268,-0.236 -0.4324,-0.3117 -0.1644,-0.0757 -0.3422,-0.1143 -0.5333,-0.1158 -0.1834,0.0013 -0.3549,0.0363 -0.5145,0.1049 -0.1596,0.0686 -0.2995,0.1629 -0.4195,0.283l2.1608,2.3745 -2.1608,2.3745c0.12,0.1238 0.2599,0.2205 0.4195,0.2899 0.1596,0.0694 0.3311,0.1047 0.5145,0.1059 0.1916,-0.0015 0.3704,-0.0401 0.5362,-0.1158 0.1659,-0.0757 0.309,-0.1796 0.4294,-0.3117l2.1291,-2.3429"
+      android:strokeWidth="0.0014602973"
+      android:fillColor="#e57000"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="m14.5252,12.5781l0,0l2.1291,-2.3349c0.1238,-0.1321 0.268,-0.236 0.4324,-0.3117 0.1644,-0.0757 0.3422,-0.1143 0.5333,-0.1158 0.1834,0.0013 0.3549,0.0363 0.5145,0.1049 0.1596,0.0686 0.2995,0.1629 0.4195,0.283l-2.1608,2.3745 2.1608,2.3745c-0.12,0.1238 -0.2599,0.2205 -0.4195,0.2899 -0.1596,0.0694 -0.3311,0.1047 -0.5145,0.1059 -0.1916,-0.0015 -0.3704,-0.0401 -0.5362,-0.1158 -0.1659,-0.0757 -0.309,-0.1796 -0.4294,-0.3117l-2.1291,-2.3429"
+      android:strokeWidth="0.0014602973"
+      android:fillColor="#e57100"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="m8.752,18.0793l-1.0611,0c-0.0417,0.0012 -0.0768,0.0162 -0.1055,0.0451 -0.0287,0.0289 -0.0436,0.0647 -0.0448,0.1075l0,1.4657c0.1139,-0.0028 0.2086,-0.0422 0.2844,-0.1182 0.0757,-0.076 0.115,-0.1714 0.1179,-0.2864l0.8092,0c0.1151,-0.0028 0.2109,-0.0422 0.2875,-0.1182 0.0766,-0.076 0.1164,-0.1714 0.1193,-0.2864l0,-0.4023c-0.0029,-0.1151 -0.0427,-0.2109 -0.1193,-0.2875 -0.0766,-0.0766 -0.1725,-0.1164 -0.2875,-0.1193zM7.9429,18.9393l0,-0.4531l0.7097,0c0.0041,-0.0021 0.0207,0.0021 0.0497,0.0124 0.029,0.0104 0.0456,0.0394 0.0497,0.087l0,0.252c0.0021,0.0042 -0.0021,0.0212 -0.0124,0.0509 -0.0104,0.0297 -0.0394,0.0466 -0.087,0.0509z"
+      android:strokeWidth="0.008793501"
+      android:fillColor="#ffffff"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="m11.0079,18.789l0,-0.3029c-0.0028,-0.1151 -0.0422,-0.2109 -0.1182,-0.2875 -0.076,-0.0766 -0.1714,-0.1164 -0.2864,-0.1193l-1.0611,0c-0.0427,0.0012 -0.0781,0.0162 -0.1063,0.0451 -0.0282,0.0289 -0.0429,0.0647 -0.0439,0.1075l0,1.4657c0.114,-0.0028 0.2091,-0.0422 0.2855,-0.1182 0.0764,-0.076 0.1161,-0.1714 0.1191,-0.2864l0,-0.1017l0.4601,0l0.2335,0.3329c0.0375,0.0538 0.0845,0.0959 0.141,0.1266 0.0565,0.0306 0.1197,0.0462 0.1896,0.0468 0.0337,-0 0.0663,-0.004 0.098,-0.0118 0.0316,-0.0078 0.0614,-0.0193 0.0893,-0.0344l-0.326,-0.4647c0.0945,-0.0205 0.1719,-0.0668 0.2323,-0.139 0.0604,-0.0722 0.0916,-0.1584 0.0936,-0.2586zM9.7965,18.8376l0,-0.3514l0.7051,0c0.0042,-0.0021 0.0212,0.0021 0.0509,0.0124 0.0297,0.0104 0.0466,0.0394 0.0509,0.087l0,0.1526c0.0021,0.0041 -0.0021,0.0207 -0.0127,0.0497 -0.0106,0.029 -0.0403,0.0456 -0.089,0.0497z"
+      android:strokeWidth="0.008793501"
+      android:fillColor="#ffffff"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="m12.4502,18.0793l-0.8068,0c-0.115,0.0029 -0.2104,0.0427 -0.2864,0.1193 -0.076,0.0766 -0.1154,0.1725 -0.1182,0.2875l0,0.8068c0.0028,0.115 0.0422,0.2104 0.1182,0.2864 0.076,0.076 0.1714,0.1154 0.2864,0.1182l0.8068,0c0.115,-0.0028 0.2104,-0.0422 0.2864,-0.1182 0.076,-0.076 0.1154,-0.1714 0.1182,-0.2864l0,-0.8068c-0.0028,-0.1151 -0.0422,-0.2109 -0.1182,-0.2875 -0.076,-0.0766 -0.1714,-0.1164 -0.2864,-0.1193zM12.4502,19.1913c0.0021,0.0042 -0.0021,0.0212 -0.0127,0.0509 -0.0106,0.0297 -0.0403,0.0466 -0.089,0.0509l-0.6034,0c-0.0042,0.0021 -0.0212,-0.0021 -0.0509,-0.0127 -0.0297,-0.0106 -0.0466,-0.0403 -0.0509,-0.089l0,-0.6057c-0.0021,-0.0041 0.0021,-0.0207 0.0127,-0.0497 0.0106,-0.029 0.0403,-0.0456 0.089,-0.0497l0.6034,0c0.0042,-0.0021 0.0212,0.0021 0.0509,0.0124 0.0297,0.0104 0.0466,0.0394 0.0509,0.087z"
+      android:strokeWidth="0.008793501"
+      android:fillColor="#ffffff"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="m14.8934,18.1949c-0.0351,-0.0351 -0.0759,-0.0626 -0.1225,-0.0826 -0.0466,-0.02 -0.0967,-0.0302 -0.1503,-0.0306 -0.057,0.0004 -0.1095,0.0117 -0.1575,0.0338 -0.048,0.0221 -0.0895,0.0525 -0.1246,0.091l-0.3491,0.3838 -0.3514,-0.3838c-0.0359,-0.0396 -0.0774,-0.0702 -0.1243,-0.0919 -0.0469,-0.0217 -0.0987,-0.0327 -0.1555,-0.0329 -0.0536,0.0004 -0.1036,0.0106 -0.1503,0.0306 -0.0466,0.02 -0.0875,0.0476 -0.1225,0.0826l0.6311,0.6936 -0.6311,0.6936c0.0351,0.0362 0.0759,0.0644 0.1225,0.0847 0.0466,0.0203 0.0967,0.0306 0.1503,0.0309 0.056,-0.0004 0.1082,-0.0117 0.1566,-0.0338 0.0485,-0.0221 0.0903,-0.0525 0.1254,-0.091l0.3491,-0.3838 0.3491,0.3838c0.035,0.0386 0.0765,0.0689 0.1246,0.091 0.048,0.0221 0.1005,0.0334 0.1575,0.0338 0.0536,-0.0004 0.1036,-0.0106 0.1503,-0.0309 0.0466,-0.0203 0.0875,-0.0485 0.1225,-0.0847l-0.6311,-0.6936z"
+      android:strokeWidth="0.008793501"
+      android:fillColor="#ffffff"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="m16.9968,18.0793l-0.2543,0c-0.0832,0.0012 -0.1573,0.0237 -0.2222,0.0676 -0.065,0.0439 -0.1142,0.1023 -0.1477,0.1751l0.0023,-0.0046 -0.2381,0.5225 -0.2358,-0.5225l0,0.0046c-0.0325,-0.0728 -0.0814,-0.1312 -0.1468,-0.1751 -0.0654,-0.0439 -0.1398,-0.0665 -0.2231,-0.0676l-0.252,0c-0.0438,0.0012 -0.0799,0.0162 -0.1084,0.0451 -0.0285,0.0289 -0.0432,0.0647 -0.0442,0.1075l0,1.4657c0.114,-0.0028 0.2091,-0.0422 0.2855,-0.1182 0.0764,-0.076 0.1161,-0.1714 0.1191,-0.2864l0,-0.7745c0.0002,-0.0105 0.0033,-0.0189 0.0095,-0.0251 0.0062,-0.0062 0.0146,-0.0094 0.0251,-0.0095 0.006,0.0002 0.0119,0.0021 0.0176,0.0058 0.0057,0.0037 0.0099,0.0079 0.0124,0.0127l0.4485,0.9895c0.0085,0.0177 0.021,0.032 0.0376,0.0431 0.0166,0.011 0.0349,0.0167 0.0549,0.017 0.0199,-0.0003 0.0379,-0.0055 0.054,-0.0159 0.0161,-0.0104 0.0289,-0.0243 0.0384,-0.0419L16.6778,18.5023c0.0035,-0.0048 0.008,-0.0091 0.0136,-0.0127 0.0055,-0.0037 0.0118,-0.0056 0.0188,-0.0058 0.0094,0.0002 0.0171,0.0033 0.0231,0.0095 0.006,0.0062 0.0091,0.0146 0.0092,0.0251l0,0.7745c0.003,0.115 0.0427,0.2104 0.1191,0.2864 0.0764,0.076 0.1716,0.1154 0.2855,0.1182l0,-1.4657c-0.0011,-0.0428 -0.0157,-0.0786 -0.0439,-0.1075 -0.0282,-0.0289 -0.0637,-0.0439 -0.1063,-0.0451z"
+      android:strokeWidth="0.008793501"
+      android:fillColor="#ffffff"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="m18.5911,18.0793l-0.8068,0c-0.115,0.0029 -0.2104,0.0427 -0.2864,0.1193 -0.076,0.0766 -0.1154,0.1725 -0.1182,0.2875l0,0.8068c0.0028,0.115 0.0422,0.2104 0.1182,0.2864 0.076,0.076 0.1714,0.1154 0.2864,0.1182l0.8068,0c0.115,-0.0028 0.2104,-0.0422 0.2864,-0.1182 0.076,-0.076 0.1154,-0.1714 0.1182,-0.2864l0,-0.8068c-0.0028,-0.1151 -0.0422,-0.2109 -0.1182,-0.2875 -0.076,-0.0766 -0.1714,-0.1164 -0.2864,-0.1193zM18.5911,19.1913c0.0021,0.0042 -0.0021,0.0212 -0.0127,0.0509 -0.0106,0.0297 -0.0403,0.0466 -0.089,0.0509l-0.6034,0c-0.0042,0.0021 -0.0212,-0.0021 -0.0509,-0.0127 -0.0297,-0.0106 -0.0466,-0.0403 -0.0509,-0.089l0,-0.6057c-0.0021,-0.0041 0.0021,-0.0207 0.0127,-0.0497 0.0106,-0.029 0.0403,-0.0456 0.089,-0.0497l0.6034,0c0.0042,-0.0021 0.0212,0.0021 0.0509,0.0124 0.0297,0.0104 0.0466,0.0394 0.0509,0.087z"
+      android:strokeWidth="0.008793501"
+      android:fillColor="#ffffff"
+      android:strokeColor="#00000000"/>
+  <path
+      android:pathData="m21.0344,18.1949c-0.0351,-0.0351 -0.0759,-0.0626 -0.1225,-0.0826 -0.0466,-0.02 -0.0967,-0.0302 -0.1503,-0.0306 -0.057,0.0004 -0.1095,0.0117 -0.1575,0.0338 -0.048,0.0221 -0.0895,0.0525 -0.1246,0.091l-0.3491,0.3838 -0.3514,-0.3838c-0.0359,-0.0396 -0.0774,-0.0702 -0.1243,-0.0919 -0.0469,-0.0217 -0.0987,-0.0327 -0.1555,-0.0329 -0.0536,0.0004 -0.1036,0.0106 -0.1503,0.0306 -0.0466,0.02 -0.0875,0.0476 -0.1225,0.0826l0.6311,0.6936 -0.6311,0.6936c0.0351,0.0362 0.0759,0.0644 0.1225,0.0847 0.0466,0.0203 0.0967,0.0306 0.1503,0.0309 0.056,-0.0004 0.1082,-0.0117 0.1566,-0.0338 0.0485,-0.0221 0.0903,-0.0525 0.1254,-0.091l0.3491,-0.3838 0.3491,0.3838c0.035,0.0386 0.0765,0.0689 0.1246,0.091 0.048,0.0221 0.1005,0.0334 0.1575,0.0338 0.0536,-0.0004 0.1036,-0.0106 0.1503,-0.0309 0.0466,-0.0203 0.0875,-0.0485 0.1225,-0.0847l-0.6311,-0.6936z"
+      android:strokeWidth="0.008793501"
+      android:fillColor="#ffffff"
+      android:strokeColor="#00000000"/>
+</vector>
diff --git a/android/app/src/main/res/values-night/styles.xml b/android/app/src/main/res/values-night/styles.xml
index 9815690..624f304 100644
--- a/android/app/src/main/res/values-night/styles.xml
+++ b/android/app/src/main/res/values-night/styles.xml
@@ -9,7 +9,7 @@
 
   <style name="LaunchTheme" parent="Theme.SplashScreen">
     <item name="windowSplashScreenBackground">@color/splashScreenBackground</item>
-    <item name="windowSplashScreenAnimatedIcon">@drawable/launch_background</item>
+    <item name="windowSplashScreenAnimatedIcon">@drawable/proxmox_splash_logo</item>
     <item name="postSplashScreenTheme">@style/Theme.App</item>
   </style>
 </resources>
diff --git a/android/app/src/main/res/values/styles.xml b/android/app/src/main/res/values/styles.xml
index 9815690..624f304 100644
--- a/android/app/src/main/res/values/styles.xml
+++ b/android/app/src/main/res/values/styles.xml
@@ -9,7 +9,7 @@
 
   <style name="LaunchTheme" parent="Theme.SplashScreen">
     <item name="windowSplashScreenBackground">@color/splashScreenBackground</item>
-    <item name="windowSplashScreenAnimatedIcon">@drawable/launch_background</item>
+    <item name="windowSplashScreenAnimatedIcon">@drawable/proxmox_splash_logo</item>
     <item name="postSplashScreenTheme">@style/Theme.App</item>
   </style>
 </resources>
-- 
2.30.2






More information about the pve-devel mailing list