I am using Ionic react and capacitor for mobile app development, for android and ios,
For development, I am using redmi note 7 pro(android 10)
For generating splash screen I used this cordova plugin cordova-res.
But My splash screen is stretching along the height( It is displaying under status bar ).
So, How do I avoid this stretching of splash screen?
If I use the this splash-screen for changing the splash-screen configuration, then also the stretching occurs and after this splash-screen, a proper splash screen is displayed (this splash-screen is not displayed under status bar at the top).
How to avoid this stretching of splash screen?
or is there a way to make splash screen not display under status bar?
Thank you.
The capacitor splash screen plugin has an androidScaleType option:
'CENTER' | 'CENTER_CROP' | 'CENTER_INSIDE' | 'FIT_CENTER' | 'FIT_END' | 'FIT_START' | 'FIT_XY' | 'MATRIX'
The ImageView.ScaleType used to scale the Splash Screen image. Doesn’t work if useDialog is true. Only available on Android.
You can also set a background color as described on the same docs page:
In certain conditions, especially if the splash screen does not fully cover the device screen, it might happen that the app screen is visible around the corners (due to transparency). Instead of showing a transparent color, you can set a backgroundColor to cover those areas.
Possible values for backgroundColor are either #RRGGBB or #RRGGBBAA .
Also check out the tutorials at the bottom of the page if you’re still stuck; there are some detailed guides for Android.