Android Splash Screen With Progress Bar

A splash screen is a graphical control element consisting of window containing an image, logo and the current version of the software. Splash screen usually appears while a game or program is launching. A Splash screened are typically used by particularly large applications to notify the user that the program is in the process of loading. They provide feedback that a lengthy process is underway. Occasionally, a progress bar within the splash screen indicates the loading progress. The splash disappears when the application’s main window appears. Source: Wikipedia. Else we can use it for making the app more attractive. You can find tutorials in splash screen for android all over the internet. Only few that works without the blank screen while launching. I found a perfect example for proper splash screen from bignerdranch.com.

Progress bar is used in this example and can be changed according to the work done. We are creating two activity’s. One for displaying flash and another is the landing activity. The page after splash screen. This can be explained in four steps.

Creating the xml file for the splash screen.
Creating the theme for splash activity.
Applying the theme for splash activity.
Background tasks to be done while displaying progress bar and splash screen.

Fourth one is for class files to show progress and load next page after progress bar reach 100% .

1 – Creating XML file for the splash screen and splash activity

For this first create a xml file in the drawable. Mine is "splash.xml",ic_launcher is the splash image.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="100dp"
    android:layout_height="100dp">
    <item
        android:drawable="@android:color/background_light"/>
    <item >
        <bitmap
            android:gravity="center"
            android:filter="true"
            android:src="@drawable/ic_launcher"/>
    </item>

</layer-list>

<?xml version="1.0" encoding="utf-8"?>

<layer-list xmlns:android="http://schemas.android.com/apk/res/android"

android:layout_width="100dp"

android:layout_height="100dp">

<item

android:drawable="@android:color/background_light"/>

<item >

<bitmap

android:gravity="center"

android:filter="true"

android:src="@drawable/ic_launcher"/>

</item>

</layer-list>

Below is the xml file for Splash activity.

<?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:id="@+id/activity_splash"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    tools:context="com.logicchip.blog_7_proper_splash_screen.Splash">


    <ProgressBar
        style="?android:attr/progressBarStyleHorizontal"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="50dp"
        android:id="@+id/progressBar" />

    <TextView
        android:textSize="40sp"
        android:textColor="@android:color/holo_red_light"
        android:text="TextView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_above="@+id/progressBar"
        android:layout_centerHorizontal="true"
        android:id="@+id/textView" />
</RelativeLayout>

<?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:id="@+id/activity_splash"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:paddingBottom="@dimen/activity_vertical_margin"

android:paddingLeft="@dimen/activity_horizontal_margin"

android:paddingRight="@dimen/activity_horizontal_margin"

android:paddingTop="@dimen/activity_vertical_margin"

tools:context="com.logicchip.blog_7_proper_splash_screen.Splash">

<ProgressBar

style="?android:attr/progressBarStyleHorizontal"

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_centerHorizontal="true"

android:layout_marginBottom="50dp"

android:id="@+id/progressBar" />

<TextView

android:textSize="40sp"

android:textColor="@android:color/holo_red_light"

android:text="TextView"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_above="@+id/progressBar"

android:layout_centerHorizontal="true"

android:id="@+id/textView" />

</RelativeLayout>

2 – Creating the Theme for splash activity

Theme is an important element. Edit your styles.xml file and add the SplashTheme part.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
    </style>

    <!--splash theme start-->
    <style name="SplashTheme" parent="Theme.AppCompat.NoActionBar">
        <item name="android:windowBackground">@drawable/splash</item>
    </style>
    <!--splash theme end-->

</resources>

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

<item name="android:windowBackground">@drawable/splash</item>

</style>

</resources>

3 – Applying the theme for splash activity

Setting theme for the specified splash activity. Just edit AndroidManifest.xml file and replace the laucher activity theme with SplashTheme.

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

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity
            android:name=".Splash"
            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=".MainActivity">
        </activity>
    </application>

</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="com.logicchip.blog_7_proper_splash_screen">

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<activity

android:name=".Splash"

