Learn how to – How to code Android Launcher Screen (Splash Screen) for your app the right way

Learn how to – How to code Android Launcher Screen (Splash Screen) for your app the right way.

When your app is launched by the user, it will show some white or black screen briefly before the main screen is shown. This is because it will take a few milliseconds to be loaded into memory and the onCreate() method to be called. This brief white or black screen is your splash screen. Most Google apps will show you the Google logo before the main app is opened fully. This is considered a good design because users might think the app has frozen especially if yours take longer to initialize and this might be a put off leading to uninstalls. You can find the source code for Android Splash Screen from GitHub.

‘Wrong Way’

Some developers will create a splash screen ‘the wrong way’. In quotes because it is not completely wrong but is considered the bad design. Please stop using timers or syncs. It is the wrong way!

The right way

Use the launcher theme. You see, when the app is launched, the window manager draws a placeholder screen using your app’s theme before the main activity is called. So it will show a white blank screen or black screen depending on your theme coloration. Particularly the windowBackground element in your theme. The trick, therefore, is utilizing this windowBackground to render what we want before the app is launched.

So how do we do that?

I assume you have already installed the [Android studio]. I am using Android Studio version 3.5.1

Launch the Android Studio, click Start a new Android Studio project then Basic Activity. Name your project, mine is TruckSend then give your preferred package name. The package name is usually your project’s domain ( Java package way). Select the Minimum API version and language. I am using Kotlin and Androidx frameworks. Cool, you created your first app!

Choose the project.

Configure project by specifying basic settings.

Create Android Adaptive Launcher Icons in Android Studio

To create adaptive launcher icons,

1. Right Click app folder on your project folder structure
2. Select New
3. Then Image Asset

Put the following features:

Icon Type: Launcher Icons(Adaptive and Legacy)

Name: ic_launcher

Foreground Layer tab

Asset Type: choose your asset type (mine is an image)

Path: give a path to your image

On the scaling section, scale your image or logo to fit the safe zone. The safe zone is the black circular line in the preview.

Background Layer tab

Here you choose the
background color or image of the launcher. Mine is color, I chose
black.

Then click Next and Finish.

Using a dedicated splash screen

Create a new Empty Activity called SplashActivity.kt. When you select this activity as Launch Activity, you will have a clash in the manifest file as shown.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_tools="http://schemas.android.com/tools"
    package="com.learnhowto.trucksend">
    <application
        android_allowBackup="true"
        android_icon="@mipmap/ic_launcher"
        android_label="@string/app_name"
        android_roundIcon="@mipmap/ic_launcher_round"
        android_supportsRtl="true"
        android_theme="@style/AppTheme"
        tools_ignore="GoogleAppIndexingWarning">
        <activity android_name=".SplashActivity">
            <intent-filter>
                <action android_name="android.intent.action.MAIN" />
                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android_name=".MainActivity"
            android_label="@string/app_name"
            android_theme="@style/AppTheme.NoActionBar">
            <intent-filter>
                <action android_name="android.intent.action.MAIN" />
                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>
</manifest>

Correct this by removing the intent-filter tag in the MainActivity tag.

Next, create a drawable called bg_launcher.xml in the drawable folder and add the following.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns_android="http://schemas.android.com/apk/res/android">
    <item android_drawable="@color/colorPrimary"/>
    <item>
        <bitmap
            android_gravity="center"
            android_src="@drawable/trucksendwhite"/>
    </item>
</layer-list>

Note:

<item android_drawable="@color/colorPrimary"/>

This is the main
background, it could be an image or a color. I recommend it be a
color.

The bitmap part
could be your logo.

Play around with them to fit your needs.

Go to your styles, create a new style to hold your launch screen. The style should have the windowBackground as the drawable you created above and of course, it should not have an action bar. Mine is AppTheme.NoActionBar.Launcher

<resources xmlns_tools="http://schemas.android.com/tools">
    <style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:colorBackground">@color/colorBackground</item>
        <item name="android:navigationBarColor" tools_targetApi="lollipop">@android:color/black</item>
    </style>
    <style name="AppTheme.NoActionBar" parent="Theme.MaterialComponents.Light.NoActionBar">
        <item name="windowActionBar">false</item>
        <item name="windowNoTitle">true</item>
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:colorBackground">@color/colorBackground</item>
        <item name="android:navigationBarColor" tools_targetApi="lollipop">@android:color/black</item>
    </style>
    <style name="AppTheme.NoActionBar.Launcher" parent="AppTheme.NoActionBar">
        <item name="android:windowBackground">@drawable/bg_launcher</item>
    </style>
    <style name="AppTheme.AppBarOverlay" parent="ThemeOverlay.AppCompat.Dark.ActionBar" />
    <style name="AppTheme.PopupOverlay" parent="ThemeOverlay.AppCompat.Light" />
</resources>

Go back to your manifest file and add the style as your theme.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns_android="http://schemas.android.com/apk/res/android"
    xmlns_tools="http://schemas.android.com/tools"
    package="com.learnhowto.trucksend">
    <application
        android_allowBackup="true"
        android_icon="@mipmap/ic_launcher"
        android_label="@string/app_name"
        android_roundIcon="@mipmap/ic_launcher_round"
        android_supportsRtl="true"
        android_theme="@style/AppTheme"
        tools_ignore="GoogleAppIndexingWarning">
        <activity android_name=".SplashActivity"
            android_theme="@style/AppTheme.NoActionBar.Launcher">
            <intent-filter>
                <action android_name="android.intent.action.MAIN" />
                <category android_name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android_name=".MainActivity"
            android_label="@string/app_name"
            android_theme="@style/AppTheme.NoActionBar">
        </activity>
    </application

The SplashActivitity is the starting screen where you could check startup configurations like logins or fetch data before proceeding. startActivity(Intent(this, MainActivity::class.java))

Now launch your app to see your new splash screen!

You can find the source code for Android Splash Screen from GitHub.

Also check:

Best Android Development Books

How To Get and Display Current User Location on Android Google Map

Deploy Python 3 Django Application on CentOS 7 with Apache and mod_wsgi

How To Dockerize Django Application With PostgreSQL Database

How To Dockerize a Django Application on Linux