ionic-team
--splashBackgroundColor not working on android
I am running capacitor-assets version 1.0.14 to generate icons and splash images for an android app. I scaled down the size of the icon to about 68% and that mostly gets the size right, but the splash background color is just coming out white. For reference, this is the command I'm using:
npm run capacitor-assets generate -- --android --iconBackgroundColor "#80daeb" --splashBackgroundColor "#80daeb"
That correctly generates all the "drawable..." splash images with the correct light blue color, but when I launch the app the splash screen has a white background. Thanks.
I ran into this same issue now with one asset while re-testing #399 with 2.0.3, but then that same asset with the same command from the same capacitor-assets version does have the appropriate background colour in a newly generated Ionic Capacitor project... 🤔 that's a tad weird.
not sure if this point is relevant here: but previously with 1.x I was able to run the CLI command without wrapping the hex colour strings in quotes, but now with 2.x it seems they need to be quoted.
To me it looks so far like Sharp is doing something weird here. The hex codes are passed to Sharp. In the Lib converted to RGBA. Maybe a specific problem with PNG's or local environment.
I'm running into the same issue where the background is white even tho I pass the param for a different color
I'm experiencing the same issue; using 2.0.4.
FAILS:
Changes to splashBackgroundColor have no affect; all I ever see on the Android device is a solid background splash being white or black, depending on my device's global theme (ie dark mode).
WORKS:
Changes to iconBackgroundColor work as expected. This tells me I'm successfully conveying some custom color. My transparent logo is rendering correctly in the icon (although scaling is an issue, but I see separate discussions about that already).
My command:
npx capacitor-assets generate --android --assetPath /static --iconBackgroundColor '#3E3681' --iconBackgroundColorDark '#3E3681' --splashBackgroundColor '#3E3681' --splashBackgroundColorDark '#3E3681'
#3E3681 is a custom purple color. I'm aware the my light and dark are identical; I'm doing that for now.
Inspecting generated assets (in Android Studio)...
I see all relevant bitmap backgrounds as being either transparent or purple. I don't see white or black backgrounds anywhere (from what I can tell). Moreover I see the splashes folder full of purple-background-with-my-white-logo, as I expect. However, notably, the logo is fully shown in the bitmap splashes and not cropped as a circle! Meanwhile when I observe the splash on the device, I only see a round-cropped-logo, as if Android found no splashes and it reverted to showing my round-cropped icon floating on the native background color. My sense is telling me the generated fullscreen-bitmap splashes are OK, however Android is not using them for whatever reason.
My trials included:
- Single png
- Single svg
- Two png's (logo.png and logo-dark.png)
All files have transparent bg.
Device is Pixel 6 using Android 13.
Ok I have a workaround, and some discoveries:
1 - Testing on Pixel 2 with API 30, the splash works. I've learned this is using the old splash way, prior to Android 12's Splash Screen API. It's a fullscreen bitmap, presumably, one of the ones this library outputted.
2 - I didn't know about https://capacitorjs.com/docs/apis/splash-screen, so I went ahead and installed that too and used the example config. Still no change to splash screen behaviour.
3 - Around the internet people are talking about windowSplashScreenBackground for the new Android Splash Screen API. I don't see it anywhere in the Android project after running all build & sync steps.
For fun I added it as an entry in app\res\values\styles.xml with my custom purple color. THIS WORKS!
<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen">
...
<item name="windowSplashScreenBackground">#3E3681</item>
</style>
So I think this library (capacitor-assets) is fine in generating splash bitmaps, as intended, for use with old-style native API's. Any issue in actual splash screen rendering should be an issue with Capacitor Splash Screen API.
<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen"> ... <item name="windowSplashScreenBackground">#3E3681</item> </style>
This worked for me. thanks for the hint
I also experienced described problems when trying to change the splash background color (in dark mode) upon using the flag:
--splashBackgroundColorDark '#FFFFFF'.
In my case, the additional following error was thrown:
Unable to generate assets Unable to parse color from string: '#FFFFFF'
But since I had successfully created assets previously and without using the flag, the previously created assets ended up being used.
Maybe this is a bit unrelated, but upon further investigation it seems like quotes are not always stripped off correctly when the color string from the CLI is passed on to the color-string module. As changing the code in node_modules\color\index.js:54 from:
} else if (typeof object === 'string') {
const result = colorString.get(object);
if (result === null) {
throw new Error('Unable to parse color from string: ' + object);
}
to something like:
} else if (typeof object === 'string') {
// const result = colorString.get(object);
var result = colorString.get(object);
if (result === null) {
// object = '#FFFFFF' throws error
if (object.slice(0, 1) === "'" && object.slice(-1) === "'") {
object = object.substring(1, object.length - 1)
result = colorString.get(object);
}
if (result === null) {
throw new Error('Unable to parse color from string: ' + object);
}
}
solved the issue for me. I am, however, Not 100% sure where to look for the capacitator-code that takes the color input and fails to strip the quotes off of it.
You must write it without quotes. Like this: --splashBackgroundColorDark #FFFFFF for example:
npx @capacitor/assets generate --iconBackgroundColor #F3F3F3 --iconBackgroundColorDark #1E1E1E --splashBackgroundColor #F3F3F3 --splashBackgroundColorDark #1E1E1E
