Android App Development – Skip Welcome Page

0
If you want to know about the sample application and the first welcome page, please read my first article.

Introduction

In this article we will be implementing welcome page and list page. We will also work with settings to skip welcome page. By the end of the article, we will come to know about activities, layouts and AndroidManifest.xml.

 

Scenario

The very first time when the app is launched, welcome page is displayed. User is allowed to make a choice whether it should be skipped next time the app is launched. If yes, ‘Do not show it again?’ is checked before moving on to the next screen.

'Do not show this again?' flow

Activity and Fragment

Before we start working on the design aspects of welcome and list views, I will brief you about Android Application Framework’s main components Activity and Fragments.Each visible page in android app is an Activity, these are managed by Android, so they must be defined in androidManifest.xml.

One of them must be designated as the main activity to serve as the entry point of Android’s framework into our code.  There can be many activities in the application but only one will be active at any point of time.

If we want to have multiple views in an Activity or would like to dynamically add/remove views or reuse an Activity’s view  then we need to use Fragments. An activity itself can be on its own or composed of Fragments. A Fragment can be re-used by more than one Activity. We can define the fragments in the layout itself or add them to the activity programatically.

If we want to perceive the architecture from an MVC point of view. We can think of Activities and Fragments as the controller components, whereas the xml layouts are the views and the model is manufactured within the controller and bound to the view.

There are also components other than Activity and Fragment which we will discuss later when we use them. In this article, we will only use Activities.

We will have one activity for the ListView and one for the Welcome Page. We will make ListActivity the main activity. If user wants to see the welcome page then ListActivity should simply delegate the control to WelcomeActivity.

Android Activity Flow Diagram for the Welcome Page

List View

To display list view, we need a view and an activity. Let’s first create the view.Add an xml file in layout folder. Go to File->new, click on Android XML File, select root element as ListView, enter the file name and finish. ListView is one of the layouts provided by the framework. It is also called an AdaptorView where the model is not pre-determined and needs to be bound dynamically to it. We will do that in ListActivity class.

<ListView xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/myList" android:layout_width="fill_parent"
android:layout_height="fill_parent"/>

List Activity

ListView and the adapter relation
An activity class extends Activity and the configuration is dealt in onCreate() method when the activity is first created. We next bind the view to the activity and model to the view. The view is identified by the id attribute value assigned in the ListView xml. Call setContentView() to bind a view.
Next, we will build the model based on an array of elements. Since adapter is based on an array we will use ArrayAdapter which takes the current context, the layout id and the array. We will use android’s in-built list layout.
Once we link our app to a database, we will use a different adaptor class to create our model.
public class ListActivity extends Activity {

 private ListView listView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_list);
        listView = (ListView) findViewById(R.id.myList);
        String[] listeStrings = { "Item1", "Item2", "Item3", "Item4" };
        listView.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, listeStrings));
    }
}

Welcome Activity

Welcome activity is very simple as of now. It just binds the welcome layout to the activity.
public class WelcomeActivity extends Activity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.welcome);
    }
}

Setting

We now need to use a setting to decide whether to remain in ListItem screen or delegate the call to WelcomeActivity. Android has in-built support for settings, PreferenceManager helps us manage the settings. We will introduce a new setting skipWelcome. If its value is true, user will see List page else will be taken to the welcome page. This is configured in onCreate(). A call to startActivity will stop the current activity and resume the activity class passed in.

public class ListActivity extends Activity {

    private ListView listView;
 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_list);
        listView = (ListView) findViewById(R.id.myList);
        String[] listeStrings = { "Item1", "Item2", "Item3", "Item4" };
        listView.setAdapter(new ArrayAdapter(this, android.R.layout.simple_list_item_1, listeStrings));   
        if (!PreferenceManager.getDefaultSharedPreferences(this).getBoolean("skipWelcome", false)) {
            startActivity(new Intent(this, WelcomeActivity.class));
        }
    }

Save Setting

We will have to save the skipWelcome setting when the user clicks on next button and the preference value is true. This will we implement by adding a listener to the next button.

public class WelcomeActivity extends Activity {
    public static final String SKIP_WELCOME = "skipWelcome";

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.welcome);
        Button nextPage = (Button) findViewById(R.id.next_button);
        final CheckBox skipAbout = (CheckBox) findViewById(R.id.skip_welcome_cb);
        nextPage.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(WelcomeActivity.this);
                if (skipAbout.isChecked()) {
                    SharedPreferences.Editor editor = prefs.edit();
                    editor.putBoolean(SKIP_WELCOME, true);
                    editor.commit();
                }
                startActivity(new Intent(WelcomeActivity.this, ListActivity.class));
            }
        });

    }
}

Setting Activity

We would also like to view and edit the skipWelcome setting. For this, we need a settings view and an activity. To create the view, select resource type Preferences and root element PreferenceScreen in the new Android XML file. Since skipWelcome is a checkbox, we will add a CheckBoxPreference child element with default value false.
<PreferenceScreen xmlns:android="http://schemas.android.com/apk/res/android" >

