Hello Team,
It’s a really frustrating and time-consuming issue in the previous version of Ionic and the latest one too.
Have been trying to resolve the issue of the splash screen being stretched in Android for the last couple of days (using ionic 6 and capacitor 4) but still, there is no luck.
In Capacitor 4, there are a few changes in the styles.xml
file that don’t allow me to follow the previous fixes like settings background to @null.
The old styles.xml
:
`<?xml version="1.0" encoding="utf-8"?>
<!-- Base application theme. -->
...
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.NoActionBar">
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:background">@null</item>
</style>
<style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
<item name="android:background">@null</item> // to avoid splash screen streching
</style>
`
The new styles.xml
:
<?xml version="1.0" encoding="utf-8"?>
...
<style name="AppTheme.NoActionBar" parent="Theme.AppCompat.DayNight.NoActionBar"> //new changes
<item name="windowActionBar">false</item>
<item name="windowNoTitle">true</item>
<item name="android:background">@null</item>
</style>
<style name="AppTheme.NoActionBarLaunch" parent="Theme.SplashScreen"> //new changes
<item name="android:background">@drawable/splash</item> // @null does not work in the new version
</style>
I tried applying @null instead of @drawable/splash
in the new version but it doesn’t work (which was working fine in the older version).
If I replace the new styles.xml with the older one, it doesn’t show a splash screen at all. Could you please explain what exactly is the issue?
Perfect
Stretched with Ionic 6 / Capacitor 4
FYI, I tried all old methods like capacitor config changes or styles.xml changes, but none is working.
current capacitor.config.ts config:
`plugins: {
SplashScreen: {
showSpinner: false,
androidScaleType: 'CENTER_CROP',
launchShowDuration: 2000,
launchAutoHide: true,
backgroundColor: '#ffffff',
splashFullScreen: false,
splashImmersive: true,
useDialog: false
}
}`
still no luck…please help if you’re using the latest versions of capacitor and ionic.