Android Game Loading Screen Design

发表于   |   分类于   |  

Almost every game has a loading screen, not because loading screen is beautifule, of course make it beautiful is necessary, because it is the first screen presented to users, but we need loading screen to load necessary resources, such as bitmap or drawable, which will make our app slow if we don’t load them before hand. Below is an example of loading screen:
Loading Screen Example

We can see the screen is simple, just a progress bar and a background image, may be you can also put a text above the progress bar to indicate loading process.

###Loading Screen Layout
The layout of loading screen is simple, like below:

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
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
                android:layout_width="fill_parent"
                android:layout_height="fill_parent"
                android:orientation="vertical" android:background="@drawable/loading">

    <ProgressBar
            android:id="@+id/pb_progressbar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="fill_parent"
            android:layout_height="wrap_content"
            android:progressDrawable="@drawable/colorprogress"
            android:layout_alignParentBottom="true"
            android:layout_centerHorizontal="true" android:layout_marginBottom="20dip" android:layout_marginLeft="20dip" android:layout_marginRight="20dip" android:layout_marginTop="10dip"/>

    <TextView
            android:id="@+id/tv_loadingtext"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_above="@+id/pb_progressbar"
            android:layout_centerHorizontal="true"
            android:text="Loading, please wait..."
            android:textAppearance="?android:attr/textAppearanceMedium" android:textColor="#ffffffff" android:shadowColor="#000000" android:shadowDx="2.0" android:shadowDy="2.0" android:shadowRadius="3.0"/>

    <TextView
            android:id="@+id/tv_progress"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_alignBottom="@+id/pb_progressbar"
            android:layout_centerHorizontal="true"
            android:text="Loading..."
            android:textAppearance="?android:attr/textAppearanceSmall" android:textColor="#ffffffff" android:shadowColor="#000000" android:shadowDx="2.0" android:shadowDy="2.0" android:shadowRadius="3.0"/>

</RelativeLayout>

We just create a relative layout with a background image and put progress bar and textview at some position. You may also need to custom your own progressbar, you can find many posts about progressbar on the web.

###AsyncTask
After define loading screen layout, what we need to do next is to implement the loading process. This include two parts:

  • Load some resources in background thread
  • Update progressbar, when all resources are loaded, we will change app to MainMenu screen.(UI Thread)

    AsyncTask is a suitable class for this task. AsyncTask allows to perform background operations and publish results on the UI thread without having to manipulate threads and/or handlers. An asynchronous task is defined by 3 generic types, called Params, Progress and Result, and 4 steps, called onPreExecute, doInBackground, onProgressUpdate and onPostExecute.

Let’s see how to implement loading process using AsyncTask.

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
52
53
54
55
private class LoadingResourceTask extends AsyncTask<Void, Integer, Void> {
        private View loadScreenView;
        private TextView progressView;
        private ProgressBar progressBar;

        @Override
        protected void onPreExecute() {//populate our loading screen here
            LayoutInflater inflater = (LayoutInflater) MainActivity.this.getSystemService(MainActivity.this.LAYOUT_INFLATER_SERVICE);
            loadScreenView = inflater.inflate(R.layout.loadingscreen, fLayout, false);
            fLayout.addView(loadScreenView);
            MainActivity.this.setContentView(fLayout);
            progressView = (TextView) findViewById(R.id.tv_loadingtext);
            progressBar = (ProgressBar) findViewById(R.id.pb_progressbar);
            progressBar.setMax(100);
        }

        @Override
        protected Void doInBackground(Void... objects) {//load resources in background thread
            try {
                //Get the current thread's token
                synchronized (this) {
                    ResourceManager manager = ResourceManager.getInstance();
                    manager.setContext(MainActivity.this);
                    int count = 0;
                    while (count < manager.mSpriteResId.size()) {
                        if (manager.mSpriteBitmaps == null) {
                            manager.mSpriteBitmaps = new Vector<Bitmap>();
                        }
                        Bitmap bitmap = manager.getBitmap(manager.mSpriteResId.get(count), manager.mScaleWidth, manager.mScaleHeight);
                        manager.mSpriteBitmaps.addElement(bitmap);
                        count++;
                        publishProgress((int) ((count * 1.0 / manager.mSpriteResId.size()) * 100));//update loading progress on UI Thread
                    }
                }
            } catch (Exception e) {
                e.printStackTrace();
            }
            return null;
        }

        @Override
        protected void onProgressUpdate(Integer... values) {
            // super.onProgressUpdate(values);
            progressView.setText("Progress: " + Integer.toString(values[0]) + "%");
            progressBar.setProgress(values[0]);
        }

        @Override
        protected void onPostExecute(Void o) {//after all resources are loaded, we need to show MainMenu Screen.
            //super.onPostExecute(o);
            fLayout.removeView(loadScreenView);
            MainActivity.this.addMainMenuView();

        }
    }

Code is straightforward, we extends AsyncTask class and override methods to do different tasks. We populate loading screen view in onPreExecute(), load resource in doInBackground(), update UI in onProgressUpdate, and in onPostExecute we remove load screen view, and populate our MainMenu view.

The last things we have to do is to execute LoadingResourceTask when our Main Activity starts, like below:

1
2
3
4
5
6
7
8
9
10
11
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        fLayout = new FrameLayout(this);
        this.getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        this.requestWindowFeature(Window.FEATURE_NO_TITLE);
        PowerManager pManager = (PowerManager) this.getSystemService(POWER_SERVICE);
        wakeLock = pManager.newWakeLock(PowerManager.FULL_WAKE_LOCK, "mainActivity");
		
		//execute laod resource task here.
        new LoadingResourceTask().execute();
    }

After doing all these, you can see the loading screen same as image we saw before.

Wish this will help :)