fix: fill the icon and splash with the logo on Android 12+
Without an adaptive icon or a v31 splash theme, Android synthesized a white circular backdrop and shrank the flat square logo to fit inside it, both on the home screen and the native splash screen. Add a real adaptive icon (background color plus a centered, safe-zone-scaled vector foreground from the same path data as assets/logo.svg) and configure the v31 splash screen to use matching background colors, so the logo fills the shape edge to edge instead.
This commit is contained in:
parent
00e42c925c
commit
7b2ddc0249
5 changed files with 70 additions and 0 deletions
|
|
@ -0,0 +1,29 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<!-- "the mews" wordmark, scaled and centered to sit inside the adaptive icon's
|
||||||
|
safe zone (a 66dp circle within the 108dp canvas) so launchers never clip
|
||||||
|
or shrink it, whichever mask shape they apply. Path data matches
|
||||||
|
assets/logo.svg; see that file for the source and regeneration notes. -->
|
||||||
|
<vector xmlns:android="http://schemas.android.com/apk/res/android"
|
||||||
|
android:width="108dp"
|
||||||
|
android:height="108dp"
|
||||||
|
android:viewportWidth="108"
|
||||||
|
android:viewportHeight="108">
|
||||||
|
<group
|
||||||
|
android:translateX="54"
|
||||||
|
android:translateY="54">
|
||||||
|
<group
|
||||||
|
android:scaleX="0.576"
|
||||||
|
android:scaleY="0.576">
|
||||||
|
<group
|
||||||
|
android:translateX="-104.999651"
|
||||||
|
android:translateY="-150.3567465">
|
||||||
|
<path
|
||||||
|
android:fillColor="#e3e1dc"
|
||||||
|
android:pathData="m 55.963126,175.96176 v -20.31939 h 2.539923 l 0.901263,3.07249 q 0.860296,-1.43383 2.33509,-2.41702 1.515761,-0.9832 3.768918,-0.9832 2.335091,0 3.768918,0.94223 1.433828,0.94223 2.089292,2.62186 1.228995,-1.88446 2.949588,-2.70379 1.761559,-0.8603 3.891817,-0.8603 3.523119,0 5.038879,2.17122 1.515761,2.13026 1.515761,5.61242 v 12.86348 h -3.441186 v -11.83932 q 0,-1.55673 -0.327732,-2.86766 -0.286766,-1.35189 -1.228995,-2.17122 -0.901263,-0.81933 -2.785722,-0.81933 -2.212191,0 -3.564085,1.72059 -1.310928,1.67963 -1.310928,4.95695 v 11.01999 h -3.441186 v -11.83932 q 0,-1.55673 -0.327732,-2.86766 -0.286766,-1.35189 -1.228995,-2.17122 -0.901263,-0.81933 -2.785722,-0.81933 -2.212191,0 -3.564086,1.72059 -1.351894,1.67963 -1.351894,4.95695 v 11.01999 z m 42.646121,0.49159 q -3.195387,0 -5.407578,-1.39286 -2.212191,-1.43382 -3.400219,-3.80988 -1.147062,-2.41702 -1.147062,-5.40758 0,-3.23635 1.310928,-5.57144 1.310927,-2.37606 3.523118,-3.64602 2.253158,-1.31093 5.03888,-1.31093 2.417016,0 4.260516,0.9832 1.84349,0.94223 3.03152,2.58089 1.22899,1.59769 1.76156,3.64601 0.57353,2.04833 0.40966,4.21955 H 92.341372 q 0.08193,2.53993 1.106096,4.01472 1.065129,1.47479 2.498956,2.08929 1.433828,0.57353 2.662823,0.57353 1.720593,0 2.867653,-0.53256 1.18803,-0.57353 1.88446,-1.4748 l 3.31828,0.9832 q -1.10609,1.76156 -3.15442,2.90862 -2.04832,1.14706 -4.915973,1.14706 z m -6.226908,-12.45381 h 11.962211 q 0,-1.43383 -0.73739,-2.74476 -0.69643,-1.31093 -2.00736,-2.13026 -1.26996,-0.86029 -3.072486,-0.86029 -1.515761,0 -2.867655,0.57353 -1.351895,0.57353 -2.253158,1.84349 -0.860296,1.26996 -1.024162,3.31829 z m 22.654451,11.96222 -5.85821,-20.31939 h 3.68699 l 3.89181,15.03471 4.05569,-15.03471 h 3.56408 l 4.01472,15.03471 3.89182,-15.03471 h 3.68698 l -5.81724,20.31939 h -3.15442 l -4.42438,-16.34564 -4.42439,16.34564 z m 30.72485,0.49159 q -1.76156,0 -3.48216,-0.53256 -1.67962,-0.57353 -3.03152,-1.67963 -1.31093,-1.14706 -2.00736,-2.86765 l 3.31829,-1.229 q 0.45063,1.80253 1.96639,2.62186 1.55673,0.77836 3.23636,0.77836 1.22899,0 2.29412,-0.3687 1.1061,-0.36869 1.80253,-1.06513 0.69643,-0.69643 0.69643,-1.59769 0,-1.67962 -1.3519,-2.37606 -1.31093,-0.69643 -3.15442,-1.06512 l -2.82669,-0.57354 q -1.47479,-0.32773 -2.74475,-0.90126 -1.26996,-0.6145 -2.04833,-1.72059 -0.77836,-1.1061 -0.77836,-2.94959 0,-1.84349 1.14706,-3.07249 1.14706,-1.26996 2.90862,-1.92542 1.80253,-0.65547 3.76892,-0.65547 2.41702,0 4.54728,1.02417 2.17123,0.98319 3.07249,3.11345 l -3.23635,1.18803 q -0.53257,-1.229 -1.88446,-1.80253 -1.31093,-0.61449 -2.74476,-0.61449 -1.55673,0 -2.82669,0.69643 -1.26996,0.69643 -1.26996,2.00735 0,1.31093 1.06513,1.92543 1.1061,0.57353 2.70379,0.90126 l 2.66282,0.53257 q 1.63866,0.32773 3.11346,0.94223 1.47479,0.61449 2.41702,1.84349 0.94223,1.18803 0.94223,3.35925 0,1.92543 -1.18803,3.27732 -1.18803,1.3519 -3.07249,2.08929 -1.88446,0.69643 -4.01471,0.69643 z"/>
|
||||||
|
<path
|
||||||
|
android:fillColor="#e3e1dc"
|
||||||
|
android:pathData="m 86.065063,151.61647 q -1.925425,0 -2.990554,-0.3687 -1.024163,-0.40967 -1.433828,-1.51576 -0.368698,-1.1061 -0.368698,-3.19539 v -12.49478 h -3.441186 v -2.74476 h 3.441186 v -5.12081 h 3.441186 v 5.12081 h 3.932784 v 2.74476 h -3.932784 v 11.92125 q 0,1.55673 0.286765,2.08929 0.327732,0.53257 1.802526,0.53257 h 1.843493 v 3.03152 z m 7.087181,0 v -27.36563 h 3.441186 v 10.11873 q 0.860296,-1.43383 2.417023,-2.41703 1.556727,-0.98319 4.137607,-0.98319 3.68699,0 5.20275,2.17122 1.51576,2.13026 1.51576,5.61242 v 12.86348 h -3.44119 v -11.83932 q 0,-1.55673 -0.28676,-2.86766 -0.28677,-1.35189 -1.26996,-2.17122 -0.94223,-0.81933 -2.90863,-0.81933 -2.498945,0 -3.932773,1.72059 -1.433827,1.67963 -1.433827,4.95695 v 11.01999 z m 30.560996,0.49159 q -3.19539,0 -5.40758,-1.39286 -2.21219,-1.43382 -3.40022,-3.80988 -1.14706,-2.41702 -1.14706,-5.40758 0,-3.23635 1.31093,-5.57144 1.31093,-2.37606 3.52312,-3.64602 2.25315,-1.31093 5.03888,-1.31093 2.41702,0 4.26051,0.98319 1.84349,0.94223 3.03152,2.58089 1.229,1.5977 1.76156,3.64603 0.57353,2.04832 0.40967,4.21954 h -15.6492 q 0.0819,2.53993 1.10609,4.01472 1.06513,1.4748 2.49896,2.08929 1.43382,0.57353 2.66282,0.57353 1.72059,0 2.86765,-0.53256 1.18803,-0.57353 1.88446,-1.47479 l 3.31829,0.98319 q -1.1061,1.76156 -3.15442,2.90862 -2.04833,1.14706 -4.91598,1.14706 z m -6.22691,-12.45381 h 11.96222 q 0,-1.43383 -0.7374,-2.74476 -0.69643,-1.31092 -2.00736,-2.13026 -1.26996,-0.86029 -3.07248,-0.86029 -1.51576,0 -2.86766,0.57353 -1.35189,0.57353 -2.25316,1.84349 -0.86029,1.26996 -1.02416,3.31829 z"/>
|
||||||
|
</group>
|
||||||
|
</group>
|
||||||
|
</group>
|
||||||
|
</vector>
|
||||||
|
|
@ -0,0 +1,5 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
|
||||||
|
<background android:drawable="@color/ic_launcher_background"/>
|
||||||
|
<foreground android:drawable="@drawable/ic_launcher_foreground"/>
|
||||||
|
</adaptive-icon>
|
||||||
15
app/android/app/src/main/res/values-night-v31/styles.xml
Normal file
15
app/android/app/src/main/res/values-night-v31/styles.xml
Normal file
|
|
@ -0,0 +1,15 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<resources>
|
||||||
|
<!-- Theme applied to the Android Window while the process is starting on
|
||||||
|
Android 12+ when the OS's Dark Mode setting is on. See values-v31
|
||||||
|
for why the splash and icon background colors are matched. -->
|
||||||
|
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
|
||||||
|
<item name="android:windowSplashScreenBackground">#18191b</item>
|
||||||
|
<item name="android:windowSplashScreenAnimatedIcon">@drawable/splash_logo</item>
|
||||||
|
<item name="android:windowSplashScreenIconBackgroundColor">#18191b</item>
|
||||||
|
<item name="android:windowBackground">@drawable/launch_background</item>
|
||||||
|
</style>
|
||||||
|
<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
|
||||||
|
<item name="android:windowBackground">?android:colorBackground</item>
|
||||||
|
</style>
|
||||||
|
</resources>
|
||||||
17
app/android/app/src/main/res/values-v31/styles.xml
Normal file
17
app/android/app/src/main/res/values-v31/styles.xml
Normal file
|
|
@ -0,0 +1,17 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<resources>
|
||||||
|
<!-- Theme applied to the Android Window while the process is starting on
|
||||||
|
Android 12+, which otherwise wraps the legacy launcher icon in a
|
||||||
|
synthetic white circle for its own splash screen. Matching the
|
||||||
|
splash and icon background colors to the logo's own background
|
||||||
|
makes that circle invisible, so the logo fills the screen. -->
|
||||||
|
<style name="LaunchTheme" parent="@android:style/Theme.Light.NoTitleBar">
|
||||||
|
<item name="android:windowSplashScreenBackground">#18191b</item>
|
||||||
|
<item name="android:windowSplashScreenAnimatedIcon">@drawable/splash_logo</item>
|
||||||
|
<item name="android:windowSplashScreenIconBackgroundColor">#18191b</item>
|
||||||
|
<item name="android:windowBackground">@drawable/launch_background</item>
|
||||||
|
</style>
|
||||||
|
<style name="NormalTheme" parent="@android:style/Theme.Light.NoTitleBar">
|
||||||
|
<item name="android:windowBackground">?android:colorBackground</item>
|
||||||
|
</style>
|
||||||
|
</resources>
|
||||||
4
app/android/app/src/main/res/values/colors.xml
Normal file
4
app/android/app/src/main/res/values/colors.xml
Normal file
|
|
@ -0,0 +1,4 @@
|
||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<resources>
|
||||||
|
<color name="ic_launcher_background">#18191b</color>
|
||||||
|
</resources>
|
||||||
Loading…
Add table
Add a link
Reference in a new issue