android:theme="@style/SplashTheme">

<intent-filter>

</intent-filter>

</activity>

</activity>

</application>

</manifest>

4 – Tasks for progress bar and loading next activity

Two activity’s are created Splash.java and MainActivity.java. Splash.java is the splash activity,handling the splash and progress of progress bar. MainActivity.java is the landing page. Inside the code the part runOnUiThread is used to modify the TextView component. Ui components modification is possible only on ui thread. Otherwise app crashes.

 runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            textView.setText(String.valueOf(i)+"%");
                        }
                    });

runOnUiThread(new Runnable() {

@Override

public void run() {

textView.setText(String.valueOf(i)+"%");

}

});

Time period is set to 100 ms. Run method inside the thread executes every 100 ms. It only stops when timer.cancel(); called . If you don’t call timer.cancel(); the process continues to execute leading to system hang or crash.

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.ProgressBar;
import android.widget.TextView;
import java.util.Timer;
import java.util.TimerTask;

public class Splash extends AppCompatActivity{
    private Timer timer;
    private ProgressBar progressBar;
    private int i=0;
    TextView textView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash);
        progressBar=(ProgressBar)findViewById(R.id.progressBar);
        progressBar.setProgress(0);
        textView=(TextView)findViewById(R.id.textView);
        textView.setText("");

        final long period = 100;
        timer=new Timer();
        timer.schedule(new TimerTask() {
            @Override
            public void run() {
                //this repeats every 100 ms
                if (i<100){
                    runOnUiThread(new Runnable() {
                        @Override
                        public void run() {
                            textView.setText(String.valueOf(i)+"%");
                        }
                    });
                    progressBar.setProgress(i);
                    i++;
                }else{
                    //closing the timer
                    timer.cancel();
                    Intent intent =new Intent(Splash.this,MainActivity.class);
                    startActivity(intent);
                    // close this activity
                    finish();
                }
            }
        }, 0, period);
    }

}

import android.content.Intent;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.widget.ProgressBar;

import android.widget.TextView;

import java.util.Timer;

import java.util.TimerTask;

public class Splash extends AppCompatActivity{

private Timer timer;

private ProgressBar progressBar;

private int i=0;

TextView textView;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_splash);

progressBar=(ProgressBar)findViewById(R.id.progressBar);

progressBar.setProgress(0);

textView=(TextView)findViewById(R.id.textView);

textView.setText("");

final long period = 100;

timer=new Timer();

timer.schedule(new TimerTask() {

@Override

public void run() {

//this repeats every 100 ms

if (i<100){

runOnUiThread(new Runnable() {

@Override

public void run() {

textView.setText(String.valueOf(i)+"%");

}

});

progressBar.setProgress(i);

i++;

}else{

//closing the timer

timer.cancel();

Intent intent =new Intent(Splash.this,MainActivity.class);

startActivity(intent);

// close this activity

finish();

}

}, 0, period);

}

You can download full code from here, You can modify the code us u like. In like manner feel free to comment your doubt’s below. Does our tutorials help you then help as spread the word, like and share.

7 comments on “Android Splash Screen With Progress Bar”

nigel says:

May 10, 2017 at 12:10 pm

Work it great, but the progress should say 100 % once the main activity is completely loaded. this code just counts from 1 to 100 closes off splash activity then shows main.

1. Akhil says:
  
  May 10, 2017 at 2:16 pm
  
  this tutorial is for eliminating the white screen while loading an activity,try it.
  
Brayan Loayza says:

July 11, 2017 at 1:53 am

Thanks a lot bro, great idea, save my life..!

1. Akhil says:
  
  July 14, 2017 at 12:52 am
  
  Glad to hear.
  
shri ram says:

September 4, 2018 at 2:45 pm

how to i download this

1. Akhil says:
  
  September 5, 2018 at 12:31 am
  
  use this link : https://drive.google.com/open?id=0B-I76sKp2FRVVWVDMnpIRzB3UHc
  
Pingback: java – android – 启动画面上的进度条 - 算法网