CODEWITHSUNDEEP
cordovaionic-framework
Nir Tzezana
Nir Tzezana

Reputation: 2342

Ionic splash screen configuration and background

I've added a splash screen to my Ionic Android project and it works fine.
Only problem is that the app first fires a gray screen (app background is white) then shows the splash screen and then fades out to the gray color it showed when the app launched, only then it loads the first app view.

I've searched the web for possible solutions but found nothing that addresses my issue.
Please note: I only test my app on android and it is currently only supposed to work on android.

I tried messing up with the config.xml file but whenever I build the app the config file goes back to its default state.

Here is the config.xml splash screen part:

<feature name="SplashScreen">
    <param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen" />
    <param name="onload" value="true" />
</feature>

Upvotes: 1

Views: 6489

Answers (3)

soumare
soumare

Reputation: 404

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\May\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.

Upvotes: 2

Roman Ivanitskyi
Roman Ivanitskyi

Reputation: 21

Firstly you should create icon and splash (look at here http://ionicframework.com/docs/cli/icon-splashscreen.html)

Then install ionic plugin add cordova-plugin-splashscreen and then add following code into you config.xml

<preference name="ShowSplashScreen" value="true"/>
<preference name="SplashScreen" value="screen"/>
<preference name="SplashScreenDelay" value="3000"/>
<preference name="AutoHideSplashScreen" value="false"/>
<preference name="SplashShowOnlyFirstTime" value="false"/>
<preference name="FadeSplashScreen" value="false"/>
<feature name="SplashScreen">
<param name="android-package" value="org.apache.cordova.splashscreen.SplashScreen"/>
</feature>

into app.ts or app.component.ts add

import {Splashscreen} from 'ionic-native';

........

initializeApp() {
    this.platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.

     Splashscreen.hide();


    });

Upvotes: 0

Simon Sch&#252;pbach
Simon Sch&#252;pbach

Reputation: 2683

You have to edit the config.xml in the root directory. All changes you made inside the patform directory will be overwritten if you build your app with ionic build or ionic run.

Take a look at splashscreen description from ionic.

Upvotes: 1

Related Questions