Blog Infos
Author
Published
Topics
Published

An in-depth guide on the Android’s splash screen

 

Image by justinmind

 

Splash screen is a screen that loads when you launch an app. When you first open your application, a loading screen, also known as a launch screen or startup screen, appears. You’ll be brought to a more useful screen where you can perform activities after the loading is complete.

Splash screens only appear briefly on your screen; if you turn your head away, you can miss them. Typically, you’ll notice the company name, emblem, and, with any luck, the company motto.

Splash screens are typically implemented using one of three approaches, which you may discover here:

  1. Using Timers (the old school habits)
  2. Using a Launcher Theme (The Recommended way)
  3. Splash Screen API (Android 12)
Using Timers

We construct a splash activity and a thread in onCreate() for showing up for 2/3 seconds, then go to our preferred activity using a timer (our first method) to display the splash. See how this simple technique was used here:

class SplashScreenActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_splash_screen)
Handler().postDelayed(Runnable { //This method will be executed once the timer is over
// Start your app main activity
val i = Intent(this@SplashScreenActivity, MainActivity::class.java)
startActivity(i)
// close this activity
finish()
}, 3000)
}
}

A splash screen’s function is to immediately show an attractive screen while the application retrieves any relevant content (from a database or network calls). The SplashActivity incurs an additional expense when using the aforementioned method to design its layout.

A blank black or white screen will show when the application starts slowly, which is undesirable for the user experience.

The application’s slow loading of the layout file for the Splash Activity causes the cold to start to appear. Therefore, we will harness the capability of the application theme to design our initial layout rather than creating it from scratch (Our 2nd Method).

Using a Launcher Theme

Before the layout is made, the application theme is instantiated. Using the layer-list method explained below, we’ll create a drawable inside the theme that will include the icon and background of the Activity.

So, for our splash action, we will specify a custom theme in Manifest. Use the steps below to create the splash screen’s theme.

Step 1

Create a splash screen background in drawable/splash background.xml using the desired image as a bitmap.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="<http://schemas.android.com/apk/res/android>">
<item
android:drawable="@drawable/bg_gradient"/>
<item>
<bitmap android:gravity="center"
android:src="@drawable/splash_fg"/>
</item>
</layer-list>
Step 2

Create the gradient in drawable/bg gradient.xml that will be used as the background for your app’s logo; the background can be a gradient or any color, depending on your app.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="<http://schemas.android.com/apk/res/android>"
android:shape="rectangle" >
<gradient
android:type="linear"
android:angle="135"
android:startColor="#ff1b49"
android:endColor="#e67d20" />
</shape>
<!--You can choose your own color -->
view raw bg_gradient.xml hosted with ❤ by GitHub
Step 3

Make a splash screen style in res/values/themes.xml.

<?xml version="1.0" encoding="utf-8"?>
<resources>
<style name="SplashTheme" parent="Theme.MaterialComponents.Light.NoActionBar">
<item name="android:windowBackground">@drawable/splash_background</item>
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
<item name="android:statusBarColor">@color/colorAccent</item>
</style>
</resources>
view raw themes.xml hosted with ❤ by GitHub
Step 4

Set the style as the activity’s theme in AndroidManifest.xml by creating an empty activity with the name SplashScreenActivity.

<activity
android:name=".SplashScreenActivity"
android:theme="@style/SplashTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
view raw manifest.xml hosted with ❤ by GitHub

Job Offers

Job Offers

There are currently no vacancies.

OUR VIDEO RECOMMENDATION

Jobs

Step 5

passing the Intent from SplashScreenActivity.java to your MainActivity.java

class SplashScreenActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
startActivity(Intent(this@SplashScreenActivity, MainActivity::class.java))
finish()
}
}

There is no need to setContentView() with any XML layout because the splash screen is being loaded from the manifest already. Create a Handler if you want to show your splash screen for a set period of time, such as five seconds. A timer can also let you download data from the cloud on your main activity, which might be a better strategy than displaying a dialogue on the home screen.

What size of the image should I put into a drawable folder now that our splash is operational?

