Creating the Application's Screens

The first part of the process of developing the Task Reminder application is to create the screens. The Task Reminder app will have two different screens that perform all the basic CRUD (Create, Read, Update, and Delete) functions, as follows:

• A task list screen: A list view that lists all the current tasks in the application by name. This view also allows users to delete a task by long-pressing an item.
• An add/edit screen: A view that allows users to view (Read), add (Create), or edit (Update) a task.

Each screen eventually interacts with a database for changes to be persisted over the long-term use of the application.

Starting the new project

To get started, open Eclipse and create a new Android project with a Build Target of Android 3.0 and a MinSDKVersion of 11. Provide it with a valid name, package, and activity. The settings I have chosen are shown in Table 11-1. If you prefer, you can open the example Android project for Chapter 11 from this book's companion website. This provides you with a starting point that has the same settings as my project.

Table 11-1 New Project Settings

Note the Create Activity property value — ReminderListActivity. (I chose this name over ListActivity because this is the class we must extend.) Normally I give the first activity in an application the name of MainActivity; however, the first screen that the user will see is a list of current tasks. Therefore, this activity is actually an instance of a ListActivity — hence the name ReminderListActivity.

Creating the task list screen

When working with ListActivity classes (classes responsible for working with lists in Android), I like to have my layout filename contain the word list, which makes it easy to find when I open the res/layout directory. I'm going to rename the main.xml file located in the res/layout directory to reminder_list.xml. To rename the file in Eclipse, either right-click the file and choose RefactorRename or select the file and press Shift+Alt+R.

After you change the filename, you need to update the name of the file in the setContentView() call inside the ReminderListActivity.java file, so your Java code is directed to the right file. Open the file and change the reference to the new filename you chose.

Also, the ReminderListActivity class should be changed so that it inherits from the ListActivity class instead of from the regular superclass activity (in this case ListActivity). Make that change as well.

When you make these changes, your new ReminderListActivity class should look something like Listing 11-1.

Listing 11-1: The ReminderListActivity Class

public class ReminderListActivity extends ListActivity {
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.reminder_list);
    }
}

Now your ReminderListActivity references the reminder_list layout resource that currently contains the default code generated when you created the project. However, to work with a ListActivity, you need to update this layout with new code, as shown in Listing 11-2.

Listing 11-2: The reminder_list.xml Contents

<?xml version=“1.0” encoding=“utf-8”?>
<LinearLayout xmlns:android=“http://schemas.android.com/apk/res/android”
    android:layout_width=“wrap_content”
    android:layout_height=“wrap_content”>
    <ListView android:id=“@+id/android:list”                         →5
        android:layout_width=“fill_parent”
        android:layout_height=“fill_parent”/>
          <TextView android:id=“@+id/android:empty”                  →8
        android:layout_width=“wrap_content”
        android:layout_height=“wrap_content”
        android:text=“@string/no_reminders”/>                       →11
</LinearLayout>

This code is briefly explained as follows:

Creating the add/edit screen

The Task Reminder application needs one more screen that allows the user to edit a task and its information. This screen will be all-inclusive, meaning that one single activity can allow users to create, read, and update tasks.

In Eclipse, create a new activity that can handle these roles. I'm choosing to call mine ReminderEditActivity by right-clicking the package name in the src folder and choosing NewClass or by pressing Shift+Alt+N and then choosing Class. In the new Java class window, set the superclass to android.app.Activity and choose Finish.

A blank activity class now opens. Inside this class, type the following lines that are boldface:

public class ReminderEditActivity extends Activity {
   @Override
   protected void onCreate(Bundle savedInstanceState) {
       super.onCreate(savedInstanceState);
       setContentView(R.layout.reminder_edit);                      →5
   }
}

In line 5 of the preceding code, I set the layout of the activity to the reminder_edit resource, which is defined later in this section. This layout contains the various fields of the task in which the user can edit or create.

You also need to inform the Android platform about the existence of this activity by adding it to the Android Manifest. You can do so by adding it to the Application element of the AndroidManifest.xml file, as shown here in boldface:

<application android:icon=“@drawable/icon” android:label=“@string/app_name”>
    <activity android:name=“.ReminderListActivity”
              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=“.ReminderEditActivity”
              android:label=“@string/app_name” />
</application>

When creating the layout for the adding and editing activity, you need only a few fields, as follows:

• Title: The title of the task as it will appear in the list view.
• Body: The body of the task is where the user types in the details.
• Reminder Date: The date on which the user should be reminded of the task.
• Reminder Time: The time at which the user should be reminded on the reminder date.

When complete and running on a device or emulator, the add/edit screen looks like Figure 11-1.

Figure 11-1: The Add/Edit Task Reminder screen.

To create this layout, create a layout file in the res/layout directory with an appropriate name — I'm using reminder_edit.xml. To create this file, perform the following steps:

1. Right-click the res/layout directory and choose NewAndroid XML File.
2. Provide the name in the File field.
3. Leave the default type of resource selected — Layout.
4. Leave the folder set to res/layout.
5. Set the root element to ScrollView.
6. Click Finish.

You now need to provide all the view definitions to build the screen that you see in Figure 11-1. To do this, type the code shown in Listing 11-3 into your reminder_edit.xml file.

Listing 11-3: The reminder_edit.xml File

<?xml version=“1.0” encoding=“utf-8”?>
<ScrollView
        xmlns:android=“http://schemas.android.com/apk/res/android”
        android:layout_width=“fill_parent”
        android:layout_height=“fill_parent”>                                 →5
<LinearLayout                                                                →6
    android:orientation=“vertical”                                           →7
    android:layout_width=“fill_parent”
    android:layout_height=“fill_parent”>
    <TextView android:layout_width=“wrap_content”
              android:layout_height=“wrap_content”
              android:text=“@string/title” />                               →12
    <EditText android:id=“@+id/title”
              android:layout_width=“fill_parent”
                android:layout_height=“wrap_content” />                     →15
    <TextView android:layout_width=“wrap_content”
              android:layout_height=“wrap_content”
              android:text=“@string/body” />                                →18
    <EditText android:id=“@+id/body”
              android:layout_width=“fill_parent”
              android:layout_height=“wrap_content”
              android:minLines=“5”
              android:scrollbars=“vertical”
              android:gravity=“top” />                                      →24
    <TextView android:layout_width=“wrap_content”
              android:layout_height=“wrap_content”
              android:text=“@string/date” />                                →27
    <Button
              android:id=“@+id/reminder_date”
              android:layout_height=“wrap_content”
              android:layout_width=“wrap_content”/>                         →31
    <TextView android:layout_width=“wrap_content”
              android:layout_height=“wrap_content”
              android:text=“@string/time” />                                →34
    <Button

              android:id=“@+id/reminder_time”
              android:layout_height=“wrap_content”
              android:layout_width=“wrap_content” />                        →38
    <Button   android:id=“@+id/confirm”
              android:text=“@string/confirm”
              android:layout_width=“wrap_content”
              android:layout_height=“wrap_content” />                       →42

</LinearLayout>
</ScrollView>

A brief explanation of the code in Listing 11-3 is as follows: