Multi-Activity Apps Pt I

Multi-Activity Apps: The Presidents List

Intro

At this point, you're starting to develop a solid foundational understanding of how apps are created, and how the different parts of the app work together. This lesson will continue to build on this foundation by introducing several topics and features that will prove useful in a good majority of apps you develop in the future. As opposed to traditional lectures, you'll learn the pertinent topics by actually implementing them in practice. Our goal for the next couple lessons will be to design and build a full-fledged application, introducing and discussing topics as they are encountered in the process of app creation. We'll also be venturing out of the comfortable world of single-Activity apps...this one wil have two. (Pause for effect...) That means that we'll need to discuss how to invoke other Activities, and how to pass data between Activities. As always, links will be provided throughout the lesson for you to read more detailed descriptions if you're having a difficult time grasping the concepts as they are presented in class.

List of topics to be covered:

ListView
Referencing pre-existing Arrays from the resources folder
ArrayAdapter
Starting new Activity with Intent
WebView
Manifest Permissions
Passing data to new Activity
Using custom app icons

All code for this app is available via GitHub: https://github.com/jonipepin/Presidents_List

App Description

Because of the number of topics to be discussed, this will be a multi-part lesson. The final result of your hard labor will be a complete application that we'll call the "Presidents List" app (I know...not a very creative name. Want a better name? Build your own app and you can call it whatever you want!).

The app will consist of two activities: the first activity contains a ListView showing a chronological listing of all U.S. Presidents. When the user clicks on one of the list items, the second activity is launched, which displays the chosen President's WIkipedia page in a WebView. Here are a couple screen shots of the final product:

Seems simple enough, right? Like most apps, this one may seem simple on the surface. But the fact is, even the simplest of apps usually have a lot going on in the background, unbeknowst to the average user. A fact which you'll hopefully come to appreciate throughout the development of the Presidents List app.

Each distinct part of the lesson will be presented into two corresponding sections:

Implementation, where I tell you what to do, and
Explanation, where I explain what we did, why we did what we did, and how it works.

Part 1 - ListView Activity Implementation

In Part I we'll create the first activity in our application, corresponding to the screenshot on the left above.

Create new Project configured like this:
- Application Name: Presidents List
- Company Domain: mobileos.usna.edu
- Package Name: mobileos.usna.edu.presidentslist
- Min SDK: API 16
- Blank Activity named MainActivity
Add presidents.xml file to app's res > values folder
- Click here to download (right click, save as): presidents.xml
- Right click on the downloaded file and "Copy"
- In Android Studio, right click on the res > values folder and Paste the file in the values folder
Inside content_main.xml:
- Remove the TextView element
- Add a new view inside the Relative Layout known as a ListView with the attributes shown in the code block below.
- Move the AppBarLayout and nested ToolBar from activity_main.xml to the content_main.xml file as an element of the RelativeLayout.
- Give the AppBarLayout element an id, and set the ListView to layout below the AppBarLayout.

Remove the default padding attributes in the RelativeLayout. When finished, your content_main should look like this:

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:context=".MainActivity" >

    <android.support.design.widget.AppBarLayout
        android:id="@+id/toolbar_layout"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:theme="@style/AppTheme.AppBarOverlay">

        <android.support.v7.widget.Toolbar
            android:id="@+id/toolbar"
            android:layout_width="match_parent"
            android:layout_height="?attr/actionBarSize"
            android:background="?attr/colorPrimary"
            app:popupTheme="@style/AppTheme.PopupOverlay" />

    </android.support.design.widget.AppBarLayout>

    <ListView
        android:id="@+id/president_list"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/toolbar_layout"
        />

</RelativeLayout>

