Splash Screen

Splash Screen Tutorial in Android with Example

The splash screen is mainly the first screen when the application is opened. It is a permanent screen that is displayed for a period of time and is usually displayed for the first time when the application is launched.

A splash screen is a graphical control element that consists of a window with a picture, a logo.  While a game or software is launching, a splash screen may display.

Although the primary goal of the Android splash screens is to create a smooth transition into the program while it’s loading, there’s a limit to how long consumers are willing to wait. As a result, regardless of how impressive your entrance video is, it’s advised that a splash screens animation last no more than 2 or 3 seconds.

effective ways to use splash screens

  1. Keep the duration under 3 seconds.
  2. For apps that are likely to be opened multiple times per day, reduce this to 1 second.
  3. When deciding on a design, go for simple and bold over complex and intricate.
  4. The same is true for animation; overly complicated sequences will only appear showy and will likely give users the impression that their time is unimportant.

Preview:

<– Splash Screen Example

File: AndroidManifest.xml

–>Set the MainActivity as launcher activity in your AndroidMainifest file

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.sagar.splashscreen">

    <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/Theme.Splashscreen">
        <activity android:name=".MainActivity2">

        </activity>
        <activity android:name=".MainActivity">//set the launcher activity//------------------------------
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <meta-data
            android:name="preloaded_fonts"
            android:resource="@array/preloaded_fonts" />
    </application>

</manifest>

File:MainActivity.kt

–>In MainActivity.kt file set the screen to full screen or hide the action bar and initialize the variable and use a handler to set the timer for the splash screen

package com.sagar.splashscreen

import android.content.Intent
import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle
import android.os.Handler
import android.view.View
import android.view.animation.AnimationUtils
import android.widget.ImageView
import android.widget.TextView

class MainActivity : AppCompatActivity() {

    private  val SPLASH_SCREEN=3000
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        // Hide the status bar.
        window.decorView.systemUiVisibility = View.SYSTEM_UI_FLAG_FULLSCREEN

        actionBar?.hide()
        val topAnim=AnimationUtils.loadAnimation(this,R.anim.top_animation)
        val bottomAnim=AnimationUtils.loadAnimation(this,R.anim.bottom_animation)

        val image=findViewById<ImageView>(R.id.imageView)
        val logo=findViewById<TextView>(R.id.textView)
        val slogan=findViewById<TextView>(R.id.textView2)


        image.animation=topAnim
        logo.animation=bottomAnim
        slogan.animation=bottomAnim


//using handler//
        val handler = Handler()
        handler.postDelayed(Runnable {
            val intent=Intent(this,MainActivity2::class.java)
            startActivity(intent)
            finish()
        }, SPLASH_SCREEN.toLong())







    }
}

File: activity_main.xml

->In activity_main.xml file add the two ImageView and a TextView for displaying a splash screen

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?android:attr/colorFocusedHighlight"
    android:scrollbarSize="30sp"
    tools:context=".MainActivity">


    <ImageView
        android:id="@+id/imageView"
        android:layout_width="match_parent"
        android:layout_height="270dp"
        android:layout_marginTop="50dp"
        android:src="@drawable/well"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <TextView
        android:id="@+id/textView"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginTop="116dp"
        android:fontFamily="@font/bangers"
        android:gravity="center_horizontal"
        android:text="Join Us Now"
        android:textAlignment="center"
        android:textSize="70sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/imageView" />

    <TextView
        android:id="@+id/textView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:fontFamily="sans-serif-medium"
        android:text="Welcome to Our Community"
        android:textSize="20sp"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/textView" />


</androidx.constraintlayout.widget.ConstraintLayout>

File: MainActivity2.kt

–> In file, MainActivity2.kt keep it as it is

package com.sagar.splashscreen

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class MainActivity2 : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main2)
    }
}

File:activity_main2.xml

->In activity_main2.xml file add an ImageView and a TextView.

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity2">

    <ImageView
        android:id="@+id/imageView2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:srcCompat="@drawable/andro" />

    <TextView
        android:id="@+id/textView3"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginStart="84dp"
        android:layout_marginLeft="84dp"
        android:layout_marginTop="52dp"
        android:text="Developers Dome"
        android:textColor="@color/white"
        android:textSize="30sp"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.0"
        app:layout_constraintStart_toStartOf="@+id/imageView2"
        app:layout_constraintTop_toBottomOf="@+id/imageView2"
        app:layout_constraintVertical_bias="0.418" />
</androidx.constraintlayout.widget.ConstraintLayout>

Animation:top_animation.xml

–> Add the code given below for animation in res/anim folder

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">

    <translate
        android:fromXDelta="0%"
        android:fromYDelta="-100%"
        android:duration="1000"/>
    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="1000"/>
</set>

Animation:bottom_animation.xml

–> Add the code given below for animation in res/anim folder

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
    <translate
        android:fromXDelta="0%"
        android:fromYDelta="100%"
        android:duration="1000"/>
    <alpha
        android:fromAlpha="0.1"
        android:toAlpha="1.0"
        android:duration="1000"/>
</set>
  • We hope that this guide will assist you in quickly creating a simple Splash-screen Android app. If you have any problems, please post them in the comments section and we will gladly assist you.

This Post Has One Comment

Leave a Reply