Android Splash Screen with Kotlin

There are different opinions on whether having a splash screen on your Android application or not.

Personally, I think splash screens are a good place where you can showcase your app’s nice design and give your users a good first impression.

So, this is how I’ve been implementing splash screens on my recent Android apps with Kotlin.

Static vs Animated

I’ve used both static and animated splash screens and here are some thoughts.

Static

  • Showed only in the launching of your app before onCreate() is called.
  • You’re not wasting your users time.
  • Not intended to run operations while the splash screen is shown.

Animated

  • You can show a cool animation and custom design.
  • Flexibility to perform some operations while the animation finishes.
  • Users can get bored if the animation is useless or if it takes too long.

Static Android Splash Screen

one-breath-splash

1.

Create the drawable file that we will use as background in the entry activity, by using a background, the app will show it without having to inflate a layout file.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
<item
android:drawable="@color/white"/>
<item
android:left="20dp"
android:right="20dp">
<bitmap
android:gravity="center"
android:src="@drawable/ic_logo"/>
</item>
</layer-list>

view raw
splash_screen.xml
hosted with ❤ by GitHub

2.

Create a theme in the styles file with no action bar that uses the splash drawable as the background to set it in the entry activity.

<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="SplashTheme" parent="Theme.AppCompat.NoActionBar">
<item name="android:windowBackground">@drawable/splash_screen</item>
</style>
</resources>

view raw
styles.xml
hosted with ❤ by GitHub

3.

Set the new style as a theme for the splash activity in your app manifest.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.isscroberto.onebreath">
<application
android:name=".OneBreathAndroid"
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=".splash.SplashActivity"
android:theme="@style/SplashTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
<activity
android:name=".main.BreatheActivity"
android:theme="@style/AppTheme.NoActionBar"
android:screenOrientation="portrait">
</activity>
</application>
</manifest>

view raw
AndroidManifest.xml
hosted with ❤ by GitHub

4.

Add the code to navigate to the next activity as soon as the app has finished loading.

package com.isscroberto.onebreath.splash
import android.content.Intent
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import com.crashlytics.android.Crashlytics
import com.isscroberto.onebreath.main.BreatheActivity
class SplashActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
val intent = Intent(this, BreatheActivity::class.java)
startActivity(intent)
finish()
}
}

view raw
SplashActivity.kt
hosted with ❤ by GitHub

Animated Android Splash Screen

power-nap-splash

When I use animated splash screens I like to keep showing the static part of the splash screen on the initialization so I repeat steps 1, 2 and 3 from above and just add the animation functionality.

4.

For the animated splash screen, we will inflate a layout with the element or elements we want to animate. In this case, I’m just animating a textview.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/textTitle"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:textAlignment="center"
android:layout_centerVertical="true"
android:textAppearance="@style/Display3"
android:paddingTop="200dp"
android:text="@string/app_name"/>
</RelativeLayout>

view raw
activity_splash.xml
hosted with ❤ by GitHub

5.

Now we need to modify the splash activity to enable the animation and perform some loading operations in the meantime. Here’s how my splash activity looks like.

package com.isscroberto.powernap.splash
import android.animation.Animator
import android.animation.ValueAnimator
import android.content.Intent
import android.support.v7.app.AppCompatActivity
import android.os.Bundle
import com.isscroberto.powernap.R
import com.isscroberto.powernap.start.StartActivity
import android.view.animation.BounceInterpolator
import kotlinx.android.synthetic.main.activity_splash.*
class SplashActivity : AppCompatActivity() {
val ANIMATION_DURATION:Long = 1000
override fun onCreate(savedInstanceState: Bundle?) {
super.onCreate(savedInstanceState)
setContentView(R.layout.activity_splash)
// Start intro animation.
startAnimation()
}
private fun startAnimation() {
// Intro animation configuration.
val valueAnimator = ValueAnimator.ofFloat(0f, 1f)
valueAnimator.addUpdateListener {
val value = it.animatedValue as Float
textTitle.scaleX = value
textTitle.scaleY = value
}
valueAnimator.interpolator = BounceInterpolator()
valueAnimator.duration = ANIMATION_DURATION
// Set animator listener.
val intent = Intent(this, StartActivity::class.java)
valueAnimator.addListener(object : Animator.AnimatorListener {
override fun onAnimationRepeat(p0: Animator?) {}
override fun onAnimationEnd(p0: Animator?) {
// Navigate to main activity on navigation end.
startActivity(intent)
finish()
}
override fun onAnimationCancel(p0: Animator?) {}
override fun onAnimationStart(p0: Animator?) {}
})
// Start animation.
valueAnimator.start()
}
}

view raw
SplashActivity.kt
hosted with ❤ by GitHub

That’s it, please share your thoughts on Android splash screens and your comments on how to improve this implementation.

Posted in Dev

Leave a Reply

Fill in your details below or click an icon to log in:

Gravatar
WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s