Warmest welcome to Kotlin Splash Screen Android Tutorial.
We will create very basic and simple splash screen in android using kotlin in today’s example.
Main purpose of Android Splash Screen is to show logo and name of the application to user.
A splash screen may display start up progress to the user or to indicate branding.
Checkout the below output video first.
Step 1. Making new Kotlin Project
In android studio, create a new project. Here, at the bottom there will be two options like include c++ support and include kotlin support. You need to select include kotlin support
And select empty activity as the default activity.
Step 2. Main XML Code
Inside your activity_main.xml file, add the below source code lines
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:background="@color/colorAccent" android:gravity="center" tools:context=".MainActivity"> <TextView android:layout_width="match_parent" android:layout_height="match_parent" android:gravity="center" android:textSize="40sp" android:textColor="#fff" android:text="Splash Screen In Kotlin"/> </LinearLayout>
This XML code is creating our splash screen.
Generally, developers use some cool designed images to show case their splash screen but right now, I am just making colored screen with some text.
You can just add well designed image to make attractive splash screen.
Splash Image Size
It is general that everyone uses cool images for splash screen but you need to take care about it’s size also. Main reason for this is different screen sizes of different android devices like mobiles and tablets.
There may be a small variations among various image sizes and screen sizes.
I am going to give you a dimensions which can be used generally in most of the cases.
- LDPI:
- Portrait: 200x320px
- Landscape: 320x200px
- MDPI:
- Portrait: 320x480px
- Landscape: 480x320px
- HDPI:
- Portrait: 480x800px
- Landscape: 800x480px
- XHDPI:
- Portrait: 720px1280px
- Landscape: 1280x720px
- XXHDPI:
- Portrait: 960px1600px
- Landscape: 1600x960px
- XXXHDPI:
- Portrait: 1280px1920px
- Landscape: 1920x1280px
Above are the general specifications. If you follow this guideline, your splash image will be responsive across various screen sizes.
Step 3. Kotlin Code
In your MainActivity.kt class, write down the following source lines
import android.content.Intent import android.os.Handler import android.support.v7.app.AppCompatActivity import android.os.Bundle class MainActivity : AppCompatActivity() { /** Duration of wait */ private val SPLASH_DISPLAY_LENGTH = 2000 //splash screen will be shown for 2 seconds /** Called when the activity is first created. */ public override fun onCreate(icicle: Bundle?) { super.onCreate(icicle) setContentView(R.layout.activity_main) Handler().postDelayed({ val mainIntent = Intent(this@MainActivity, WelcomeActivity::class.java) startActivity(mainIntent) finish() }, SPLASH_DISPLAY_LENGTH.toLong()) } }
Let us understand the above lines.
First of all, see the following line
private val SPLASH_DISPLAY_LENGTH = 2000 //splash screen will be shown for 2 seconds
This line is defining one variable. It has 2000 as a value. We will use this variable in the Handler class, which will stop the compiler for 2000 units. ( 2000 units is equal to time of 2 seconds )
Now consider the following lines
public override fun onCreate(icicle: Bundle?) { super.onCreate(icicle) setContentView(R.layout.activity_main) Handler().postDelayed({ val mainIntent = Intent(this@MainActivity, WelcomeActivity::class.java) startActivity(mainIntent) finish() }, SPLASH_DISPLAY_LENGTH.toLong()) }
First of all, compiler will set the activity_main.xml as the content view.
Then it will execute the Handler and it’s postDelayed() method. Here, it is using that variable which has the 2000 as a value.
Meaning is that, compiler will wait for 2 seconds and then it will open the WelcomeActivity.
Now let us create the WelcomeActivity. For this, create a new empty activity and give it a name like WelcomeActivity.
After this, there will be two file. WelcomeActivity.kt and activity_welcome.xml
We do not need to do any change in WelcomeActivity.kt so it’s code will look like a below
import android.support.v7.app.AppCompatActivity import android.os.Bundle class WelcomeActivity : AppCompatActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContentView(R.layout.activity_welcome) } }
I have added just one change in activity_welcome.xml so it has the following code snippet
<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context=".WelcomeActivity"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_centerInParent="true" android:textAppearance="?android:attr/textAppearanceLarge" android:text="Welcome to your app"/> </RelativeLayout>
One text view is there in welcome XML file.
So, this tutorial has come to an end. Thanks for reading and happy learning !
Download Source Code From Github
Download Kotlin Android Splash Screen