Multi-Activity Apps: Pt II

Multi-Activity Apps Part II:

Presidents List Continued...

Now that the Main activity of our application has been created, it's time to build the second activity. Our goal for this lesson will be to create a new activity consisting of a functional WebView. Once we have verified that our WebView is working, we'll tie the two activities together by passing information regarding which list item was clicked from the ListView Activity to the WebView Activity

Part II - WebView Activity Implementation

Making the new Activity

The first thing we'll do it to create the WebView Activity. As the name suggests, a WebView is a special type of view that displays the web page corresponding to a given URL. Once the WebView Activity is created, we'll test it to make sure it's working well before attempting to pass things ot it from the ListView Activity.

Create a new activity by right-clicking on the package name and selecting New > Activity > Blank Activity
Give the new Activity the following properties and click Finish:
Open the layout file that was created for you (activity_webview.xml). Change the contents so that the main Layout is a RelativeLayout, which contains a WebView with the following attributes:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="edu.usna.mobileos.presidentslist.WebviewActivity">

    <WebView
        android:id="@+id/wiki_webview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

</RelativeLayout>

Every Activity in your app must be annotated in the app's manifest file. The IDE has probably already created an entry for you but double-check just to make sure. Your manifest should now look like this:

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

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

</manifest>

Next, open WebviewActivity.java (which was created for you) delete all references to ToolBar and FloatingActionBar, since we are no longer using hte default layout. Create a new WebView object called "webView", referencing the new View you just added in the activity's layout file. (At this point, you should know how to do this without a screenshot!)

Let's give our WebView a URL to load by default:

Create a String to hold the URL:

String fullURL = 
    "http://en.wikipedia.org/wiki/List_of_Presidents_of_the_United_States";

Tell the WebView to load baseURL:
```
webView.loadUrl(fullURL);
```

Testing

We now have a functioning WebView that, when created, loads the Wikipedia page showing the list of presidents. In order to test our work so far, since we haven't put in place the mechanism to launch this activity from the ListView activity yet, we'll tell the application that the Webview Activity is the starting point for your app by designating it as "MAIN". This will cause your deivce to load the Webview Activity when the application starts instead of the LsitView activity. To accomplish this, modify the manifest file so that the intent-filter block is inside the WebView activity:

<activity
    android:name=".MainActivity"
    android:label="@string/app_name" >
</activity>

<activity
    android:name=".WebviewActivity"
    android:label="@string/title_activity_webview" >

    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>

</activity>

In order for your WebView to be able to access the Internet, you also need to add the proper permissions, using the uses-permission element in your manifest file. You'll see that as our apps get more complex, we'll need to use more permissions. Whenever a user installs your app, they will be notified of which permissions your app is requesting. The following should be placed inside the manifest element, before the application element.

<uses-permission android:name="android.permission.INTERNET" />

Everything is now set up for testing, so run it! If you did everything correctly, you should see the webpage from Wikipedia.

Did everything work as expected? (Hint: the answer is NO!). What happened?

Preventing the Default Browser

When we load the URL, Android attempts to use the default app for viewing web pages...i.e. not ours! We have to tell the OS to use our app. To do so, add the following line of code above the call to load the URL:

webView.setWebViewClient(new WebViewClient());

Now when your app opens, it will display the WIkipedia page inside our app, and NOT with the default browser!

Part III - Linking Activities

We have two working activities. Now we need to link them together. Before we do that ,however, we need to put a couple things back to how they were before our testing.

Specifically, in your Manifest file,

move the MAIN intent-filter back to the ListView activity so that it is the starting point of our app.

When you've done that, continue:

Open MainActivity.java

In the onItemClick method, add the following code:

Intent intent = new Intent(getBaseContext(), WebviewActivity.class);
startActivity(intent);

Run the app again and click on any of the list items. This time, the Webview activity is launched.

IMPORTANT - An Intent in Android is how we bind Activities together. They can be used to start Activities in other apps, or, more commonly, to glue together Activities from a single app (what we're doing).

Almost there! We can launch the new Activity, but we still need to pass some data. Specifically, we need to tell the WebView which President was clicked so that it shows the correct webpage. There are a few techniques to pass data between Activities. In fact, we'll have a whole lesson on the different ways. For now, I'll show you one of the main ways information is passed: using Intent extras.

Passing Data to Another Activity

When we create an Intent, we can add data to the Intent, using something called an intent 'extra'. These extras are key-value pairs which are made available to the Activity that was launched with that Intent. When the new Activity is launched, it can check to see if the Intent that started it contained any extras. We want to pass the value associated with the ListView item that was clicked. To do so, modify the onItemClick() method to add a String extra to our Intent:

@Override
public void onItemClick(AdapterView<?> parent, View view, int pos, long id) {
    String presidentClicked = ((TextView)view).getText().toString();
    Toast.makeText(getBaseContext(), presidentClicked, Toast.LENGTH_SHORT).show();

    Intent intent = new Intent(getBaseContext(), WebviewActivity.class);
    intent.putExtra("president", presidentClicked);
    startActivity(intent);
}

Notice that when we added the Extra to the Intent, we gave it a name. This name serves as the key that we will use to retrieve the value stored in the extra (think of it as a type of Java Map).

Retrieving data passed in an Intent

We've completed one side of the interaction, but we still need to retrieve the String value in our WebView activity. To retrieve an Extra value, we must place the following code in the onCreate() method of WebviewActivity.java:

Intent intent = getIntent();

This will retrieve the Intent that was used to launch the WebviewActivity. Now that we have the intent, we can retrieve an stored Extras that were included. Since we know that there is a String Extra named "president", we can retrieve it like this:

String president = intent.getStringExtra("president");

/*  This also works, but is a bit wordier: */
String president = intent.getExtras().getString("president");

In this sample, the Extra is a String, but we can pass all types of Objects in an Intent. Take the time to check out what types of things can be passed this way...and what can't. This will help later when trying to determine which technique to use when passing data between Activities.

Finishing Up

So we have the President's name, but we haven't done anything with it. I just happen to know that Wikipedia has formatted their URL to use the President's name exactly as it's presented in out ListView (coincidence? I think not!). For example, the URL for John Adams' Wikipedia page is: http://en.wikipedia.org/wiki/John_Adams. There is one slight difference; the URL uses underscores in place of spaces...but we can fix that using Java standard String manipulation methods.

// replace all spaces with the underscore character
president.replaceAll(" ", "_");

Finally, we'll need to create our valid wikipedia URL:

// All of our wikipedia pages will start like this
String baseURL = "http://en.m.wikipedia.org/wiki/";

// Append the president's name to the baseURL
String fullURL = baseURL + president;

Now run it!

...Tada!! Time to slap this bad boy in the Play Market!