Always place your app_logo.png in the drawable-xxhdpi folder to ensure that, in most circumstances, your logo will automatically resize for all types of phone screens.

Additionally, confirm that the image resolution does not exceed 1000×1000 pixels. Depending on the resolution you select, it might have less. There are now many different styles of splash screens with numerous logos located around the screen. How is that even possible?

With the help of the aforementioned example, we implemented our approach to build a splash similar to Twitter, and now all that is needed to make one similar to Facebook is a minor modification to drawable/splash background.xml.

Simply include as many items in your layer list as you want in your splash screen.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="<http://schemas.android.com/apk/res/android>">
<item android:drawable="@drawable/bg_gradient"/>
<item>
<bitmap
android:gravity="center"
android:src="@drawable/logo_art_1"/>
</item>
<item android:bottom="50dp"> // setting the image from bottom
<bitmap
android:gravity="bottom"
android:src="@drawable/logo_art_2"/>
</item>
</layer-list>
view raw layer_list.xml hosted with ❤ by GitHub
Splash Screen API

A new Splash Screen API was implemented with the release of Android 12. On Android 12, every app will by default display a splash screen with the app symbol in the middle. Sounds wonderful until you realize that the Android 12 default splash screen would appear first, followed by your own splash screen if you were using an Activity or Fragment to show a splash screen. You now have two splash displays, and they most likely differ greatly from one another. More inconsistent design and greater user intrusion In order to provide your splash screen a more unified appearance and make it less intrusive for your users, you must now add support for Android 12.

The API offers backward compatibility with earlier API levels along with support for animated icons via AnimatedVectorDrawable or AnimationDrawable. Grab a coffee and follow along; once you’re done, you’ll have an animated splash screen that matches your device’s theme.

image source: google

Setup

There are a few settings you must make in your app before accessing the new API. We’ll make use of this API’s backward compatibility and include a splash screen even for earlier Android releases.

  1. Within your app module build.gradle, modify your compileSdk. Set the Splash Screen API dependency in Gradle to version 31. For backward compatibility, we’ll utilize the compact version.
android {
compileSdk = 31
}
dependencies {
val splahScreenVersion = "1.0.0"
// Use: def instead of val if you are not using Kotlin Gradle(.kts)
implementation("androidx.core:core-splashscreen:$splashScreenVersion")
}
view raw build.gradle hosted with ❤ by GitHub

2. Make two documents with the same name: splash theme.xml. Both are located in the values directory, one in the values-night. To adapt the theme to the user’s device’s dark mode or light mode themes, we produce two files called values and values-night. In order to make organizing them for future updates easier, we gave both files the same name.

Tip: The first file is saved in the default values directory when a new Values Resource File is created by right-clicking on the values directory; the subsequent file is saved in the values-night directory by simply typing values-night into the directory name box. If your project view is set to Android, then this just appears.

creating splash theme.xml

3. In both of our files, we now construct the splash screen theme for the Dark and Light mode scenarios. Theme.SplashThemeName will be the name of the theme, and it will derive from Theme.SplashScreen. Your files should now appear as follows:

