Hello.
I have built a Ionic v4 capacitor app. Everything fine, but we noticed a strange behavior with different devices, both in the class of xxhdpi (Android).
This is how it does appear in a Google Pixel 2 (5 inches, 1080x1920)
And this is how does it appear in a OnePlus 7T (6.55 inches, 1080x2400)
This is the sample splash screen which is being used by both
I tried to use a 9-patch and result was even worse, no matter what. I tried as well to increase height of this picture to 2400, but then i had the opposite issue with a smaller screen. I even tried to edit the native part of the app, editing any xml which had a reference to splsh.png, with no result other than make it even worse (mostly fullscreen and deformed logo). How can i preserve splash’s aspect ratio?
Thank you in advance.
Try adding this to the config.xml Preferences:
<preference name="SplashMaintainAspectRatio" value="true"></preference>
Thank you for you answer. That setting is already in place
Hi,
I’m running into the same problem. Have you found a solution for this?
Hello. Not yet. We temporarily published our app as it is, but i’ll have to be back at the issue soon.
re create the splash images and add them to their respective platforms with correct sizes
Same issue, with a brand new Capacitor 2+ project. Running it on a Pixel 2 looks fine. Running it on a Pixel 4 is stretched. Again, this is a stock project, no changes. Just what a plain “cap create” builds.
1 Like
Hi,
If you use the capacitor splashscreen plugin, you can set in the capacitor.config.json file :
"plugins": {
"SplashScreen": {
"androidScaleType": "CENTER_CROP",
}
}
Others, configuration for this plugin are available here :
https://capacitor.ionicframework.com/docs/apis/splash-screen
You can consult available scale type choices here :
https://developer.android.com/reference/android/widget/ImageView.ScaleType .
I hope this will help you.
4 Likes
Hi this worked well,
but somehow for 1 second the splashscreen is streched for 1 second and then it crops the image to the right aspect ratio. Anyone facing the same issue?
Edit:
This solved my problem
opened 11:41AM - 03 Jun 19 UTC
closed 04:02PM - 06 Feb 20 UTC
workaround
Description of the problem:
I followed the instructions to configure splash scr… een scaling described here: https://capacitor.ionicframework.com/docs/apis/splash-screen/#configuration. When the app launches, Capacitor displays my splash screen scaled incorrectly, then adjusts to the scaling I have in my `capacitor.config.json` file:
```
"plugins": {
"SplashScreen": {
"launchShowDuration": 1000,
"launchAutoHide": true,
"androidSplashResourceName": "splash",
"androidScaleType": "CENTER_CROP"
}
},
```
What I'm expecting is that the splash screen displays once, at the specified scale.
Affected platform
- [X] Android
- [ ] iOS
- [ ] electron
- [ ] web
OS of the development machine
- [X] Windows
- [ ] macOS
- [ ] linux
Other information:
Capacitor version:
5.0
node version:
10.15.3
npm version:
6.9.0
CocoaPods version:
Steps to reproduce:
As described above.
Link to sample project:
2 Likes
MLeins
November 10, 2020, 7:34am
#10
Im facing the same issue, the splash screen changes after a second
1 Like
Here’s what worked for me. Open values/styles.xml and make the following changes
original
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
<item name="android:background">
@drawable/splash
</item>
</style>
Modified
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
<item name="android:background">
@android:color/white
</item>
</style>
3 Likes
You might try my method by moving to a vector for your splash screen. There is a builtin tool in android studio to convert svg to vector but elements wont convert.
splash.xml - remove png
<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" android:layout_height="match_parent" android:layout_width="match_parent">
<item android:gravity="center"
android:width="400dp"
android:height="400dp">
<vector xmlns:android="http://schemas.android.com/apk/res/android" xmlns:aapt="http://schemas.android.com/aapt"
android:viewportWidth="400"
android:viewportHeight="400"
android:fillColor="#303030"
android:gravity="center"
android:width="400dp"
android:height="400dp">
<yourVector/>
</vector>
</item>
</layer-list>
capacitor.config.json
"SplashScreen": {
"backgroundColor": "#303030",
"launchShowDuration": 30000,
"splashImmersive": "false",
"splashFullScreen": "false"
},
app.component.ts
@HostListener('document:readystatechange', ['$event'])
onReadyStateChanged(event) {
if (event.target.readyState === 'complete') {
SplashScreen.hide();
}
}
YOU SAVED THE DAY thank you
This file not used by capacitor, it was used by cordova
Thanks , it worked for me