Code and Life
As one becomes aware of the decline of violence, the world begins to look different. The past seems less innocent; the present less sinister.
All the research and data concentrated in this book makes me optimistic about our evolution as humans and the direction we’re heading. Let’s keep it this way.
Faith in humanity restored.
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.
I’ve used both static and animated splash screens and here are some thoughts.
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> |
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> |
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> |
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() | |
| } | |
| } |
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.
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> |
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() | |
| } | |
| } |
That’s it, please share your thoughts on Android splash screens and your comments on how to improve this implementation.