<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Splash Screen Theme. -->
<style name="Theme.AppSplash" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">@color/dark</item>
<item name="windowSplashScreenAnimatedIcon">@mipmap/ic_launcher_round</item>
<item name="windowSplashScreenAnimationDuration">300</item>
<item name="postSplashScreenTheme">@style/Theme.SplishSplash</item>
<!-- Status bar and Nav bar configs -->
<item name="android:statusBarColor" tools:targetApi="l">@color/dark</item>
<item name="android:navigationBarColor">@color/dark</item>
<item name="android:windowLightStatusBar">false</item>
</style>
</resources>
<?xml version="1.0" encoding="utf-8"?>
<resources xmlns:tools="http://schemas.android.com/tools">
<!-- Splash Screen Theme. -->
<style name="Theme.AppSplash" parent="Theme.SplashScreen">
<item name="windowSplashScreenBackground">@color/white</item>
<item name="windowSplashScreenAnimatedIcon">@mipmap/ic_launcher_round</item>
<item name="windowSplashScreenAnimationDuration">300</item>
<item name="postSplashScreenTheme">@style/Theme.SplishSplash</item>
<!-- Status bar and Nav bar configs -->
<item name="android:statusBarColor" tools:targetApi="l">@color/white</item>
<item name="android:navigationBarColor">@color/white</item>
<item name="android:windowLightStatusBar">true</item>
</style>
</resources>
Detailing the contents:
  • The background color of the entire splash screen is windowSplashScreenBackground. Comparable to windowBackground
  • Your splash screen icon may be found here: windowSplashScreenAnimatedIcon. It has circular borders and is centered. This is configured to obtain the circular launcher icon and ought to function with earlier API levels. Icons larger than 108dp should not be used since they would clip.
  • windowSplashScreenAnimationDuration — This controls how long the animated icon will be displayed. As an AnimatedVectorDrawable can set it, it actually has no effect on the icon’s animation, but it is helpful for personalizing the icon’s exit animation. Later, more on this
  • After the splash screen has finished, you can specify the actual app theme you wish to use using the postSplashScreenTheme setting. Your default app theme should be set here.
  • Since your actual theme isn’t being used yet, the status bar and nav bar attributes are there to ensure that you have a consistent theme applied to them when the app is launched. If you leave them with default values, API level 30 and lower devices may display default black bars on the status bar and nav bar. For a unified appearance, we want the nav bar and status bar to match the windowSplashScreenBackground.

Make sure the desired settings are entered for your SplashScreen Theme’s dark and light modes.

4. Set the android:theme attribute of your application tag to the Splash Screen theme you previously created by opening your manifest file. Those are: @style:Theme.SplashThemeName

Note: Please delete the android:theme attribute from your activity tag if it already contains the LAUNCHER intent (your entrance activity from the launcher). The app will crash as a result. Look out for this because the standard Android Studio templates usually add this characteristic to entry activities, which could prevent you from tearing your hair out trying to figure out what went wrong.

<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/Theme.SplashThemeName">
<activity
android:name=".ui.main.MainActivity"
android:exported="true"
android:label="@string/app_name">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
view raw manifest.xml hosted with ❤ by GitHub

5. InstallSplashScreen() must now be used inside your entrance activity (activity that enters from the launcher), immediately after super.onCreate() and before setContentView() inside the onCreate method. See this document:

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Surface
import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
// Enable support for Splash Screen API for
// proper Android 12+ support
installSplashScreen()
setContentView(R.layout.activity_main)
}
}
view raw MainActivity.kt hosted with ❤ by GitHub

Right now, you’re done. You were successful in including a Splash for Android 12 as well as earlier Android releases.

This icon should not be larger than 108dp or it will be clipped. The icon may be a drawable, png, jpg, or webp. AnimatedVectorDrawable or AnimationDrawable cannot currently be added to windowSplashScreenBackground since they will only function on Android 12 and will not function on any lower API levels. The animated icon is only available for Android versions 12 and up. If you set it to all API levels, the lesser API levels will see a blank field. That’s not what we want. This brings us to the second chapter of this book, where we develop animated icons for Android 12 while maintaining support for earlier Android versions with the correct checks.

Splash screen standards

It’s easy to use splash screens. They serve to improve a brand and provide customers with pleasant distractions while they wait. Here are some guidelines to follow when creating your own splash screen in this regard

  • Keep it clear of pointless interruptions
  • Use only one color or one logo.
  • Use animation sparingly

Thank you for taking the time to read this article. If you found this post to be useful and interesting, please clap and recommend it.

If I got something wrong, mention it in the comments. I would love to improve

Connect with me on GitHuband LinkedIn.

This article was originally published on proandroiddev.com on October 03, 2022

YOU MAY BE INTERESTED IN

YOU MAY BE INTERESTED IN

blog
Today we will explore Splash screen API which is introduced in Android 12. To…
READ MORE
blog
Splash screen is the initial screen you’ll see when you open your app. It…
READ MORE
blog
With the first official release of the androidx.core.splashscreen library, there is no better time…
READ MORE

Leave a Reply

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

Fill out this field
Fill out this field
Please enter a valid email address.

Menu