Sunday, January 5, 2025
Google search engine
HomeGuest BlogsHow to code Android Launcher Screen (Splash Screen) for your app the...

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

.tdi_3.td-a-rec{text-align:center}.tdi_3 .td-element-style{z-index:-1}.tdi_3.td-a-rec-img{text-align:left}.tdi_3.td-a-rec-img img{margin:0 auto 0 0}@media(max-width:767px){.tdi_3.td-a-rec-img{text-align:center}}

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.

google app music splash screen
Google Photos Splash Screen

‘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.

.tdi_2.td-a-rec{text-align:center}.tdi_2 .td-element-style{z-index:-1}.tdi_2.td-a-rec-img{text-align:left}.tdi_2.td-a-rec-img img{margin:0 auto 0 0}@media(max-width:767px){.tdi_2.td-a-rec-img{text-align:center}}

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!

step1

Choose the project.

step2

Configure project by specifying basic settings.

step3
step4

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
step5
Create Adaptive Icons on Android Studio

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.

step6
Final Adaptive Icons

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.

step7
Add New Splash Activity
<?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.neveropen.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.neveropen.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

.tdi_4.td-a-rec{text-align:center}.tdi_4 .td-element-style{z-index:-1}.tdi_4.td-a-rec-img{text-align:left}.tdi_4.td-a-rec-img img{margin:0 auto 0 0}@media(max-width:767px){.tdi_4.td-a-rec-img{text-align:center}}

RELATED ARTICLES

Most Popular

Recent Comments