Problem:
I encountered this testing on a device with 1024*768 resolution.
I believe it occurs when there isn't a perfectly matching resolution.
Solution:
I worked around this by using a custom theme which uses drawable for the splash screen instead. This method will work for you as long as you are okay with "fit/fill/center" image display methods . (Probably not "stretch" or we will likely end up with a blurry image again anyways.)
Note:
This looks long, but it's actually not that bad. I just wanted to explain thoroughly.
My Folder Structure
├───config.xml
└───res
└───android
├───drawable
│ splash_screen.xml
├───drawable-hdpi
│ splash_logo.png
├───drawable-ldpi
│ splash_logo.png
├───drawable-mdpi
│ splash_logo.png
├───drawable-xhdpi
│ splash_logo.png
├───drawable-xxhdpi
│ splash_logo.png
├───drawable-xxxhdpi
│ splash_logo.png
└───values
style.xml
splash_screen.xml
- This is where you define what your splash screen will look like.
- You will define how the splash_logo will be used here (fit/fill/center/colors/etc).
- This sample has a white background with the splash_logo displayed in the center.
- Android will automatically select the splash_logo icon based on the screen size/density. More on this under splash_logo.png.
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item>
<color android:color="#FFFF" />
</item>
<item>
<bitmap
android:src="@drawable/splash_logo"
android:gravity="center_horizontal|center_vertical"
/>
</item>
</layer-list>
splash_logo.png
- This can be a full screen image or smaller centered icon (or whatever your heart desires).
- I found it easiest to design for xxxhdpi density screen of 1920*1280 pixels.
- You should create your xxxhdpi density splash_logo.png with this as a reference.
- I wanted a centered medium sized icon, so I created one icon with half height (640) and approximately square.
- We need to generate the different density images so that we will have slightly more consistent look across different devices.
- You will need to copy these files into your
/res folder.
style.xml
- This is the custom theme that will use your drawable.
- Modify as desired.
- You may want to set
parent= to whatever theme is currently being used by the main activity in /platforms/android/app/src/main/AndroidManifest.xml (Just so that you know the theme is available in your android setup.)
<?xml version="1.0" encoding="utf-8"?>
<resources>
<!-- Full screen theme with custom splash screen -->
<style name="MyTheme.FullScreen.Splash" parent="@android:style/Theme.DeviceDefault.NoActionBar">
<!-- Make it full screen (since plugins don't seem to work) -->
<!-- Remove these 2 lines if you don't want full screen -->
<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>
<!-- Use our drawable for the splash screen! -->
<item name="android:windowBackground">@drawable/splash_screen</item>
</style>
</resources>
config.xml (Finally)
- We need to link everything up with the config file!
- First, ensure you have this attribute=value pair inside the
<widget tag: xmlns:android="http://schemas.android.com/apk/res/android"
- We need to point the main activity in the manifest to our custom theme with the
edit-config tag.
- And we need copy over our custom theme, drawable, and logos to Android with the
resource-file tags.
<platform name="android">
<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity[@android:label='@string/activity_name']">
<activity android:theme="@style/MyTheme.FullScreen.Splash" />
</edit-config>
<resource-file src="res/android/values/style.xml" target="app/src/main/res/values/style.xml" />
<resource-file src="res/android/drawable/splash_screen.xml" target="app/src/main/res/drawable/splash_screen.xml" />
<resource-file src="res/android/drawable-ldpi/splash_logo.png" target="app/src/main/res/drawable-ldpi/splash_logo.png" />
<resource-file src="res/android/drawable-mdpi/splash_logo.png" target="app/src/main/res/drawable-mdpi/splash_logo.png" />
<resource-file src="res/android/drawable-hdpi/splash_logo.png" target="app/src/main/res/drawable-hdpi/splash_logo.png" />
<resource-file src="res/android/drawable-xhdpi/splash_logo.png" target="app/src/main/res/drawable-xhdpi/splash_logo.png" />
<resource-file src="res/android/drawable-xxhdpi/splash_logo.png" target="app/src/main/res/drawable-xxhdpi/splash_logo.png" />
<resource-file src="res/android/drawable-xxxhdpi/splash_logo.png" target="app/src/main/res/drawable-xxxhdpi/splash_logo.png" />
</platform>
That should be all!
Troubleshooting:
- You can check that all your resources are copied over correctly by inspecting
/platforms/android/app/src/main/res.
- Ensure that your custom theme was injected into the
/platforms/android/app/src/main/AndroidManifest.xml.
