Android Splash Screen with Progress Bar
A splash screen is a graphical control element consisting of window containing an image, logo or current version of the software. Splash screen usually appears at the launching time of any program or game. A Splash screens 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. Despite this we can also use it for making the app more attractive. There are many detailed or short tutorials on the topic of Splash Screen for Android or iOS all over the internet. But here a noticeable thing is this that only few that works without the blank screen while launching. Here I am going to share with you a perfect example for proper working Splash Screen.
See the example output picture [1] below before starting Tutorials.
Here progress bar is used in this example and can be changed according to the work done. Here first we need to create two activities One for Displaying flash and second for landing on Main Activity. This can be explained in following steps.
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
First of All you need to copy and paste you picture or video contents in drawable folder you can also create an xml file in drawable folder. Here I am not going to create xml file I simple copy my app logo picture in to “Drawable Folder”. Below is the xml file for Splash activity.
a. Now Create a New XML activity file as activity_splash.xml
How to add/create new activity
Right Click at “Layout” folder in res à Select New à Select Activity à Empty Activity [See the Picture [2] below]
Picture [2] |
b. Now add Progress Bar and from Toolbox and also add some and pictures as you like to design your splash screen.
Here is my code for splash screen 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> |
2 – Applying Themes
a. Theme is an important element. If you want to create you own custom theme then go to your styles.xml file and add a new theme and if you want to add predefined themes from android studio library you don’t need to create new themes.
Now go to Android Manifest.xml file and replaces launcher activity name with with
<activity
android:name=".SplashScreen"
android:screenOrientation="portrait"
android:theme="@style/Theme.AppCompat.Light.NoActionBar">
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
[See the Picture [3] below]
Picture [3] Applying theme and setting Splash Screen Activity as Main |
3– Tasks for progress bar and loading next activity
Here we have created two activities as 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.
Please Note that: 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.
Here we go to Splash.java file and add following code:
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); } } |
That’s it you have done the coding for splash screen and loading progress bar as seen in picture [1] above:
0 Comments