A splash screen is the first screen of the app when it is opened. It is used to display some basic introductory information such as the company logo, content, etc just before the app loads completely. In this article, we will follow the best practice to create a Splash screen that is without creating an extra activity for it and it will be gone as soon as the activity loads. Below is a sample video to show what we are going to build. You can use Java/Kotlin for this project.
Note:
- To create a splash screen in Java: Creating a Splash Screen
- To create a splash screen in Kotlin: How to Create a Splash Screen in Android using Kotlin?
- To create an animated splash screen: How to Create an Animated Splash Screen in Android?
Step by Step Implementation
Step 1: Create a new project
To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. You can select Kotlin/Java as the programming language.
Step 2: Create a new drawable file and name it “splash_image.xml”
Go to res -> drawable -> splash_image.xml and the following code. Comments are added.
<? xml version = "1.0" encoding = "utf-8" ?>
<!--Add the following code
add the drawable color to white-->
< item android:drawable = "@color/white" />
<!--Add the logo that you want to display and its gravity to centre-->
< item android:drawable = "@drawable/gfg_logo" android:gravity = "center" />
</ layer-list >
|
Step 3: Add a new style in the themes.xml file
Go to res -> values -> themes.xml add a new style and name it “splashScreenTheme“. This will hold the information that we want to show on our splash screen such as WindowBackground and status bar color.
<!--Create a new style and name it splashScreenTheme and add the following code-->
< style name = "splashScreenTheme" parent = "Theme.MaterialComponents.Light.NoActionBar" >
< item name = "android:windowBackground" >@drawable/splash_image</ item >
< item name = "android:statusBarColor" >@color/black</ item >
</ style >
<!-- Default Code do not change it.
we will use it as our theme after
the aplash screen is shown-->
<!-- Base application theme -->
< style name = "Theme.SplashAPIGFG" parent = "Theme.MaterialComponents.DayNight.NoActionBar" >
<!-- Primary brand color-->
< item name = "colorPrimary" >#2F8D46</ item >
< item name = "colorPrimaryVariant" >#2F8D46</ item >
< item name = "colorOnPrimary" >@color/white</ item >
<!-- Secondary brand color. -->
< item name = "colorSecondary" >#2F8D46</ item >
< item name = "colorSecondaryVariant" >@color/teal_700</ item >
< item name = "colorOnSecondary" >@color/black</ item >
<!-- Status bar color. -->
< item name = "android:statusBarColor" tools:targetApi = "l" >?attr/colorPrimaryVariant</ item >
<!-- Customize your theme here. -->
</ style >
</ resources >
|
Step 4: Add the style to the manifest file
<? xml version = "1.0" encoding = "utf-8" ?>
package = "com.introidx.splashapigfg" >
<!--In the theme add the style that we just created-->
< application
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/splashScreenTheme" >
< activity android:name = ".MainActivity" >
< intent-filter >
< action android:name = "android.intent.action.MAIN" />
< category android:name = "android.intent.category.LAUNCHER" />
</ intent-filter >
</ activity >
</ application >
</ manifest >
|
Step 5:Working with the MainActivity.kt file
Go to the MainActivity.kt file and refer to the following code. Below is the code for the MainActivity.kt file. Here set the theme that we want to display after the splash screen is shown.
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
class MainActivity : AppCompatActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
super .onCreate(savedInstanceState)
// add the default theme here which we want
// to display after the splash screen is shown
setTheme(R.style.Theme_SplashAPIGFG)
setContentView(R.layout.activity_main)
}
} |
Note: activity_main.xml file just has a Text View to display a message.
<? xml version = "1.0" encoding = "utf-8" ?>
< androidx.constraintlayout.widget.ConstraintLayout
android:layout_width = "match_parent"
android:layout_height = "match_parent"
tools:context = ".MainActivity" >
< TextView
android:layout_width = "wrap_content"
android:layout_height = "wrap_content"
android:text = "This is test app for Splash Screen"
app:layout_constraintBottom_toBottomOf = "parent"
android:textStyle = "bold"
android:textSize = "22sp"
android:textColor = "@color/black"
app:layout_constraintLeft_toLeftOf = "parent"
app:layout_constraintRight_toRightOf = "parent"
app:layout_constraintTop_toTopOf = "parent" />
</ androidx.constraintlayout.widget.ConstraintLayout >
|
Output: