- 🕐 Revisited — 📚 A Guide on Splash Screen in Android in 2020
- 👀 A fresh look on the splash screen in Android in Kotlin and Coroutines
- 🎨 Using Activity Theme
- ⏰ Using Handler / Runnable / Timer
- 🎯 Using Kotlin Coroutines
- 💻 Show Me The Code
- wajahatkarim3/SplashScreen
- github.com
- 📄 Making The Decision
- Add Push Notifications to Your Android Chat App Using Kotlin
- November 24, 2019
- 🚀 Launching Activities in Easier Way Using Kotlin Extensions 💻
- March 4, 2019
- Meet the Jetpack Splashscreen API: a definitive guide for splash screens in Android
- Simple things first
- Showing a splash screen (Old way)
- Fading out the logo
- Showing the splash screen using Core SplashScreen API
- Core SplashScreen API + Animations
- Showing the splash screen using Core SplashScreen API with Jetpack Compose
- Final thoughts
🕐 Revisited — 📚 A Guide on Splash Screen in Android in 2020
👀 A fresh look on the splash screen in Android in Kotlin and Coroutines
Splash screen is a very popular methodology in Android app development. Almost all major apps contain some sort of splash screen for many different reasons from brand awareness to loading heavy resources before app start. Some apps even add splash screens just because everyone else is adding it to follow the paradigm, even though their apps don’t need it.
Its a very debatable topic on whether apps should contain splash screen or not as this wastes few (important) seconds of user’s time. In this article, we will not be focusing on that debate. Rather, this topic is about technical details on creating splash screens with the modern Android development approaches followed in 2019 or upcoming 2020. So, without further ado, let’s start ordering from the old way to new way.
🎨 Using Activity Theme
When any app is launched, Android system will try to draw the first screen as fast as it can. But for the new launches, this may take few moments. During these moments, Android by default shows a empty placeholder screen filled with your app’s windowBackground color. You can extend this placeholder from just a color to your splash screen using the Activity theme approach.
Create a separate theme for your splash Activity and set its windowBackground to your custom splash drawable.
You can see that we have set windowBackground to our splash screen drawable in file splash_drawable.xml file. Here’s that file.
Now, set this theme to your splash Activity in the AndroidManifest.xml file.
And this will give you an Amazon-like splash screen.
Now, whatever time Android System is supposed to show a black placeholder screen while starting up your app and allocating memory resources for it, the system will show this screen instead of that placeholder. And once your app is ready and launched, then still you will be seeing this. And your whole layout passed in setContentView() method will be drawn on top of this screen. So, you will have to reset your original app’s theme in your Activity . You can do this easily by adding setTheme() before the setContentView() method call in your Activity class.
Now, as your app’s ready, it will change to your original app’s theme like the normal apps do. The code for this approach is available in the SplashThemeActivity class at the Splash Screen Demo repository.
Overall, this approach is good from the user experience as it doesn’t waste time. It only takes time to load the app. So, if your app is already in the memory, you won’t see the splash theme much. This approach is applied in Google’s apps a lot.
But the problems with this approach are that if your splash contains fancy animations or even a simple loading progress bar, you can’t add this. You can only add an image through tag in your theme and change the position of it on the screen.
If you want to add multiple starting points based on some logic, like whether to show login or the home screen, then this approach can work a little trick. Instead of setting splash theme to your home screen, create a separate dedicated Activity for your splash and apply the theme to it. Then write your business logic in that Activity . You can check the the code in SplashLogicActivity.kt class at the Splash Screen Demo repository.
⏰ Using Handler / Runnable / Timer
A huge number of apps follow this approach to create splash screen. The idea is to create a separate Activity for splash screen and then launch the main screen either fixed or based on some logic after some scheduled time of like 2–3 seconds. This splash screen doesn’t do anything except show the user some screen and make user wait for few seconds. This is achieved by commonly using the Handler and Runnable classes.
This is quite similar to the separate Activity with the theme approach. But we get many advantages in this method over the themed activity. You can add animations, or any sort of customizations in your layout for the splash screen. You can also add business logic to redirect user to any specific screen. But there’s a problem. The code for this is available in CommonSplashActivity at the Splash Screen demo repository.
If the user presses the hard back button while splash screen, it won’t cancel the Handler instance, and you will see some screen popup randomly because it was scheduled to launch. This can cause memory leak or if you’re storing some data in memory in your splash screen, then that data will be lost. Because Android system will launch your home screen as a new task.
One way to fix this is using the Timer class because we can cancel the Timer instance in either onPause() or onDestroy() methods to stop the scheduled launch of the home / login screens. You can get check this code in TimerSplashActivity at the Splash Screen demo repository.
This approach will avoid you the memory leaks or the sudden popping up of the screen because timer is cancelled in onPause() and because of it the launch of home screen task is also terminated.
It must be noted that Timer creates a whole new thread in background. And you cannot interact with UI elements, View objects etc. in this thread. For example, you cannot update animations of views, or change TextView ‘s text values etc in the TimerTask object. Memory-wise this is a heavy operation approach and due to thread-switching it can also be slow.
I have seen some places where a Thread is used instead of timer. And Thread.sleep() is used for delay purposes. I would highly recommend you to avoid this method as this will not only cause memory leaks and is almost similar to the previous Handler approach we discussed.
🎯 Using Kotlin Coroutines
Yes, you read that right. I would only recommend this method if you already have Kotlin Coroutines in your project or you plan to add in near future. Because it wouldn’t be a good approach to just add Kotlin Coroutines for splash screen.
Conceptually, this is a lot similar to Timer approach, but we will use coroutines, instead of Timer objects. Here’s the code for this. (You can also check this code in the SplashActivity in the Splash Screen repository on Github.
Since the activityScope we created is of Dispatchers.Main , so this will run on the main UI thread. And being a coroutine, there will be no thread switching as coroutines run on the same thread. This will help in the performance speed as opposed to the Timer approach.
As the Activity gets paused or destroyed, the coroutine will be cancelled automatically. This will avoid the sudden popping of the home/login screen. And surprisingly, since this coroutine is running on Dispatchers.Main , we can easily update UI elements, view animations etc. without any tension.
Overall, the coroutines approach is fast, reliable, less-memory consuming, gives the advantage of main UI thread access, and supports the custom launch logic.
💻 Show Me The Code
The code is available on my Github profile at Splash Screen repository. It contains all the splash screen approaches discussed in this article in separate Activity classes. You need to launch any of the Activity as launcher in AndroidManifest.xml to check the behavior of that approach.
wajahatkarim3/SplashScreen
A demo project showcasing different methods to create splash screen in Android and discusses the det.
github.com
📄 Making The Decision
The best approaches are theme approach and coroutines approach.
If your app has fixed home screen, then use the splash theme on that home screen.
If your app needs business logic to decide the home screen, use the separate Activity with theme approach.
If your app has fancy animations and / or complex splash UI, then create a separate Activity and use Kotlin Coroutines. If your app doesn’t intend to use Coroutines, then you should switch it the the Handler approach, but be aware of the memory leaks.
Finally, do not use Timer , or Thread at all for splash screen and try to avoid Handler approach too.
If you liked this article, you can read my new articles below:
Add Push Notifications to Your Android Chat App Using Kotlin
This story was originally published with collaboration with CometChat Pro, and Alex Booker on their tutorials blog. For any kind of chat apps, notifications are the driver behind whole chat concept.
November 24, 2019
🚀 Launching Activities in Easier Way Using Kotlin Extensions 💻
Kotlin Extensions for simpler, easier and fun way of launching Activities in Android Reposted on my Medium profile. Few days ago, I was reading this awesome article by Elye about a Kotlin keyword reified .
March 4, 2019
7 years experience. 💻 Creator of various Open Source libraries on Android . 📝 Author of two technical books and 100+ articles on Android. 🎤 A passionate Public Speaker giving talks all over the world.
Источник
Meet the Jetpack Splashscreen API: a definitive guide for splash screens in Android
Splash screens, also called launch screens, are the screens shown by the app as it loads, during the app’s startup. They exist to provide a momentary brand exposure or improve the user experience by showing a preview of the app as it starts, which can reduce the user’s perceived load time.
Branded and preview splash screens as in Material Design docs
On many projects I’ve worked on, in addition to showing the splash screen, we had to animate the transition between splash and first app screen. Depending on the animation type and how we’re showing the first app views, we can have jank or a perceivable delay between the animations. So, we have to choose the right approach accordingly to the use case.
In this article you’ll see how animated splash screens are created in Android and how this should be done now that we have Jetpack’s Core SplashScreen, which backports Android 12 SplashScreen API back to Android Marshmallow (API 23).
Suppose we have to implement the following branded splash screen for an Android app:
Note that we start with a brand image, fade it out and then begin a slide down transition in the start screen. This use case will let us exercise multiple techniques in splash screen display, despite having simple transitions in the design. The animations must run sequentially and a long delay or jank between them is not acceptable.
Simple things first
Let’s start simple: showing what happens in Android when you don’t set up a splash screen. After creating an ‘Empty Activity Project’ in Android Studio, the main activity layout was adjusted to have the same design as the start screen reference. Nothing was made regarding the splash screen.
This is how it’s displayed up to API level 30:
As we didn’t add nothing to set up a splash screen yet, a black screen is shown while the main activity is loading.
Important: On an Android 12, a static branded splash screen was automatically displayed, using a centered app icon without any effort at all. Nice improvement!
Automatic static splash screen on Android 12
To repeat this step, clone the following branch in Github’s repo: github.com/tgloureiro/animated_splashscreen_android/tree/step1_no_splash
Showing a splash screen (Old way)
The traditional way of defining a splash screen in Android, is setting a window background to the the activity being launched. As the content is not attached to it yet, the window background is fully visible while the activity is loading. After it loads, content view is set inside the onCreate() method and it’s views starts being rendered.
Therefore, to show the splash screen we have to set up the window background in the theme being used by the activity:
Exit fullscreen mode
If we need the splash screen to have a logo centered over some background drawable, we can use a LayerDrawable , that allows us to specify a list of drawables that is drawn in the order they’re declared. In this example, we have a flat colored background with the logo centered in the screen. The use of android:gravity informs the platform to center the second drawable in the middle of the screen.
Exit fullscreen mode
For the splash background, we can use any type of drawable. For this example, we’ll use a solid color. The color can be specified directly in the layer list, instead of pointing to another Drawable as we did here
Exit fullscreen mode
This is the old way of doing a splash screen and it’s recommended up to API Level 22, the ones not covered by the new Core Splash Screen API.
Fading out the logo
There’s an easy way of implementing the splash screen’s fade out after activity loading: we can have the illusion of a logo fade out making a cross-fade between the splash screen and the screen background without the logo. We can do it using a TransitionDrawable . A transition drawable allows us to define two drawable layers and easily cross-fade between them using the startTransition(int) method.
Exit fullscreen mode
We have to perform the following tasks:
- Check if the splash screen was not displayed, otherwise we just set content view
- Get a reference to the window background and start the crossfade transition
- Launch a coroutine and after waiting for the animation duration, set the content view
Exit fullscreen mode
Check how it is rendered in a phone:
To repeat this step, clone the following branch in Github’s repo: github.com/tgloureiro/animated_splashscreen_android/tree/step2_fade_out_splash
Showing the splash screen using Core SplashScreen API
The Core Splash Screen API provides a way of defining the elements we have in the Splash Screen. To setup a splash screen, you have to do the following steps:
1- Setup a style with Theme.SplashScreen as a parent, in themes.xml
Exit fullscreen mode
2- Setup windowSplashScreenBackground, windowSplashScreenAnimatedIcon as the background and the centered logo in the screen
Exit fullscreen mode
3- Setup the theme to be displayed in activity after the splash screen
Exit fullscreen mode
4- In build.gradle, change your compileSdkVersion to «android-S» (to be changed to apiLevel 31 with the release of Android 12) and include the library in dependencies.
Exit fullscreen mode
5- Finally, in the MainActivity (or the entry point for your app) you just have to call installSplashScreen() before setContentView()
Exit fullscreen mode
Very straightforward, huh? With these simple steps you’ll be showing your splash screen from API23 to Android12.
Core SplashScreen API + Animations
In Android 12, the logo itself can be animated using AnimationDrawable or AnimatedVector . The AnimationDrawable works similar to a classical animation which you have to represent
frame by frame and duration for each one. AnimatedVectorDrawable let’s you describe your animation that will be interpolated by the framework.
The backported version of the Core Splash Screen API doesn’t support animations on the logo yet. But we can implement a fadeout animation after splash’s exhibition and I’ll show how to implement it using this API.
We have to perform the following tasks:
- Check if the splash screen was not displayed, otherwise we manually set the theme and the content view
- Install the splash screen and listen for the ExitAnimation event
- Get a reference to the the logo, fade it out, remove the splash and set content view after it finishes
Exit fullscreen mode
Check how it is rendered in a phone:
To repeat this step, clone the following branch in Github’s repo: github.com/tgloureiro/animated_splashscreen_android/tree/step3_core_splash_api_fade_out
Showing the splash screen using Core SplashScreen API with Jetpack Compose
The splash steps are pretty much the same, except we use Compose’s setContent<> instead of setContentView(int) . That’s it.
The challenge here is to replace the start screen animation, originally made using MotionLayout, with one made using Compose. We can use an initially invisible AnimatedVisibility Composable and make it visible in the first pass using a LaunchedEffect. Making it visible will start the animation as described in the widget.
Exit fullscreen mode
Check how it is rendered in a phone:
To repeat this step, clone the following branch in Github’s repo: github.com/tgloureiro/animated_splashscreen_android/tree/step4_core_splash_jetpack
Final thoughts
The new Jetpack Core Splashscreen API provides a default way to create splash screens back to API23, with useful mechanisms we can use to know whether the loading ended and a way to continue showing the splash if we want to do additional work after starting the activity. The results are similar to what we had before, with the benefit of reduced boilerplate and compatibility with new Android versions.
Источник