Inside activity_main.xml:
- Remove the FloatingActionButton element
In the onCreate() method of MainActivity.java:
- Remove the FloatingActionButton and its associated OnCLickListener.
- Create a Java ListView object that points to the new ListView you created in content_main.xml:
```
ListView presidentsListView = (ListView) findViewById(R.id.president_list);
```
- Create a new String Array from the array resource. In this case we'll use the array previously defined in the presidents.xml file:
```
String[] presidentsArray = getResources().getStringArray(R.array.presidents);
```
- Create new ArrayAdapter:
```
ArrayAdapter presidentsListAdapter = new ArrayAdapter(this,
        android.R.layout.simple_list_item_1, presidentsArray);
```
- Set ListView to use the new ArrayAdapter:
```
presidentsListView.setAdapter(presidentsListAdapter);
```

PAUSE HERE...RUN THE APP TO SEE HOW IT LOOKS SO FAR!!

If you did everything correctly, your app should now look similar to the left screenshot above. But we're not done yet...once you're sure things look right, continue...

Implementing OnItemClickListener

Now that things look right, let's add some functionality. We're going to add the ability to detect when the user clicks on a specific item in the List. To do this, we need an OnItemClickListener:

Have MainActivity implement AdapterView.OnItemClickListener:

public class MainActivity extends ActionBarActivity implements OnItemClickListener { ...

Add the onItemClick() method required of the OnItemCLickListener interface:

@Override  
public void onItemClick(AdapterView<?> parent, View view, int pos, long id) { 
 // actions to execute to do when an item is clicked
}

Register the ListView to trigger the OnItemClickListener:
```
presidentsListView.setOnItemClickListener(this);
```

In OnItemClick() , add code to show Toast when a given president's name is clicked :

String presidentClicked = ((TextView)view).getText().toString();
Toast.makeText(getBaseContext(), presidentClicked, Toast.LENGTH_SHORT).show();

Toast

A Toast is a message that is displayed to the user as a small pop-up. By default, the Toast message is displayed towards the bottom of the screen. You can change this location by using the setGravity() method:

toast.setGravity(Gravity.TOP|Gravity.LEFT, 0, 0);

In this example, the message will display in the top left area of the users display.

PAUSE HERE...RUN THE APP AGAIN TO SEE YOUR PROGRESS

Part 1 - ListView Activity Explanation

It would be a complete waste of time if we just stopped there without actually explaining what just happened. In the first step, you added a new View to your app called a ListView. A ListView, as the name suggests, is designed specifically for displaying items from an Array or List.

Next, you added a the list of presidents to your app. This list was formatted as an array of strings, in XML format, which you placed in the app's values directory. We are able to reference this resource in our Java using the resources "name" attribute, in the same way you reference Layout elements, by their id:

String[] presidentsArray = getResources().getStringArray(R.array.presidents);

ArrayAdapters can also accept a Java List instead of an Array, so you could have also done something like this:

List presidentsList = 
    Arrays.asList(getResources().getStringArray(R.array.presidents));

There are many options for including resources with your app. You can see some of them here: http://developer.android.com/guide/topics/resources/string-resource.html

Once you have your ListView and the list you want the ListView to display, you must asociate the two. This is accomplished using an ArrayAdapter. To link the list of presidents to the ListView, you first create an ArrayAdapter, passing the presidents list as the third argument:

ArrayAdapter presidentsListAdapter = new ArrayAdapter(this,
        android.R.layout.simple_list_item_1, presidentsArray);

Then, you set the ListView to use the ArrayAdapter:

presidentsListView.setAdapter(presidentsListAdapter);

After you ran your app to make sure it was workign as expected, we added the ability to capture when the user clicked on one of the list items. To do this, we implemented a listener designed specifically for Views that use ArrayAdapters. Importantly, we also had to register the Listener with our ListView:

presidentsListView.setOnItemClickListener(this);

Now, when an item in the ListView is clicked, the OnItemClick method is triggered, and we can act accordingy. OnItemClick gives us the option (via its parameters) to determine the View that was clicked, and its index integer value in the Array (or List).

Conclusion

We've covered quite a bit, but hopefully you were able to digest most of it. You should have also started to see some similarities in the way many things are done in Android. For example:

All Views are created the same, and instantiated in Java the same.
There are many types of Listeners, each with unique options, but all are created and triggered the same way.