2 second long gray loading screen

Ionic Framework ionic-v3
1

Hello guys,

When I open up my app built on Ionic (cordova), I found all of them have one to two second long gray loading page before it starts splash screen.
Is there a way to remove this gray screen? have you guys seen this gray loading screen on your app?

2

This happens because we hide splash screen as soon as platform is ready (in our app.component.ts). I think ionic takes time to load ‘rootPage’ even after platform is ready. I solved this using this blog post. It works for ionic 3 as well.

1 Like
3

Thanks, I will check out the blog. I think all Ionic apps come with this problem… I see a short gray loading screen in all apps I built so far.

4

I have no idea…

I applied the setting in blog and it still shows me gray page for 2 seconds.

I did my best to get rid of white splash screen error and now it has disappeared from my app.
When I apply the setting in blog, it brings back normal Ionic splash screen… so I reverted back to where it was.
Here’s my current config.xml.

<preference name="ScrollEnabled" value="false" />
<preference name="android-minSdkVersion" value="16" />
<preference name="BackupWebStorage" value="none" />
<preference name="SplashMaintainAspectRatio" value="true" />
<preference name="FadeSplashScreenDuration" value="300" />
<preference name="SplashShowOnlyFirstTime" value="false" />
<preference name="SplashScreen" value="screen" />
<preference name="SplashScreenDelay" value="0" />
<preference name="ShowSplashScreen" value="false" />

Is there a way to completely remove that gray screen from this setting?

I built my apk using

ionic cordova build android --release --prod

which completely eliminates white splash screen problem. So now if I manage to remove gray screen which shows up, my app will perfectly go to an animated HTML loading page when it starts.

Thanks,

5

Hi, I see your worries, a gray flash screen before the splash screen.
The problem is that the default activity that is launched has a gray background color theme.
The solution I am going to show you-you will make changes in two files:
project\platforms\android\app\src\main\AndroidManifest.xml
and
project\platforms\android\app\src\main\res\values​​\ themes.xml

The path may differ depending on the types of projects and especially the version you are working on.

The themes.xml file cannot be created by default in this case you have to create it.

First, you have to open the AndroidManifest.xml file and in the Application tag, you see the first activity that looks like this:

        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@android:style/Theme.DeviceDefault.NoActionBar" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

In the @android: theme attribute that defaults to

@android:style/Theme.DeviceDefault.NoActionBar

, that’s what we’ll change and put our custom theme. So you can cut this value because we will use it as a parent theme for our custom theme.

Now go to the themes.xml file and put this.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <style name="Theme.Blanc" parent="@android:style/Theme.DeviceDefault.NoActionBar">
        <item name="android:windowBackground">@android:color/white</item>
    </style>
</resources>

The background color value depends on what you want in the item tag, here I choose a white color, if you want to have other android colors go visit here. You cannot use the value like this #fff.

You guessed it, now you have to go back to our AndroidManifest.xml and set the value of @android:theme to : @style/Theme.Blanc the name of our custom style.
Finally, AndroidManifest looks like that:

 <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" android:label="@string/activity_name" android:launchMode="singleTop" android:name="MainActivity" android:theme="@style/Theme.Blanc" android:windowSoftInputMode="adjustResize">
            <intent-filter android:label="@string/launcher_name">
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

I hope to help you.

2 Likes
7

i try this but if we set background white then it will appears before splash screen , we want to get rid off from this screen

8

Thank you for the post. Can we create theme with an image background? Please let me know.

1 Like
9

I need this. You solved this?

10

i need it but i can’t find it anywhere, did you solve it?