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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<?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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<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> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<?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> |
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.
|
1 2 3 4 5 6 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
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); } } |
4 Comments
nigel · 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.
Akhil · May 10, 2017 at 2:16 pm
this tutorial is for eliminating the white screen while loading an activity,try it.
Brayan Loayza · July 11, 2017 at 1:53 am
Thanks a lot bro, great idea, save my life..!
Akhil · July 14, 2017 at 12:52 am
Glad to hear.