- Android Splash Screen with Kotlin
- Create a Style resource
- Create Layout XML file for SplashScreen
- Create Splash Screen Activity Class
- Create a MainActivity
- Add SplashScreen Activity as Launch page in manifest
- How to add Splash Screen in Android using Kotlin
- Do I need to have a Splash Screen on my app?
- Creating the SplashScreen.kt class
- Creating the Splash Screen’s layout
- Setting the Splash screen as the first screen of our app
- Adding the Splash screen’s theme
- Adding Timer for the Splash Screen
- Building Splash Screen natively, Android 12, Kotlin
- Why/When Do I Need It?
- Show Me the Code
- Step 1: Creating a Theme
- Step 2: Add the Theme to Activity
- Summary
Android Splash Screen with Kotlin
Android Splash Screen is the 1st screen visible to user when app launches. Splash screen displays some animations or App logo for a short time while some data for the next screen are fetched.
Here we are going to implement a Splash Screen for Android with Kotlin.
Splash Screen is very common to most of the Android Applications. It is very easy to create Splash Screen using Handler class.
Create a Style resource
Update your style.xml file as shown below
Create Layout XML file for SplashScreen
activity_splash.xml
This layout contains an ImageViw ,TextView and a ProgressBar.
You can replace android:src of the ImageView with your own Image.
Create Splash Screen Activity Class
Here we uses a Handler to make a small delay. You can implement data fetching or any function in postDelayed method in Handler.
SplashScreenActivity.kt
package com.kotlincodes.splashscreenwithkotlin import android.content.Intent import android.os.Bundle import android.os.Handler import android.support.v7.app.AppCompatActivity class SplashScreenActivity : AppCompatActivity() < private val SPLASH_TIME_OUT:Long=3000 // 3 sec override fun onCreate(savedInstanceState: Bundle?) < super.onCreate(savedInstanceState) setContentView(R.layout.activity_splash) Handler().postDelayed(< // This method will be executed once the timer is over // Start your app main activity startActivity(Intent(this,MainActivity::class.java)) // close this activity finish() >, SPLASH_TIME_OUT) > >
Create a MainActivity
activity_main.xml
MainActivity.kt
package com.kotlincodes.splashscreenwithkotlin import android.support.v7.app.AppCompatActivity import android.os.Bundle class MainActivity : AppCompatActivity() < override fun onCreate(savedInstanceState: Bundle?) < super.onCreate(savedInstanceState) setContentView(R.layout.activity_main) >>
Add SplashScreen Activity as Launch page in manifest
Add the below code in manifets.xml file under application tag.
That’s it! Now run the project!
The full source code is available here.
Contribute to kotlincodes/Android-SplashScreen-with-Kotlin development by creating an account on GitHub.
How to add Splash Screen in Android using Kotlin
The splash screen is a screen that appears before the main app. The purpose of this screen is to give time for the app to load without making the user stuck on a black screen waiting without any response.
Do I need to have a Splash Screen on my app?
If your app is simple and it’s not that big that needs time to load then you don’t need to have a Splash Screen. But my opinion is that when an app has a Splash Screen, even it doesn’t need it, it looks more professional than an app that hasn’t.
Creating the SplashScreen.kt class
First, create a Kotlin class with the name ‘SplashScreen’
Creating the Splash Screen’s layout
Now let’s create our layout by going to the res folder and right-click on the layout folder and go New>Layout resource file. Give it the name splash_screen, save it, and paste the following code inside:
LinearLayout android:id="@+id/splash_bg" xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorPrimary" android:gravity="center"> ImageView android:id="@+id/splash_logo" android:layout_width="150dp" android:layout_height="150dp"/>
LinearLayout>Code language: HTML, XML (xml)
In our example, we have a background layout with a color and an ImageView on the center of the screen with a size of 150dp x 150dp.
Setting the Splash screen as the first screen of our app
Now we need to make our Splash screen be the first screen when our app starts. To do that, we need to go to the AndroidManifest.xml file of our project and change the MainActivity to SplashScreen like that:
manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.johncodeos.splashscreenexample"> 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">
activity android:name=".SplashScreen" android:label="@string/app_name" android:theme="@style/Theme.Transparent"> intent-filter> action android:name="android.intent.action.MAIN" /> action android:name="android.intent.action.VIEW" /> category android:name="android.intent.category.LAUNCHER" /> intent-filter> activity> activity android:name=".MainActivity" android:label="@string/app_name" android:theme="@style/AppTheme"> activity> application> manifest>Code language: HTML, XML (xml)
As you can see, after we replaced MainActivity with SplashScreen (lines 13-23), we added our MainAcivity as a normal activity (lines 25-28)
You also may have noticed, that the Splash screen’s activity uses a theme called Theme.Transparent that we don’t have yet. Let’s go and add it!
Adding the Splash screen’s theme
Go to your styles.xml file and paste the following code inside your
resources>
style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar"> item name="colorPrimary">@color/colorPrimary item> item name="colorPrimaryDark">@color/colorPrimaryDark item> item name="colorAccent">@color/colorAccent item> style> style name="Theme.Transparent" parent="Theme.AppCompat.Light.NoActionBar"> item name="android:windowNoTitle">true item> item name="android:windowActionBar">false item> item name="android:windowFullscreen">true item> item name="android:windowContentOverlay">@null item> item name="android:windowBackground">@android:color/black item> style> resources>Code language: HTML, XML (xml)
This will make our splash screen to be in full screen without the status bar.
Adding Timer for the Splash Screen
In the final step, we have to add the timer for our Splash Screen. After the timer goes off, it will open the MainActivity. Let’s go and add the following code to our SplashScreen.kt file:
class SplashScreen : AppCompatActivity() < override fun onCreate(savedInstanceState: Bundle?) < super.onCreate(savedInstanceState) setContentView(R.layout.splash_screen) findViewById(R.id.splash_logo).setImageResource(R.drawable.splash_screen_logo) val homeIntent = Intent(this@SplashScreen, MainActivity::class.java) Handler(Looper.getMainLooper()).postDelayed(< //Do some stuff here, like implement deep linking startActivity(homeIntent) finish() >, SPLASH_TIME_OUT.toLong()) > companion object < const val SPLASH_TIME_OUT = 2000 > >
Code language: Kotlin (kotlin)
In our example, the Splash screen will finish after 2000 milliseconds (2 sec). This is a good amount of time for a Splash screen. During this time you can initialize deep linking, app shortcuts e.t.c
Note: If your app uses backend, do not initialize the backend here. If the app is running in the background for a long time and the user opens it again, it may crash. It’s safer to add it in the Application() (or MultiDexApplication()) file.
If you have any questions, please feel free to leave a comment below
Building Splash Screen natively, Android 12, Kotlin
It is the first view that is shown to a user as soon as you tap on the app icon. If you notice a blank white screen (for a
short moment) after tapping on your favourite app, it means it doesn’t have a splash screen.
Why/When Do I Need It?
- When we want to download data before users start using the app.
- If we want to promote app branding and display your logo for a longer period of time, or just have a more immersive experience that smoothly takes you from the moment you tap on the icon to whatever the app has to offer.
Until now, creating a splash screen was never straightforward and always required some amount of boilerplate code added to the application, like creating SplashActivity with no view, adding a timer for branding promotion purposes, etc. With SplashScreen API, all of this is set to go.
Show Me the Code
Step 1: Creating a Theme
Even for the new SplashScreen API, we need to create a theme but in the value-v31 folder as a few parameters are supported only in Android 12. Therefore, create a folder named value-v31 under res folder and add theme.xml to it.
And before that, let’s break our splash screen into pieces for simplification.
- Point 1 represents the icon of the screen.
- Point 2 represents the background colour of the splash screen icon.
- Point 3 represents the background colour of the splash screen.
- Point 4 represents the space for branding logo if needed.
Now, let’s assign some values to the corresponding keys that describe the different pieces of the splash screen.
name="SplashActivity" parent="Theme.AppCompat.NoActionBar"> name="android:windowSplashScreenBackground">#FFFFFF name="android:windowSplashScreenIconBackgroundColor">#000000 name="android:windowSplashScreenAnimatedIcon">@drawable/ic_realm_logo_250 name="android:windowSplashScreenBrandingImage">@drawable/relam_horizontal
In case you want to use an app icon (or don’t have a separate icon) as windowSplashScreenAnimatedIcon , you ignore this
parameter and by default, it will take your app icon.
Tips & Tricks: If your drawable icon is getting cropped on the splash screen, create an app icon from the image
and then replace the content of windowSplashScreenAnimatedIcon drawable with the ic_launcher_foreground.xml .For windowSplashScreenBrandingImage , I couldn’t find any alternative. Do share in the comments if you find one.
Step 2: Add the Theme to Activity
Open AndroidManifest file and add a theme to the activity.
android:theme="@style/SplashActivity">
In my view, there is no need for a new activity class for the splash screen, which traditionally was required.
And now we are all set for the new Android 12 splash screen.
Adding animation to the splash screen is also a piece of cake. Just update the icon drawable with
AnimationDrawable and AnimatedVectorDrawable drawable and custom parameters for the duration of the animation.
name="android:windowSplashScreenAnimationDuration">1000
Earlier, I mentioned that the new API helps with the initial app data download use case, so let’s see that in action.
In the splash screen activity, we can register for addOnPreDrawListener listener which will help to hold off the first
draw on the screen, until data is ready.
private val viewModel: MainViewModel by viewModels() override fun onCreate(savedInstanceState: Bundle?) super.onCreate(savedInstanceState) addInitialDataListener() loadAppView() > private fun addInitialDataListener() val content: View = findViewById(android.R.id.content) // This would be called until true is not returned from the condition content.viewTreeObserver.addOnPreDrawListener return@addOnPreDrawListener viewModel.isAppReady.value ?: false > > private fun loadAppView() binding = ActivityMainBinding.inflate(layoutInflater) setContentView(binding.root)
Tips & Tricks: While developing Splash screen you can return false for addOnPreDrawListener , so the next screen is not rendered and you can validate the splash screen easily.
Summary
I really like the new SplashScreen API, which is very clean and easy to use, getting rid of SplashScreen activity altogether. There are a few things I disliked, though.
- The splash screen background supports only single colour. We’re waiting for support of vector drawable backgrounds.
- There is no design spec available for icon and branding images, which makes for more of a hit and trial game. I still couldn’t fix the banding image, in my example.
- Last but not least, SplashScreen UI side feature( theme.xml ) is only supported from Android 12 and above, so we can’t get rid of the old code for now.
You can also check out the complete working example from my GitHub repo. Note: Just running code on the device will show you white. To see the example, close the app recent tray and then click on the app icon again.
Hope this was informative and enjoyed reading it. Do share your queries in the comment below.