<CheckBoxPreference
android:defaultValue="false"
android:key="skipWelcome"
android:title="@string/action_settings" />

</PreferenceScreen>

We also need an activity class. Instead of extending Activity directly, SettingsActivity extends PerefernceActivity. In the onCreate(), we bind the view by calling addPreferencesFromResource(R.xml.settings);

public class SettingsActivity extends PreferenceActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        addPreferencesFromResource(R.xml.settings);
    }
}

Now we should add the setting to the menu. We will create the menu in our ListActivity.

package com.jopc.sandbox;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.view.Menu;
import android.view.MenuItem;
import android.widget.ArrayAdapter;
import android.widget.ListView;


public class ListActivity extends Activity {
	 
    private ListView listView;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.my_list);
        listView = (ListView) findViewById(R.id.myList);
        String[] listStrings = { "Item1", "Item2", "Item3", "Item4" };
        listView.setAdapter(new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, listStrings));   
        if (!PreferenceManager.getDefaultSharedPreferences(this).getBoolean("skipWelcome", false)) {
            startActivity(new Intent(this, WelcomeActivity.class));
        }
    }    
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            startActivity(new Intent(this, SettingsActivity.class));
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

AndroidManifest.xml

In AndroidManifest.xml, we define all the three activities ListActivity, WelcomeActivity and SettingsActivity. ListActivity will be our main activity.

<application android:allowBackup="true" android:icon="@drawable/ic_launcher_sandbox" android:label="@string/app_name">

    <activity android:name="com.jopc.sandbox.ListActivity" android:label="@string/app_name">
        <intent-filter>
            <action android:name="android.intent.action.MAIN"/>
            <category android:name="android.intent.category.LAUNCHER"/>
        </intent-filter>
    </activity>
    <activity android:name="com.jopc.sandbox.WelcomeActivity"></activity>
    <activity android:name=".SettingsActivity" android:label="@string/action_settings">

</application>

There is still one issue with ListActivity being the main activity. If the user has not opted for ‘skipping the welcome page’, the list activity will delegate the call to welcome page. When you click on next, ListActivity is called but the control doesn’t stay on this page as the use has still on checked the ‘skip welcome’ option so it again delegates it back to welcome page.
This is a bug and we should fix it right away by making the welcome page the main activity. The welcome page will decide whether to stay in the same page or move on to ListActivity based on the ‘skipWelcome’ preference.

package com.jopc.sandbox;

import android.app.Activity;
import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Bundle;
import android.preference.PreferenceManager;
import android.view.Menu;
import android.view.MenuItem;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.CheckBox;

public class WelcomeActivity extends Activity {
	public static final String SKIP_WELCOME = "skipWelcome";
	 
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.welcome);
        Button nextPage = (Button) findViewById(R.id.next_button);
        final CheckBox skipAbout = (CheckBox) findViewById(R.id.skip_welcome_cb);
        nextPage.setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                SharedPreferences prefs = PreferenceManager.getDefaultSharedPreferences(WelcomeActivity.this);
                if (skipAbout.isChecked()) {
                    SharedPreferences.Editor editor = prefs.edit();
                    editor.putBoolean(SKIP_WELCOME, true);
                    editor.commit();
                }
                startActivity(new Intent(WelcomeActivity.this, ListActivity.class));
            }
        });
        if (PreferenceManager.getDefaultSharedPreferences(this).getBoolean(SKIP_WELCOME, false)) {
            startActivity(new Intent(this, ListActivity.class));
        }
    }
    
    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

    @Override
    public boolean onOptionsItemSelected(MenuItem item) {
        // Handle action bar item clicks here. The action bar will
        // automatically handle clicks on the Home/Up button, so long
        // as you specify a parent activity in AndroidManifest.xml.
        int id = item.getItemId();
        if (id == R.id.action_settings) {
            startActivity(new Intent(this, SettingsActivity.class));
            return true;
        }
        return super.onOptionsItemSelected(item);
    }
}

Now the welcome page will be the main activity. Our androidManifest.xml looks like below:

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.jopc.sandbox"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:maxSdkVersion="21"
        android:minSdkVersion="4"
        android:targetSdkVersion="21" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher_sandbox"
        android:label="@string/app_name" >
        <activity
            android:name="com.jopc.sandbox.ListActivity"
            android:label="@string/app_name" >            
        </activity>
        <activity android:name="com.jopc.sandbox.WelcomeActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>           
        </activity>
        <activity
            android:name=".SettingsActivity"
            android:label="@string/action_settings" >
        </activity>
    </application>

</manifest>

Design Diagram

Below is the current design. It shows the activities and layouts involved and the flow between them.

 

Android activity diagram - welcome to list view architecture

Variation

One of the variations would be to use a web view instead of static text like ‘Welcome to sandbox’.

Also we may like the user to slide through a bunch of pages before showing the final page with ‘Do not show this again’ checkbox. We will work on the variations in our next article.

Download the source code

You can download the source code here: sandboxSkipWelcome.zip

Share.

Leave A Reply