Android developers splash screen

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:

1. Check if the splash screen was not displayed, otherwise we just set content view
2. Get a reference to the window background and start the crossfade transition
3. 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:

1. Check if the splash screen was not displayed, otherwise we manually set the theme and the content view
2. Install the splash screen and listen for the ExitAnimation event
3. 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.

Источник

Android Splash Screen Tutorial (Native and Flutter)

Android splash screen is normally used to show a logo while the application is loading. It could be implemented in two ways, one method has a layout and the other doesn’t has a layout. Android Splash Screen according to Google should not contain any layout and its true a splash screen is supposed to show something to the user while the application opens, using a layout will not allow you to set it during the loading but after loading just like an activity. The time a mobile phone takes to load an applications is meant to be used as splash screen. But some people needs a layout to make some attractive designs on the splash screen therefore we are going to discuss both the methods of implementing splash screen.

Android Splash Screen with a Layout

Let’s see how to implement an android splash screen with a layout file. But remember this is not the right way to implement splash screen, still if you need a layout then this is the only way. Watch the video and follow the steps, all the programs are available below so that you can copy and paste them.

Main Steps for implementing Android Splash Screen:

1. Create a new activity named SplashScreen.
2. Go to Android – app – New – Activity – Empty Activity.
3. Design the XML part, see the video.
4. Set the timer in the java file.
5. Set the activity as launcher on the AndroidManifest.xml file.

XML Part:

XML part is used to design the Splash Screen part. We are using an image view on an empty activity. XML is really simple and anyone could easily understand it. You could design it according to your needs.

Java Part:

Java part is used for setting the timer for Splash Screen. We just need a very few line of codes for setting the timer. You could adjust the timer accordingly.

Manifest File

Setting the splash screen as the launcher in manifest file.

Download Source Code and Demo Application

All the exported source code files from android studio for Android Splash Screen is provided, you could download and check it.

Android Splash Screen With Android Studio — Source Code

If you like to see the demo of the splash screen, you could easily download the APK file and check.

Android Splash Screen With Android Studio — Demo Apk

Now that you have seen how to implement splash screen with a layout, lets take a look at the way to implement splash screen the right way it is supposed to be.

Android Splash Screen in the right way

Splash screens are supposed to be simple and should not use a timer as well. Why should you make your users wait even after your application has loaded completely. Setting a timer for splash screen is like that, you are making your users wait even after you application has completely loaded and that’s a waste of time for no use. The right way to implement splash screen does not contain a layout or a timer. So lets take a look at the way to implement android splash screen in the right way.

Main Steps for implementing Android Splash Screen in right way

1. Create a drawable file for the splash screen window background.
2. Add the missing colors and files.
3. Set

Drawable Files background_splash.xml

The image codeseasysplashscreen and the color white will show error, replace the logo with your logo. Just paste the logo file in drawable folder and change the logo in the background_splash.xml file also. Also add the color white to the color.xml file. For that go to res – values – colors.xml then add the below line of code.

Splash Screen the Right way Drawable Files

Colors.xml File

Adding the color white to he colors.xml file

Style.xml File

Setting the theme that the splash screen will be having also setting the background image.

Java File

Here you could decide whether to set a timer or to do it in the right way. Lets see how to do it in the right way with out a timer.

Now lets add a timer. You could adjust the time according to your wish (3000 means 3 seconds).

Manifest File

Setting the splash screen as the launcher in manifest file and also setting the theme for the splash screen.

Download Source Code and Demo Application

Download the full source code for reference.

Источник

New Splash Screen In Android

A better way to display Android Splash Screen. #Android12

🚣 Hi, In this article we learn to implement splash screen in android. From OLD traditional way to NEW modern way.

Introduction

Android Splash Screen usually the first screen that is displayed to the user when an app is not fully ready to display content.

How the splash screen works

When a user launches an app while the app’s process is not running (a cold start) or the Activity has not been created (a warm start), the following events occur. (The splash screen is never shown during a hot start.)

1. The system shows the splash screen using themes and any animations that you’ve defined.

2. When the app is ready, the splash screen is dismissed and the app is displayed.

Now let’s dive in,

Initializing Splash Activity

First, To launch the activity as splash screen we just need to add the action main and category launcher to your activity in AndroidManifest.xml

Traditional Approach

The old way,

We used to pause the user interaction for like 2–3 sec for a splash screen to load.

UI Holding was never an option. As in Activity we used to write these horrific code… and activity used to look like shi**.

This used to work well back then & now too, but we all knew there should be something more than just waiting.

Modern Approach

With a new approach, we don’t declare a time to wait.

Step 1

First, Gather all necessary elements for splash screen like colors & logo.

Then, Create drawable placing logo as bitmap/drawable.

Step 2

In style declare a any desired theme for splash screen and set android:windowBackground attribute value to drawable we created.

The android:windowBackground attribute will show our created drawable on activity transition.

And, In AndroidManifest.xml we add our theme as.

Final Step

To hide content of splash screen layout, in activity remove setContentView(),

As to show created drawable as a transition between these splash & another activity we won’t be needing splash layout.

Here’s the source code… if you need.

Done. The modern approach is more convincing than our traditional approach.

Continue to read more on Android 12 Splash Screen

— Recently,

Android 12 adds the SplashScreen API, which enables a new app launch animation for all apps. This includes an into-app motion at launch, a splash screen showing your app icon, and a transition to your app itself.

The new experience brings standard design elements to every app launch, but it’s also customizable so your app can maintain its unique branding.

This is similar to our modern approach.

Read more at the official website.

Let’s test Splash by Upgrading to — Android 12,

After upgrading, From NoWhere, Boom A error popups and your application installation failed.

Installation did not succeed.
The application could not be installed: INSTALL_FAILED_VERIFICATION_FAILURE
List of apks:
[0] ‘…/build/outputs/apk/debug/app-debug.apk’
Installation failed due to: ‘null’

INSTALL_PARSE_FAILED_MANIFEST_MALFORMED: Failed parse during installPackageLI:

Targeting S+ (version 10000 and above) requires that an explicit value for android:exported be defined when intent filters are present”

To Fix Installation failed ?👼

Now For Splash Screen,

For testing the effects & changes let’s observe with WHITE & BLACK color background first.

Create new styles.xml or theme.xml (v31).

As mentioned, It’s similar to our modern approach.

The only Difference is , we need to remove android:windowBackground for Android 12.

By default your launcher icon will act as a splash screen view.

No need to create drawable. Just add your launcher icon & Kaboom it’s a splash screen logo.

As documented, SplashScreen uses the windowBackground of your theme if it’s a single color and the launcher icon. The customization of the splash screen is done by adding attributes to the app theme.

But it can be customized in many ways. Amazing and simple right?

Источник