Double splash screen with with flash in between

Capacitor
#1

Hi all,

I am writing an app with Ionic 5+angular and am using capacitor to make my builds. The problem I have is that I have two splash screens with white screen flash in between:

The"first" splash screen, if that’s the right way to call it, is specified in styles.xml in android->src->main->res->values.

 <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
         <item name="android:background">@drawable/screen</item>
  </style>

The second one is specified in splash screen settings in capacitor.config.json:

{
    "SplashScreen": {
      "launchShowDuration": 5000,
      "launchAutoHide": true,
      "androidSplashResourceName": "screen"
    }

Now, apparently these two can have different images. I can name the second one differently, like let’s say “splash”, and then the default capacitor splash screen image will be displayed.

That by itself wouldn’t be a problem. I can set the same image in both settings and then the same image will be displayed. The problem is, is that there is a flash of white screen between those two splash screens.

I assume what happens (I may be totally wrong) when I start the app is that the native wrapper launches and the first splash screen gets displayed. Then, when my program gets initialized, it takes a few hundred miliseconds to load the splash screen plugin for the second splash screen, of my app itself. During those few hundred miliseconds nothing is displayed and it causes that white screen - native wrapper has already launched and its splash screen is gone, but the sedond splash screen of my app hasn’t been started yet.

Is there a way to fix it, or is this normal?

1 Like
#2

I’m having the exact same problem, it does not really matter wheter you add or not a custom splash screen even with default settings when you run a blank ionic project, it will behave the same with the capacitor splash screen.

This bug is really annoying, it makes your app look horrible :frowning:.

Please let me know if you find a work around.

3 Likes
#3

@mhartington maybe some help from the ionic team with this topic ?, I’d really like to know if this is normal or maybe we are doing something wrong.

#4

Does anyone have a sample project that can be inspected? We need one to see what the issue is.

#5

@mhartington yeah sure how can I send it to you ? sorry I’m new here.

#6

Hi @mhartington thanks for the fast reply here’s a repo “https://github.com/LandazuriKastillo/two-splash-screens” with the code. it is just a blank project I’m running it on an android device(weird thing on an android emulator inside android studio the splash screen behaves as it should). I have no idea it this also happens on Ios. this is my system’s info.

Ionic:

Ionic CLI : 6.0.1 (C:\Users\DELL\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 5.1.0
@angular-devkit/build-angular : 0.803.26
@angular-devkit/schematics : 8.3.26
@angular/cli : 8.3.26
@ionic/angular-toolkit : 2.2.0

Capacitor:

Capacitor CLI : 2.0.2
@capacitor/core : 2.0.2

Utility:

cordova-res : 0.12.1
native-run : not installed

System:

NodeJS : v13.8.0 (D:\Program Files\nodejs\node.exe)
npm : 6.13.6
OS : Windows 10

#7

I have the same issue. It seems to be isolated to android though as i have tested it on iOS and the issue is not present.

#8

Yeah I guess so too, I was doing some testing with an ios simulator and everything worked as expected. Hope there’s some news about this bug.

#9

Try adding this to the style that applies the background:

<item name="android:windowFullscreen">true</item>
<item name="android:windowContentOverlay">@null</item>
<item name="android:windowIsTranslucent">true</item>

This is what fixed the problem for me.

7 Likes
#10

Thank you so much !!! it did indeed work!!! you’re the best

#11

Inside which file is this gonna be added to?

#12

Inside the one described on the first post.

1 Like
#13

Now there is a wired Background Color for a short amount of time when the Splash Screen starts.
Do you also have this Problem?

#14

This makes the first image view that appears when you open the app transparent, so when the user taps your app icon there is a delay there before the second splash screen appears. It is a good workaround but not a fix.

1 Like
#15

That fixed the issue thanks @rtovsak :+1:

#16

Hello,
Yes actually this solution introduced a delay. When the user taps the app icon the time that would be spent watching at the first splashscreen is spent instead looking at the other app icons on his phone and it can be annoying as it may seem to the user that they haven’t tapped correctly the app icon they have just launched. It takes a few seconds to load the second splashscreen so I decided to keep the flashing but I made the flashing black. Look at my capacitor.config.json file, as you can see there is android backgroundColor set to black. This is the best solutions I’ve found so far.
Anyway thank you for trying to sort it out. I have looked around so much all day but your post here is the best I found for capacitor.

{
  "appId": "io.ionic.starter",
  "appName": "test",
  "bundledWebRuntime": false,
  "npmClient": "npm",
  "webDir": "www",
  "android": {
    "backgroundColor": "#000000"
},
  "plugins": {
    "SplashScreen": {
      "launchShowDuration": 5000,
      "launchAutoHide": true
    }
  },
  "cordova": {}
}
2 Likes
#17

I wrote about a workaround for this on StackOverflow: Ionic + Capacitor 3 + Android shows distorted splash image briefly - Stack Overflow

In a nutshell, set the background to @null in styles.xml for AppTheme.NoActionBarLaunch:

    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">@null</item>
    </style>

… or with the color of your splash screen:

    <style name="AppTheme.NoActionBarLaunch" parent="AppTheme.NoActionBar">
        <item name="android:background">#ffffff</item>
    </style>
2 Likes
#18

I found a solution to remove the default ionic splash screen.
Only the splash that is configured with capacitor remains
You have to delete this line from your AndroidManifest.xml in your android folder

android:theme="@style/AppTheme.NoActionBarLaunch"

sorry for my bad english

#19 
const config: CapacitorConfig = {
  appId: 'io.ionic.starter',
  appName: 'pfgdeutzfahr',
  webDir: 'www',
  android: {
    backgroundColor:'#000000'  // this works for me
  },
  // ...
};

Thanks: the flash is now black, which matches my dark Splash Screen :slight_smile: