NativeScript Splash Screen for Android

AndroidManifest.xml

File from app/App_Resources/Android/AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="__PACKAGE__"
	android:versionCode="1"
	android:versionName="1.0">

	<supports-screens
		android:smallScreens="true"
		android:normalScreens="true"
		android:largeScreens="true"
		android:xlargeScreens="true"/>

	<uses-sdk
		android:minSdkVersion="17"
		android:targetSdkVersion="__APILEVEL__"/>

	<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
	<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
	<uses-permission android:name="android.permission.INTERNET"/>

	<application
		android:name="com.tns.NativeScriptApplication"
		android:allowBackup="true"
		android:icon="@drawable/icon"
		android:label="@string/app_name"
		android:theme="@style/SplashTheme" >
		<activity
			android:name="com.tns.NativeScriptActivity"
			android:label="@string/title_activity_kimera"
			android:configChanges="keyboardHidden|orientation|screenSize">

				<intent-filter>
				<action android:name="android.intent.action.MAIN" />

				<category android:name="android.intent.category.LAUNCHER" />
			</intent-filter>
		</activity>
		<activity android:name="com.tns.ErrorReportActivity"/>
	</application>
</manifest>

app.js

File from app/app.js

var application = require("application");

// check the current platform (we are interested in android only)
// alternatively, you may have app.android.js and app.ios.js
var platform = require("platform");
if(platform.device.os === platform.platformNames.android) {
    application.onLaunch = function(intent) {
        // hook the onActivityCreated callback upon application launching
        application.android.onActivityCreated = function(activity) {
            // apply the default theme once the Activity is created
            // Changing the SplashTheme for AppTheme
            var id = activity.getResources().getIdentifier("AppTheme", "style", activity.getPackageName());
            activity.setTheme(id);
        }
    }
}

application.start({ moduleName: "main-page" });

styles.xml

File from platforms/android/src/main/res/values/styles.xml

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:android="http://schemas.android.com/apk/res/android">
	
    <style name="AppThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="toolbarStyle">@style/NativeScriptToolbarStyle</item>
		<item name="colorPrimary">@color/ns_primary</item>
    	<item name="colorPrimaryDark">@color/ns_primaryDark</item>
		<item name="colorAccent">@color/ns_accent</item>
    </style>

    <style name="SplashThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowFullscreen">false</item>      
        <item name="android:windowActionBar">true</item>
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowContentOverlay">@null</item>
        <item name="android:windowBackground">@drawable/splashscreen</item>
    </style>
    
    <style name="AppTheme" parent="AppThemeBase">
    </style>

    <style name="SplashTheme" parent="SplashThemeBase">
    </style>

    <style name="NativeScriptToolbarStyleBase" parent="Widget.AppCompat.Toolbar">
        <item name="android:background">@color/ns_primary</item>
        <item name="theme">@style/ThemeOverlay.AppCompat.ActionBar</item>
        <item name="popupTheme">@style/ThemeOverlay.AppCompat</item>
    </style>
    
	<style name="NativeScriptToolbarStyle" parent="NativeScriptToolbarStyleBase">
    </style>
</resources> 

Great job dude, works just nice, keep it up.

Edit:
Android 5.0.2, {N} 1.7.1

Thanks Its works very well...

And what about that black area in the splash screen?
Mine is showing that too. Is it a problem?

Yes. I am also having the same problem. It is showing black strip and showing light gray color at the top. Any one have solution for it?

Does someone has a solution for this issue?

I have solved the problem by replacing the splashscreen.9.png inside drawable-nodpi by another image

I build the my App via Telerik AppBuilder and for iOS, the Splashscreen is shown automatically correct (without additional changes), only for Android it shows just a white screen. So I thought using the steps mentioned here would help, but unfortunately I end up with this:

I tested this on many different devices with different screens and Android versions, always the same result.
Has anybody found a solution for that?

EDIT
I just forgot the part from app.js.
After adding this code, I got the black strip, but only for the default splashscreen. I don't have this problem anymore with my custom Splash Screen.
So the code works perfect, it was just my fault!

I solved the problem with black strip by changing parent in:
<style name="SplashThemeBase" parent="Theme.AppCompat.Light.NoActionBar">
I used:
parent="android:Theme.Light"

I have another problem now. I am using nativescript-local-notifications, when the user click on the notification (and app is closed) the app open, but application.android.onActivityCreated isn't called.

works 👍 Thank you

Thank you. Works great The only difference for me was that I had to put the styles.xml in the app/App_Resources/Android/values (creating values manually).