Android

Android Create Static Splash Screen Using WindowBackground

Splash screen is a commonly used component for every Android applications. There are many ways to create a splash screen in Android app. Here i am going to explain you the simplest and fastest way to create a splash screen. This is not only good in terms of developer’s productivity but it also produces fastest performing splash screen for an app.

This method creates static splash screen that means, statically places texts, images and background color. These allowed options are sufficient for making a simple static splash screen.

How it works

Every Android activity shows a blank screen until the app completely loads the activity layout. This blank screen is the windowBackground. We achieve our goal by overriding this attribute in activity theme and provide our custom drawable.

Let’s dive in to the step by step guide,

Step 1. Create A Theme

Every apps have a default theme pre-created by Android studio and all the activities in an app uses app level theme. We can provide separate theme for each activity in an app too. This options helps us to give special behaviour to our landing activity or splash activity.

<activity
            android:name=".SplashActivity"
            android:label="@string/app_name"
            android:screenOrientation="portrait"
            android:theme="@style/AppTheme.SplashTheme">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

Step 2. Create A Separate Theme For Splash Screen

This theme is specially created for splash activity only and it changes some properties for splash screen.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.DarkActionBar">
        <!-- Customize parent theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="android:windowActivityTransitions">true</item>
    </style>

<style name="AppTheme.FullScreen" parent="Theme.MaterialComponents.Light.NoActionBar">

        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="colorOnError">@color/error_color</item>

        <item name="popupMenuStyle">@style/Widget.MaterialComponents.PopupMenu</item>
        <item name="actionOverflowMenuStyle">@style/Widget.MaterialComponents.PopupMenu.Overflow
        </item>
        <item name="materialAlertDialogTheme">
            @style/ThemeOverlay.MaterialComponents.MaterialAlertDialog
        </item>

        <item name="windowNoTitle">true</item>
        <item name="windowActionBar">false</item>
        <item name="android:windowFullscreen">true</item>
        <item name="android:windowContentOverlay">@null</item>

        <item name="android:windowBackground">@null</item>
        <item name="android:windowActivityTransitions">true</item>

    </style>

<style name="AppTheme.SplashTheme" parent="@style/AppTheme.FullScreen">
        <item name="android:windowNoTitle">true</item>
        <item name="android:windowBackground">@drawable/app_loader</item>
    </style>

Above code created a separate theme for splash screen by inheriting default properties for the derived SplashTheme.

android:windowBackground helps us to provide a custom drawable as the background of the blank screen before Activity layout loaded.

Step 3. Create Drawable For windowBackground

Create drawable file named “app_loader.xml” and add the following content.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:opacity="opaque">
    <!-- The background color, preferably the same as your normal theme -->
    <item android:drawable="@color/white" />
    <!-- Your product logo - 144dp color version of your app icon -->
    <item>
        <bitmap
            android:gravity="center"
            android:src="@drawable/logo_center_splash" />
    </item>

    <item>
        <bitmap
            android:gravity="fill_horizontal|bottom"
            android:src="@drawable/bottom_graphics" />
    </item>

</layer-list>

This drawable contains 2 drawables,

1st drawable placed at the center of the screen and 2nd drawable placed at the bottom of the screen. You can ignore the footer graphics if you don’t want.

After you have completed all the above steps, you are good to run the app. Please go ahead and run the app.

About author

Geethu is a teacher by profession, but she likes to research new things and is also interested in writing. Devdeeds is her blog, where she writes all the blog posts related to technology, gadgets, mobile apps, games, and related content.

Leave a Reply

Your email address will not be published. Required fields are marked *