Chapter 5
Designing Your User Interface with Views

In the previous chapter, you learned about the various layouts that you can use to position your views in an activity. You also learned about the techniques you can use to adapt to different screen resolutions and sizes. This chapter gives you a look at the various views that you can use to design the user interface (UI) for your applications.

In particular, the chapter covers the following ViewGroups:

Basic views—Commonly used views, such as the TextView, EditText, and Button views
Picker views—Views that enable users to select from a list, such as the TimePicker and DatePicker views
List views—Views that display a long list of items, such as the ListView and the SpinnerView views
Specialized fragments—Special fragments that perform specific functions

Subsequent chapters cover the other views not covered in this chapter, such as the analog and digital clock views and other views for displaying graphics, and so on.

USING BASIC VIEWS

To get started, this section explores some of the basic views that you can use to design the UI of your Android applications:

TextView
EditText
Button
ImageButton
CheckBox
ToggleButton
RadioButton
RadioGroup

These basic views enable you to display text information, as well as perform some basic selection. The following sections explore all these views in more detail.

TextView View

When you create a new Android project, Android Studio always creates the activity_main.xml file (located in the res/layout folder), which contains a <TextView> element:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
    <TextView
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="@string/hello"/>
</LinearLayout>

You use the TextView view to display text to the user. This is the most basic view and one that you will frequently use when you develop Android applications. If you need to allow users to edit the text displayed, you should use the subclass of TextView—EditText—which is discussed in the next section.

Button, ImageButton, EditText, CheckBox, ToggleButton, RadioButton, and RadioGroup Views

Besides the TextView view, which you will likely use the most often, there are some other basic views that you will find yourself frequently using:

Button—Represents a push-button widget.
ImageButton—Similar to the Button view, except that it also displays an image.
EditText—A subclass of the TextView view, which allows users to edit its text content.
CheckBox—A special type of button that has two states: checked or unchecked.
RadioGroup and RadioButton—The RadioButton has two states: either checked or unchecked. A RadioGroup is used to group one or more RadioButton views, thereby allowing only one RadioButton to be checked within the RadioGroup.
ToggleButton—Displays checked/unchecked states using a light indicator.

The following Try It Out provides details about how these views work.

TRY IT OUT
Using the Basic Views (BasicViews1.zip)

Using Android Studio, create an Android project and name it BasicViews1.

Modify the activity_main.xml file located in the res/layout folder by adding the following elements shown in bold:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<Button android:id="@+id/btnSave"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="save" />
<Button android:id="@+id/btnOpen"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Open" />
<ImageButton android:id="@+id/btnImg1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@mipmap/ic_launcher" />
<EditText android:id="@+id/txtName"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />
<CheckBox android:id="@+id/chkAutosave"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Autosave" />
<CheckBox android:id="@+id/star"
    style="?android:attr/starStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
<RadioGroup android:id="@+id/rdbGp1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <RadioButton android:id="@+id/rdb1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Option 1" />
    <RadioButton android:id="@+id/rdb2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Option 2" />
</RadioGroup>
<ToggleButton android:id="@+id/toggle1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</LinearLayout>

To see the views in action, debug the project in Android Studio by pressing Shift+F9. Figure 5.1 shows the various views displayed in the Android emulator.

Figure 5.1
Click each of the views and note how they vary in look and feel. Figure 5.2 shows the following changes to the view:

Figure 5.2
- The first CheckBox view (Autosave) is checked.
- The second CheckBox View (star) is selected.
- The second RadioButton (Option 2) is selected.
- The ToggleButton is turned on.

How It Works

So far, all the views are relatively straightforward. The views are listed using the <LinearLayout> element, so they are stacked on top of each other when they are displayed in the activity.

For the first Button, the layout_width attribute is set to fill_parent, which makes its width occupy the entire width of the screen:

<Button android:id="@+id/btnSave"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="save"/>

For the second Button, the layout_width attribute is set to wrap_content so that its width will be the width of its content—specifically, the text that is displayed (for example, Open):

<Button android:id="@+id/btnOpen"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Open"/>

The ImageButton displays a button with an image. You set the image through the src attribute. In this code, note that an image has been used for the application icon:

<ImageButton android:id="@+id/btnImg1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_launcher"/>

The EditText view displays a rectangular region in which the user can enter text. In this example, layout_height has been set to wrap_content so that the text entry location automatically adjusts to fit the amount of text entered by the user (see Figure 5.3).

Figure 5.3

<EditText android:id="@+id/txtName"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"/>

The CheckBox displays a check box that users can tap to check or uncheck:

<CheckBox android:id="@+id/chkAutosave"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Autosave"/>

If you do not like the default look of the CheckBox, you can apply a style attribute so that the check mark is replaced by another image, such as a star:

<CheckBox android:id="@+id/star"
    style="?android:attr/starStyle"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

The format for the value of the style attribute is as follows:

?[package:][type:]name

The RadioGroup encloses two RadioButtons. This is important because radio buttons are usually used to present multiple options to the user for selection. When a RadioButton in a RadioGroup is selected, all other RadioButtons are automatically unselected:

<RadioGroup android:id="@+id/rdbGp1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="vertical" >
    <RadioButton android:id="@+id/rdb1"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Option 1"/>
    <RadioButton android:id="@+id/rdb2"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:text="Option 2"/>
</RadioGroup>

Notice that the RadioButtons are listed vertically, one on top of another. If you want to list them horizontally, you need to change the orientation attribute to horizontal. You would also need to ensure that the layout_width attribute of the RadioButton views are set to wrap_content:

<RadioGroup android:id="@+id/rdbGp1"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:orientation="horizontal" >
    <RadioButton android:id="@+id/rdb1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 1"/>
    <RadioButton android:id="@+id/rdb2"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Option 2"/>
</RadioGroup>

Figure 5.4 shows the RadioButton views displayed horizontally.

Figure 5.4

The ToggleButton displays a rectangular button that users can toggle on and off by clicking:

<ToggleButton android:id="@+id/toggle1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

One thing that has been consistent throughout this example is that each view has the id attribute set to a particular value, such as in the case of the Button:

<Button android:id="@+id/btnSave"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/save"/>

The id attribute is an identifier for a view, which allows it to be retrieved using the View.findViewById() or Activity.findViewById() methods.

Now that you have seen what the various views for an activity look like, the following Try It Out demonstrates how you can programmatically control them.

TRY IT OUT
Handling View Events

Using the BasicViews1 project you created in the previous Try It Out, modify the MainActivity.java file by adding the following bolded statements:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.CheckBox;
import android.widget.RadioButton;
import android.widget.RadioGroup;
import android.widget.Toast;
import android.widget.ToggleButton;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        //---Button view---
        Button btnOpen = (Button) findViewById(R.id.btnOpen);
        btnOpen.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                DisplayToast("You have clicked the Open button");
            }
        });
        //---Button view---
        Button btnSave = (Button) findViewById(R.id.btnSave);
        btnSave.setOnClickListener(new View.OnClickListener()
        {
            public void onClick(View v) {
                DisplayToast("You have clicked the Save button");
            }
        });
        //---CheckBox---
        CheckBox checkBox = (CheckBox) findViewById(R.id.chkAutosave);
        checkBox.setOnClickListener(new View.OnClickListener()
        {
            public void onClick(View v) {
                if (((CheckBox)v).isChecked())
                    DisplayToast("CheckBox is checked");
                else
                    DisplayToast("CheckBox is unchecked");
            }
        });
        //---RadioButton---
        RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);
        radioGroup.setOnCheckedChangeListener(
    new RadioGroup.OnCheckedChangeListener()
        {
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton rb1 = (RadioButton) findViewById(R.id.rdb1);
                if (rb1.isChecked()) {
                    DisplayToast("Option 1 checked!");
                } else {
                    DisplayToast("Option 2 checked!");
                }
            }
        });
        //---ToggleButton---
        ToggleButton toggleButton =
                (ToggleButton) findViewById(R.id.toggle1);
        toggleButton.setOnClickListener(new View.OnClickListener()
        {
            public void onClick(View v) {
                if (((ToggleButton)v).isChecked())
                    DisplayToast("Toggle button is On");
                else
                    DisplayToast("Toggle button is Off");
            }
        });
    }
    private void DisplayToast(String msg)
    {
        Toast.makeText(getBaseContext(), msg,
                Toast.LENGTH_SHORT).show();
    }
}

Press Shift+F9 to debug the project on the Android emulator.
Click each of the views and observe the message displayed in the Toast window.

How It Works

To handle the events fired by each view, you first must programmatically locate the view that you created during the onCreate() event. You do so using the findViewById() method (belonging to the Activity base class). You supply the findViewById()method with the ID of the view:

        //---Button view---
        Button btnOpen = (Button) findViewById(R.id.btnOpen);

The setOnClickListener() method registers a callback to be invoked later when the view is clicked:

        btnOpen.setOnClickListener(new View.OnClickListener() {
            public void onClick(View v) {
                displayToast("You have clicked the Open button");
            }
        });

The onClick() method is called when the view is clicked.

To determine the state of the CheckBox, you must typecast the argument of the onClick() method to a CheckBox and then verify its isChecked() method to see if it is checked:

        CheckBox checkBox = (CheckBox) findViewById(R.id.chkAutosave);
        checkBox.setOnClickListener(new View.OnClickListener()
        {
            public void onClick(View v) {
                if (((CheckBox)v).isChecked())
                    DisplayToast("CheckBox is checked");
                else
                    DisplayToast("CheckBox is unchecked");
            }
        });

For the RadioButton, you need to use the setOnCheckedChangeListener() method on the RadioGroup to register a callback to be invoked when the checked RadioButton changes in this group. The following code will work for two radio buttons, as in a yes/no selection on a form:

        //---RadioButton---
        RadioGroup radioGroup = (RadioGroup) findViewById(R.id.rdbGp1);
        radioGroup.setOnCheckedChangeListener(new OnCheckedChangeListener()
        {
            public void onCheckedChanged(RadioGroup group, int checkedId) {
                RadioButton rb1 = (RadioButton) findViewById(R.id.rdb1);
                if (rb1.isChecked()) {
                    DisplayToast("Option 1 checked!");
                } else {
                    DisplayToast("Option 2 checked!");
                }
            }
        });

When a RadioButton is selected, the onCheckedChanged() method is fired. Within it, locate individual RadioButton views and then call each isChecked() method to determine which RadioButton is selected. Alternatively, the onCheckedChanged() method contains a second argument that contains a unique identifier of the selected RadioButton.

The ToggleButton works just like the CheckBox.

So far, to handle the events on the views, you first had to get a reference to the view and then register a callback to handle the event. However, there is another way to handle view events. Using the Button as an example, you can add an attribute called onClick:

<Button android:id="@+id/btnSave"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="@string/save"
    android:onClick="btnSaved_clicked"/>

The onClick attribute specifies the click event of the button. The value of this attribute is the name of the event handler. Therefore, to handle the button's click event, you simply create a method called btnSaved_clicked, as shown in the following example (note that the method must have a single parameter of type View):

public class BasicViews1Activity extends Activity {
    public void btnSaved_clicked (View view) {
        DisplayToast("You have clicked the Save button1");
    }
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
        //…
    }
    private void DisplayToast(String msg)
    {
        Toast.makeText(getBaseContext(), msg,
                Toast.LENGTH_SHORT).show();
    }
}

If you compare the onClick approach to the callback method discussed previously, you'll see this is much simpler. Which method you use is really up to you, but this book mostly uses the onClick approach.

ProgressBar View

The ProgressBar view provides visual feedback about some ongoing tasks, such as when you are performing a task in the background. For example, you might be downloading some data from the web and need to update the user about the status of the download. In this case, the ProgressBar view is a good choice. The following activity demonstrates how to use the ProgressBar view.

TRY IT OUT
Using the ProgressBar View (BasicViews2.zip)

Using Android Studio, create an Android project and name it BasicViews2.

Modify the activity_main.xml file located in the res/layout folder by adding the following code in bold:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<ProgressBar android:id="@+id/progressbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
</LinearLayout>

In the MainActivity.java file, add the following bolded statements:

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;
public class MainActivity extends AppCompatActivity {
    static int progress;
    ProgressBar progressBar;
    int progressStatus = 0;
    Handler handler = new Handler();
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progress = 0;
        progressBar = (ProgressBar) findViewById(R.id.progressbar);
        //---do some work in background thread---
        new Thread(new Runnable()
        {
            public void run()
            {
                //---do some work here---
                while (progressStatus < 10)
                {
                    progressStatus = doSomeWork();
                }
                //---hides the progress bar---
                handler.post(new Runnable()
                {
                    public void run()
                    {
                        //---0 - VISIBLE; 4 - INVISIBLE; 8 - GONE---
                        progressBar.setVisibility(View.GONE);
                    }
                });
            }
            //---do some long running work here---
            private int doSomeWork()
            {
                try {
                    //---simulate doing some work---
                    Thread.sleep(500);
                } catch (InterruptedException e)
                {
                    e.printStackTrace();
                }
                return ++progress;
            }
        }).start();
    }
}

Press Shift+F9 to debug the project on the Android emulator. Figure 5.5 shows the ProgressBar animating. After about five seconds, it disappears.

Figure 5.5

How It Works

The default mode of the ProgressBar view is indeterminate—that is, it shows a cyclic animation. This mode is useful for tasks that do not have specific completion times, such as when you are sending some data to a web service and waiting for the server to respond. If you simply put the <ProgressBar> element in your main.xml file, it continuously displays a spinning icon. It is your responsibility to stop it when your background task has completed.

The code added to the MainActivity.java file shows how you can spin off a background thread to simulate performing some long-running tasks. To do so, use the Thread class with a Runnable object. The run() method starts the execution of the thread, which in this case calls the doSomeWork() method to simulate doing some work. When the simulated work is done (after about five seconds), use a Handler object to send a message to the thread to dismiss the ProgressBar:

        //---do some work in background thread---
        new Thread(new Runnable()
        {
            public void run()
            {
                //---do some work here---
                while (progressStatus < 10)
                {
                    progressStatus = doSomeWork();
                }
                //---hides the progress bar---
                handler.post(new Runnable()
                {
                    public void run()
                    {
                        //---0 - VISIBLE; 4 - INVISIBLE; 8 - GONE---
                        progressBar.setVisibility(View.GONE);
                    }
                });
            }
            //---do some long running work here---
            private int doSomeWork()
            {
                try {
                    //---simulate doing some work---
                    Thread.sleep(500);
                } catch (InterruptedException e)
                {
                    e.printStackTrace();
                }
                return ++progress;
            }
        }).start();

When the task is completed, hide the ProgressBar by setting its Visibility property to View.GONE (value 8). There are two differences between the INVISIBLE constant and the GONE constant:

INVISIBLE constant simply hides the ProgressBar (the region occupied by the ProgressBar is still taking up space in the activity).
GONE constant removes the ProgressBar view from the activity and does not take up any space.

The next Try It Out shows how you can change the look of the ProgressBar.

TRY IT OUT
Customizing the ProgressBar View

Using the BasicViews2 project created in the previous Try It Out, modify the activity_main.xml file as shown here:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<ProgressBar android:id="@+id/progressbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@android:style/Widget.ProgressBar.Horizontal"/>
</LinearLayout>

Modify the MainActivity.java file by adding the following bolded statements:

import android.os.Handler;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ProgressBar;
public class MainActivity extends AppCompatActivity {
    static int progress;
    ProgressBar progressBar;
    int progressStatus = 0;
    Handler handler = new Handler();
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        progress = 0;
        progressBar = (ProgressBar) findViewById(R.id.progressbar);
        progressBar.setMax(200);
        //---do some work in background thread---
        new Thread(new Runnable()
        {
            public void run()
            {
                //---do some work here---
                while (progressStatus < 100)
                {
                    progressStatus = doSomeWork();
                    //---Update the progress bar---
                    handler.post(new Runnable()
                    {
                        public void run() {
                            progressBar.setProgress(progressStatus);
                        }
                    });
                }
                //---hides the progress bar---
                handler.post(new Runnable()
                {
                    public void run()
                    {
                        //---0 - VISIBLE; 4 - INVISIBLE; 8 - GONE---
                        progressBar.setVisibility(View.GONE);
                    }
                });
            }
            //---do some long running work here---
            private int doSomeWork()
            {
                try {
                    //---simulate doing some work---
                    Thread.sleep(500);
                } catch (InterruptedException e)
                {
                    e.printStackTrace();
                }
                return ++progress;
            }
        }).start();
    }
}

Press Shift+F9 to debug the project on the Android emulator.
Figure 5.6 shows the ProgressBar displaying the progress. The ProgressBar disappears when the progress reaches 50 percent.

Figure 5.6

How It Works

To make the ProgressBar display horizontally, simply set its style attribute to @android:style/Widget.ProgressBar.Horizontal:

<ProgressBar android:id="@+id/progressbar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    style="@android:style/Widget.ProgressBar.Horizontal"/>

To display the progress, call its setProgress() method, passing in an integer indicating its progress:

                    //---Update the progress bar---
                    handler.post(new Runnable()
                    {
                        public void run() {
                            progressBar.setProgress(progressStatus);
                        }
                    });

In this example, set the range of the ProgressBar from 0 to 200 (via the setMax() method). This causes the ProgressBar to stop and then disappear when it is halfway through (because you only continue to call the doSomeWork() method as long as the progressStatus is less than 100). To ensure that the ProgressBar disappears only when the progress reaches 100%, either set the maximum value to 100 or modify the while loop to stop when the progressStatus reaches 200, like this:

                //---do some work here---
                while (progressStatus < 200)

Besides the horizontal style for the ProgressBar that you have used for this example, you can also use the following constants:

Widget.ProgressBar.Horizontal
Widget.ProgressBar.Small
Widget.ProgressBar.Large
Widget.ProgressBar.Inverse
Widget.ProgressBar.Small.Inverse
Widget.ProgressBar.Large.Inverse

AutoCompleteTextView View

The AutoCompleteTextView is a view that is similar to EditText (in fact it is a subclass of EditText), except that it automatically shows a list of completion suggestions while the user is typing. The following Try It Out shows how to use the AutoCompleteTextView to automatically help users complete the text entry.

TRY IT OUT
Using the AutoCompleteTextView (BasicViews3.zip)

Using Android Studio, create an Android project and name it BasicViews3.

Modify the activity_main.xml file located in the res/layout folder as shown here in bold:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<TextView
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Name of President"/>
<AutoCompleteTextView android:id="@+id/txtCountries"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content" />
</LinearLayout>

Add the following bolded statements to the MainActivity.java file:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
    String[] presidents = {
            "Dwight D. Eisenhower",
            "John F. Kennedy",
            "Lyndon B. Johnson",
            "Richard Nixon",
            "Gerald Ford",
            "Jimmy Carter",
            "Ronald Reagan",
            "George H. W. Bush",
            "Bill Clinton",
            "George W. Bush",
            "Barack Obama"
    };
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_dropdown_item_1line, presidents);
        AutoCompleteTextView textView = (AutoCompleteTextView)
                findViewById(R.id.txtCountries);
        textView.setThreshold(3);
        textView.setAdapter(adapter);
    }
}

Press Shift+F9 to debug the application on the Android emulator. As shown in Figure 5.7, a list of matching names appears as you type into the AutoCompleteTextView field.

Figure 5.7

How It Works

In the BasicViews3Activity class, you first create a String array containing a list of presidents' names:

    String[] presidents = {
            "Dwight D. Eisenhower",
            "John F. Kennedy",
            "Lyndon B. Johnson",
            "Richard Nixon",
            "Gerald Ford",
            "Jimmy Carter",
            "Ronald Reagan",
            "George H. W. Bush",
            "Bill Clinton",
            "George W. Bush",
            "Barack Obama"
        };

The ArrayAdapter object manages the array of strings that are displayed by the AutoCompleteTextView. In the preceding example, you set the AutoCompleteTextView to display in the simple_dropdown_item_1line mode:

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
            android.R.layout.simple_dropdown_item_1line, presidents);

The setThreshold() method sets the minimum number of characters the user must type before the suggestions appear as a drop-down menu:

        textView.setThreshold(3);

The list of suggestions to display for the AutoCompleteTextView is obtained from the ArrayAdapter object:

        textView.setAdapter(adapter);

USING PICKER VIEWS

Selecting a date and time is one of the common tasks you need to perform in a mobile application. Android supports this functionality through the TimePicker and DatePicker views. The following sections demonstrate how to use these views in your activity.

TimePicker View

The TimePicker view enables users to select a time of the day, in either 24-hour mode or AM/PM mode. The following Try It Out shows you how to use the TimePicker in the latest version of the Android SDK. When you are creating the project for this sample, be sure that you choose an SDK that is level 23 or greater.

TRY IT OUT
Using the TimePicker View (BasicViews4.zip)

Using Android Studio, create an Android project and name it BasicViews4.

Modify the activity_main.xml file located in the res/layout folder by adding the following bolded lines:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<TimePicker android:id="@+id/timePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
<Button android:id="@+id/btnSet"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="I am all set!"
    android:onClick="onClick" />
</LinearLayout>

Press Shift+F9 to debug the application on the Android emulator. Figure 5.8 shows the TimePicker in action. You can use the numeric keypad or the time widget on the screen to change the hour and minute.

Figure 5.8

Back in Android Studio, add the following bolded statements to the MainActivity.java file:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.TimePicker;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    TimePicker timePicker;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        timePicker = (TimePicker) findViewById(R.id.timePicker);
        timePicker.setIs24HourView(true);
    }
    public void onClick(View view) {
        Toast.makeText(getBaseContext(),
                "Time selected:" +
                timePicker.getHour() +
        ":" + timePicker.getMinute(),
                Toast.LENGTH_SHORT).show();
    }
}

Press Shift+F9 to debug the application on the Android emulator. This time, the TimePicker is displayed in the 24-hour format. Clicking the Button displays the time that you have set in the TimePicker (see Figure 5.9).

Figure 5.9

How It Works

The TimePicker displays a standard UI to enable users to set a time. By default, it displays the time in the AM/PM format. If you want to display the time in the 24-hour format, you can use the setIs24HourView() method.

To programmatically get the time set by the user, use the getHour() and getMinute() methods:

public void onClick(View view) {
        Toast.makeText(getBaseContext(),
                "Time selected:" +
                timePicker.getHour() +
        ":" + timePicker.getMinute(),
                Toast.LENGTH_SHORT).show();
    }

Although you can display the TimePicker in an activity, it's better to display it in a dialog window because after the time is set, the window disappears and doesn't take up any space in an activity. The following Try It Out demonstrates how to do it.

TRY IT OUT
Using a Dialog to Display the TimePicker View

Using the BasicViews4 project created in the previous Try It Out, modify the MainActivity.java file as shown here:

import android.app.TimePickerDialog;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.widget.TimePicker;
import java.util.Calendar;
public class MainActivity extends AppCompatActivity {
TimePickerDialog.OnTimeSetListener dialogListener = new TimePickerDialog.OnTimeSetListener() {
    @Override
    public void onTimeSet(TimePicker timePicker, int i, int i1) {
    }
};
    Calendar cal = Calendar.getInstance();
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        showTimeDialog();
    }
    public void showTimeDialog(){
        new TimePickerDialog(MainActivity.this,dialogListener, cal.get(Calendar.HOUR_ OF_DAY), cal.get(Calendar.MINUTE), false).show(); {};
    }
}

Modify the activity_main.xml to look as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
</LinearLayout>

Press Shift+F9 to debug the application on the Android emulator. When the activity is loaded, you can see the TimePicker displayed in a dialog window (see Figure 5.10).

Figure 5.10

How It Works

To display a dialog window, you use the showTimeDialog() method:

        showTimeDialog();

When the showTimeDialog() method is called, it creates a new instance of the TimePickerDialog class, passing it the current context, the callback, the initial hour and minute. It also determines whether the TimePicker should be displayed in 24-hour format.

public void showTimeDialog(){
        new TimePickerDialog(MainActivity.this,dialogListener, cal.get(Calendar.HOUR_OF_DAY), cal.get(Calendar.MINUTE), false).show();
        {
        };
    }

DatePicker View

Another view that is similar to the TimePicker is the DatePicker. Using the DatePicker, you can enable users to select a particular date on the activity. The following Try It Out shows you how to use the DatePicker.

TRY IT OUT
Using the DatePicker View

Using the BasicViews4 project created earlier, modify the activity_main.xml file as shown here:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<Button android:id="@+id/btnSet"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="I am all set!"
    android:onClick="onClick"/>
<DatePicker android:id="@+id/datePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />
<TimePicker android:id="@+id/timePicker"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
</LinearLayout>

Add the following bolded statements to the MainActivity.java file:

import android.app.TimePickerDialog;
import android.icu.text.SimpleDateFormat;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.DatePicker;
import android.widget.TimePicker;
import android.widget.Toast;
import java.util.Date;
public class MainActivity extends AppCompatActivity {
    TimePicker timePicker;
    DatePicker datePicker;
    int hour, minute;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        timePicker = (TimePicker) findViewById(R.id.timePicker);
        timePicker.setIs24HourView(true);
        datePicker = (DatePicker) findViewById(R.id.datePicker);
    }
    private TimePickerDialog.OnTimeSetListener mTimeSetListener =
            new TimePickerDialog.OnTimeSetListener()
            {
                public void onTimeSet(
                        TimePicker view, int hourOfDay, int minuteOfHour)
                {
                    hour = hourOfDay;
                    minute = minuteOfHour;
                    SimpleDateFormat timeFormat = new SimpleDateFormat("hh:mm aa");
                    Date date = new Date();
                    String strDate = timeFormat.format(date);
                    Toast.makeText(getBaseContext(),
                            "You have selected " + strDate,
                            Toast.LENGTH_SHORT).show();
                }
            };
    public void onClick(View view) {
        Toast.makeText(getBaseContext(),
                "Date selected:" + (datePicker.getMonth() + 1) +
                        "/" + datePicker.getDayOfMonth() +
                        "/" + datePicker.getYear() + "\n" +
                        "Time selected:" + timePicker.getHour() +
                        ":" + timePicker.getMinute(),
                Toast.LENGTH_SHORT).show();
    }
}

Press Shift+F9 to debug the application on the Android emulator. After the date is set, clicking the Button displays the date set (see Figure 5.11).

Figure 5.11

How It Works

As with the TimePicker, you call the getMonth(), getDayOfMonth(), and getYear() methods to get the month, day, and year, respectively:

                "Date selected:" + (datePicker.getMonth() + 1) +
                "/" + datePicker.getDayOfMonth() +
                "/" + datePicker.getYear() + "\n" +

Note that the getMonth()method returns 0 for January, 1 for February, and so on. This means you need to increment the result of this method by one to get the corresponding month number.

Like the TimePicker, you can also display the DatePicker in a dialog window.

USING LIST VIEWS TO DISPLAY LONG LISTS

List views are views that enable you to display a long list of items. In Android, there are two types of list views: ListView and SpinnerView. Both are useful for displaying long lists of items. The Try It Outs in this section show them in action.

ListView View

The ListView displays a list of items in a vertically scrolling list. The following Try It Out demonstrates how to display a list of items using the ListView.

TRY IT OUT
Displaying a Long List of Items Using the ListView (BasicViews5.zip)

Using Android Studio, create an Android project and name it BasicViews5.

Modify the MainActivity.java file by inserting the bolded statements shown here:

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends ListActivity {
    String[] presidents = {
            "Dwight D. Eisenhower",
            "John F. Kennedy",
            "Lyndon B. Johnson",
            "Richard Nixon",
            "Gerald Ford",
            "Jimmy Carter",
            "Ronald Reagan",
            "George H. W. Bush",
            "Bill Clinton",
            "George W. Bush",
            "Barack Obama"
    };
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setListAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_1, presidents));
    }
    public void onListItemClick(
            ListView parent, View v, int position, long id)
    {
        Toast.makeText(this,
                "You have selected " + presidents[position],
                Toast.LENGTH_SHORT).show();
    }
}

Press Shift+F9 to debug the application on the Android emulator. Figure 5.12 shows the activity displaying the list of presidents' names.
Click an item. A message containing the item selected is displayed.

Figure 5.12

How It Works

The first thing to notice in this example is that the MainActivity class extends the ListActivity class. The ListActivity class extends the Activity class and displays a list of items by binding to a data source. Also note there is no need to modify the activity_main.xml file to include the ListView because the ListActivity class itself contains a ListView. With the onCreate() method, you don't need to call the setContentView() method to load the UI from the main.xml file:

        //---no need to call this---
        //setContentView(R.layout.activity_main);

In the onCreate() method, you use the setListAdapter() method to programmatically fill the entire screen of the activity with a ListView. The ArrayAdapter object manages the array of strings that are displayed by the ListView. In the preceding example, you set the ListView to display in the simple_list_item_1 mode:

        setListAdapter(new ArrayAdapter<String>(this,
            android.R.layout.simple_list_item_1, presidents));

The onListItemClick() method is fired whenever an item in the ListView has been clicked:

    public void onListItemClick(
    ListView parent, View v, int position, long id)
    {
        Toast.makeText(this,
            "You have selected " + presidents[position],
            Toast.LENGTH_SHORT).show();
    }

Here, you simply display the name of the president selected using the Toast class.

Customizing the ListView

The ListView is a versatile view that you can further customize. The following Try It Out shows how to allow multiple items in the ListView to be selected and how to enable filtering support.

TRY IT OUT
Enabling Filtering and Multi-Item Support in the ListView

Using the BasicViews5 project created in the previous section, add the following bolded statements to the MainActivity.java file:

public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ListView lstView = getListView();
        lstView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
        lstView.setTextFilterEnabled(true);
        setListAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_checked, presidents));
    }

Press Shift+F9 to debug the application on the Android emulator. You can now click each item to display the check icon next to it (see Figure 5.13).

Figure 5.13

How It Works

To programmatically get a reference to the ListView object, use the getListView() method, which fetches the ListActivity's list view. This is necessary so that you can programmatically modify the behavior of the ListView. In this case, you used the setChoiceMode() method to specify how the ListView should handle a user's click. For this example, set the setChoiceMode() to ListView.CHOICE_MODE_MULTIPLE, which allows the user to select multiple items:

        ListView lstView = getListView();
        lstView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);

A very cool feature of the ListView is its support for filtering. When you enable filtering through the setTextFilterEnabled() method, users can type on the keypad and the ListView automatically filters the items to match what was typed:

        lstView.setTextFilterEnabled(true);

Figure 5.14 shows the list filtering in action. Here, all items in the list that contain the word “john” appear in the result list.

Figure 5.14

Although the previous example shows that the list of presidents' names is stored in an array, in a real-life application it is recommended that you either retrieve them from a database or at least store them in the strings.xml file. The following Try It Out shows you how.

TRY IT OUT
Storing Items in the strings.xml File

Using the BasicViews5 project created earlier, add the following bolded lines to the strings.xml file located in the res/values folder:

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <string name="hello">Hello World, BasicViews5Activity!</string>
    <string name="app_name">BasicViews5</string>
    <string-array name="presidents_array">
        <item>Dwight D. Eisenhower</item>
        <item>John F. Kennedy</item>
        <item>Lyndon B. Johnson</item>
        <item>Richard Nixon</item>
        <item>Gerald Ford</item>
        <item>Jimmy Carter</item>
        <item>Ronald Reagan</item>
        <item>George H. W. Bush</item>
        <item>Bill Clinton</item>
        <item>George W. Bush</item>
        <item>Barack Obama</item>
    </string-array>
</resources>

Modify the MainActivity.java file as shown in bold:

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends ListActivity {
    String[] presidents;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        ListView lstView = getListView();
        lstView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
        lstView.setTextFilterEnabled(true);
        presidents =
                getResources().getStringArray(R.array.presidents_array);
        setListAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_checked, presidents));
    }
    public void onListItemClick(
            ListView parent, View v, int position, long id)
    {
        Toast.makeText(this,
                "You have selected " + presidents[position],
                Toast.LENGTH_SHORT).show();
    }
}

Press Shift+F9 to debug the application on the Android emulator. You should see the same list of names that appeared in the previous Try It Out.

How It Works

With the names now stored in the strings.xml file, you can retrieve it programmatically in the BasicViews5Activity.java file using the getResources() method:

        presidents =
                getResources().getStringArray(R.array.presidents_array);

In general, you can programmatically retrieve resources bundled with your application using the getResources() method.

This example demonstrated how to make items in a ListView selectable. At the end of the selection process, how do you know which item or items are selected? The following Try It Out shows you how.

TRY IT OUT
Checking Which Items Are Selected

Using the BasicViews5 project again, add the following bolded lines to the activity_main.xml file:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<Button
    android:id="@+id/btn"
    android:layout_width="fill_parent"
    android:layout_height="wrap_content"
    android:text="Show selected items"
    android:onClick="onClick"/>
<ListView
    android:id="@+id/android:list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>
</LinearLayout>

Add the following bolded lines to the MainActivity.java file:

import android.app.ListActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
public class MainActivity extends ListActivity {
    String[] presidents;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ListView lstView = getListView();
        lstView.setChoiceMode(ListView.CHOICE_MODE_MULTIPLE);
        lstView.setTextFilterEnabled(true);
        presidents =
                getResources().getStringArray(R.array.presidents_array);
        setListAdapter(new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_checked, presidents));
    }
    public void onListItemClick(
            ListView parent, View v, int position, long id)
    {
        Toast.makeText(this,
                "You have selected " + presidents[position],
                Toast.LENGTH_SHORT).show();
    }
    public void onClick(View view) {
        ListView lstView = getListView();
        String itemsSelected = "Selected items: \n";
        for (int i=0; i<lstView.getCount(); i++) {
            if (lstView.isItemChecked(i)) {
                itemsSelected += lstView.getItemAtPosition(i) + "\n";
            }
        }
        Toast.makeText(this, itemsSelected, Toast.LENGTH_LONG).show();
    }
}

Press Shift+F9 to debug the application on the Android emulator. Click a few items and then click the Show Selected Items button (see Figure 5.15). The list of names selected is displayed.

Figure 5.15

How It Works

In the previous section's exercise, you saw how to populate a ListView that occupies the entire activity. In that example, there is no need to add a ListView element to the activity_main.xml file. In this example, you saw how a ListView can partially fill an activity. To do that, you add a ListView element with the id attribute set to @+id/android:list:

<ListView
    android:id="@+id/android:list"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"/>

You then load the content of the activity using the setContentView() method (previously commented out):

        setContentView(R.layout.main);

To find out which items in the ListView have been checked, use the isItemChecked() method:

        ListView lstView = getListView();
        String itemsSelected = "Selected items: \n";
        for (int i=0; i<lstView.getCount(); i++) {
            if (lstView.isItemChecked(i)) {
                itemsSelected += lstView.getItemAtPosition(i) + "\n";
            }
        }
        Toast.makeText(this, itemsSelected, Toast.LENGTH_LONG).show();

The getItemAtPosition() method returns the name of the item at the specified position.

Using the Spinner View

The ListView displays a long list of items in an activity, but you might want the user interface to display other views, meaning you do not have the additional space for a full-screen view, such as the ListView. In such cases, you should use the SpinnerView. The SpinnerView displays one item at a time from a list and enables users to choose from them.

The following Try It Out shows how you can use the SpinnerView in your activity.

TRY IT OUT
Using the SpinnerView to Display One Item at a Time (BasicView6.zip)

Using Android Studio, create an Android project and name it BasicViews6.

Modify the activity_main.xml file located in the res/layout folder as shown here:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >
<Spinner
    android:id="@+id/spinner1"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawSelectorOnTop="true"/>
</LinearLayout>

Add the following bolded lines to the strings.xml file located in the res/values folder:

<resources>
    <string name="hello">Hello World, BasicViews6Activity!</string>
    <string name="app_name">BasicViews6</string>
    <string-array name="presidents_array">
        <item>Dwight D. Eisenhower</item>
        <item>John F. Kennedy</item>
        <item>Lyndon B. Johnson</item>
        <item>Richard Nixon</item>
        <item>Gerald Ford</item>
        <item>Jimmy Carter</item>
        <item>Ronald Reagan</item>
        <item>George H. W. Bush</item>
        <item>Bill Clinton</item>
        <item>George W. Bush</item>
        <item>Barack Obama</item>
    </string-array>
</resources>

Add the following bolded statements to the MainActivity.java file:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.AdapterView;
import android.widget.ArrayAdapter;
import android.widget.Spinner;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    String[] presidents;
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        presidents =
                getResources().getStringArray(R.array.presidents_array);
        Spinner s1 = (Spinner) findViewById(R.id.spinner1);
        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_spinner_item, presidents);
        s1.setAdapter(adapter);
        s1.setOnItemSelectedListener(new AdapterView.OnItemSelectedListener()
        {
            @Override
            public void onItemSelected(AdapterView<?> arg0,
                                       View arg1, int arg2, long arg3)
            {
                int index = arg0.getSelectedItemPosition();
                Toast.makeText(getBaseContext(),
                        "You have selected item : " + presidents[index],
                        Toast.LENGTH_SHORT).show();
            }
            @Override
            public void onNothingSelected(AdapterView<?> arg0) { }
        });
    }
}

Press Shift+F9 to debug the application on the Android emulator. Click SpinnerView and you see a pop-up displaying the list of presidents' names (see Figure 5.16). Clicking an item displays a message showing the selected item.

Figure 5.16

How It Works

The onNothingSelected() method is fired when the user presses the back button, which dismisses the list of items displayed. In this case, nothing is selected so you do not need to do anything.

Instead of displaying the items in the ArrayAdapter as a simple list, you can display them using radio buttons. To do so, modify the second parameter in the constructor of the ArrayAdapter class:

        ArrayAdapter<String> adapter = new ArrayAdapter<String>(this,
                android.R.layout.simple_list_item_single_choice, presidents);

This causes the items to be displayed as a list of radio buttons (see Figure 5.17).

Figure 5.17

UNDERSTANDING SPECIALIZED FRAGMENTS

Chapter 3 discusses the fragment feature that was added in Android 3. Fragments allow you to customize the user interface of your Android application by dynamically rearranging fragments to fit within an activity. This enables you to build applications that run on devices with different screen sizes.

As you have learned, fragments are really “mini-activities” that have their own life cycles. To create a fragment, you need a class that extends the Fragment base class. In addition to the Fragment base class, you can also extend from some other subclasses of the Fragment base class to create more specialized fragments. The following sections discuss the three subclasses of Fragment:

ListFragment
DialogFragment
PreferenceFragment

Using a ListFragment

A list fragment is a fragment that contains a ListView, which displays a list of items from a data source, such as an array or a Cursor. A list fragment is useful because it's common to have one fragment that contains a list of items (such as a list of RSS postings), and another fragment that displays details about the selected posting. To create a list fragment, you need to extend the ListFragment base class.

The following Try It Out shows you how to get started with a list fragment.

TRY IT OUT
Creating and Using a List Fragment (ListFragmentExample.zip)

Using Android Studio, create an Android project and name it ListFragmentExample.

Modify the activity_main.xml file as shown in bold. (Please replace instances of com.jfdimarzio with references your project's package:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >
    <fragment
        android:name="com.jfdimarzio.listfragmentexample.Fragment1"
        android:id="@+id/fragment1"
        android:layout_weight="0.5"
        android:layout_width="0dp"
        android:layout_height="200dp" />
    <fragment
        android:name="com.jfdimarzio.listfragmentexample.Fragment1"
        android:id="@+id/fragment2"
        android:layout_weight="0.5"
        android:layout_width="0dp"
        android:layout_height="300dp" />
</LinearLayout>

Add an XML file to the res/layout folder and name it fragment1.xml.

Populate the fragment1.xml as follows:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ListView
        android:id="@id/android:list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:drawSelectorOnTop="false"/>
</LinearLayout>

Add a Java Class file to the package and name it Fragment1.

Populate the Fragment1.java file as follows:

import android.app.ListFragment;
import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ArrayAdapter;
import android.widget.ListView;
import android.widget.Toast;
public class Fragment1 extends ListFragment {
    String[] presidents = {
        "Dwight D. Eisenhower",
        "John F. Kennedy",
        "Lyndon B. Johnson",
        "Richard Nixon",
        "Gerald Ford",
        "Jimmy Carter",
        "Ronald Reagan",
        "George H. W. Bush",
        "Bill Clinton",
        "George W. Bush",
        "Barack Obama"
    };
    @Override
    public View onCreateView(LayoutInflater inflater,
    ViewGroup container, Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment1, container, false);
    }
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setListAdapter(new ArrayAdapter<String>(getActivity(),
            android.R.layout.simple_list_item_1, presidents));
    }
    public void onListItemClick(ListView parent, View v,
    int position, long id)
    {
        Toast.makeText(getActivity(),
            "You have selected " + presidents[position],
            Toast.LENGTH_SHORT).show();
    }
}

Press Shift+F9 to debug the application on the Android emulator. Figure 5.18 shows the two list fragments displaying the two lists of presidents' names.

Figure 5.18
Click any of the items in the two ListView views, and you see a message (see Figure 5.19).

Figure 5.19

How It Works

First, create the XML file for the fragment by adding a ListView element:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">
    <ListView
        android:id="@id/android:list"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_weight="1"
        android:drawSelectorOnTop="false"/>
</LinearLayout>

To create a list fragment, the Java class for the fragment must extend the ListFragment base class:

public class Fragment1 extends ListFragment {
}

You then declare an array to contain the list of presidents' names in your activity:

    String[] presidents = {
        "Dwight D. Eisenhower",
        "John F. Kennedy",
        "Lyndon B. Johnson",
        "Richard Nixon",
        "Gerald Ford",
        "Jimmy Carter",
        "Ronald Reagan",
        "George H. W. Bush",
        "Bill Clinton",
        "George W. Bush",
        "Barack Obama"
    };

In the onCreate() event, you use the setListAdapter() method to programmatically fill the ListView with the content of the array. The ArrayAdapter object manages the array of strings that are displayed by the ListView. In this example, you set the ListView to display in the simple_list_item_1 mode:

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setListAdapter(new ArrayAdapter<String>(getActivity(),
            android.R.layout.simple_list_item_1, presidents));
    }

The onListItemClick() method is fired whenever an item in the ListView is clicked:

    public void onListItemClick(ListView parent, View v,
    int position, long id)
    {
        Toast.makeText(getActivity(),
            "You have selected " + presidents[position],
            Toast.LENGTH_SHORT).show();
    }

Finally, you add two fragments to the activity. Note the height of each fragment:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="horizontal" >
<fragment
    android:name="net.learn2develop.ListFragmentExample.Fragment1"
    android:id="@+id/fragment1"
    android:layout_weight="0.5"
    android:layout_width="0dp"
    android:layout_height="200dp"/>
<fragment
    android:name="net.learn2develop.ListFragmentExample.Fragment1"
    android:id="@+id/fragment2"
    android:layout_weight="0.5"
    android:layout_width="0dp"
    android:layout_height="300dp"/>
</LinearLayout>

Using a DialogFragment

A dialog fragment floats on top of an activity and is displayed modally. Dialog fragments are useful when you need to obtain the user's response before continuing with execution. To create a dialog fragment, you must extend the DialogFragment base class.

The following Try It Out shows how to create a dialog fragment.

TRY IT OUT
Creating and Using a Dialog Fragment (DialogFragmentExample.zip)

Using Android Studio, create an Android project and name it DialogFragmentExample.
Add a Java Class file under the package and name it Fragment1.

Populate the Fragment1.java file as follows:

import android.app.AlertDialog;
import android.app.Dialog;
import android.app.DialogFragment;
import android.content.DialogInterface;
import android.os.Bundle;
public class Fragment1 extends DialogFragment {
    static Fragment1 newInstance(String title) {
        Fragment1 fragment = new Fragment1();
        Bundle args = new Bundle();
        args.putString("title", title);
        fragment.setArguments(args);
        return fragment;
    }
    @Override
    public Dialog onCreateDialog(Bundle savedInstanceState) {
        String title = getArguments().getString("title");
        return new AlertDialog.Builder(getActivity())
                .setIcon(R.mipmap.ic_launcher)
                .setTitle(title)
                .setPositiveButton("OK",
                        new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog,
                                                int whichButton) {
                                ((MainActivity)
                                        getActivity()).doPositiveClick();
                            }
                        })
                .setNegativeButton("Cancel",
                        new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog,
                                                int whichButton) {
                                ((MainActivity)
                                        getActivity()).doNegativeClick();
                            }
                        }).create();
    }
}

Populate the MainActivity.java file as shown here in bold:

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.util.Log;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        Fragment1 dialogFragment = Fragment1.newInstance(
                "Are you sure you want to do this?");
        dialogFragment.show(getFragmentManager(), "dialog");
    }
    public void doPositiveClick() {
        //---perform steps when user clicks on OK---
        Log.d("DialogFragmentExample", "User clicks on OK");
    }
    public void doNegativeClick() {
        //---perform steps when user clicks on Cancel---
        Log.d("DialogFragmentExample", "User clicks on Cancel");
    }
}

Press Shift+F9 to debug the application on the Android emulator. Figure 5.20 shows the fragment displayed as an alert dialog. Click either OK or Cancel and observe the message displayed.

Figure 5.20

How It Works

To create a dialog fragment, your Java class first must extend the DialogFragment base class:

public class Fragment1 extends DialogFragment {
}

In this example, you create an alert dialog, which is a dialog window that displays a message with optional buttons. Within the Fragment1 class, define the newInstance() method:

    static Fragment1 newInstance(String title) {
        Fragment1 fragment = new Fragment1();
        Bundle args = new Bundle();
        args.putString("title", title);
        fragment.setArguments(args);
        return fragment;
    }

The newInstance() method allows a new instance of the fragment to be created. Also, this method accepts an argument specifying the string (title) to display in the alert dialog. The title is then stored in a Bundle object for use later.

Next, you define the onCreateDialog() method, which is called after onCreate() and before onCreateView():

public Dialog onCreateDialog(Bundle savedInstanceState) {
        String title = getArguments().getString("title");
        return new AlertDialog.Builder(getActivity())
                .setIcon(R.mipmap.ic_launcher)
                .setTitle(title)
                .setPositiveButton("OK",
                        new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog,
                                                int whichButton) {
                                ((MainActivity)
                                        getActivity()).doPositiveClick();
                            }
                        })
                .setNegativeButton("Cancel",
                        new DialogInterface.OnClickListener() {
                            public void onClick(DialogInterface dialog,
                                                int whichButton) {
                                ((MainActivity)
                                        getActivity()).doNegativeClick();
                            }
                        }).create();
    }

Here, you create an alert dialog with two buttons: OK and Cancel. The string to be displayed in the alert dialog is obtained from the title argument saved in the Bundle object.

To display the dialog fragment, you create an instance of it and then call its show() method:

        Fragment1 dialogFragment = Fragment1.newInstance(
                "Are you sure you want to do this?");
            dialogFragment.show(getFragmentManager(), "dialog");

Also , you implement two methods, doPositiveClick() and doNegativeClick(), to handle the user clicking the OK or Cancel buttons, respectively:

    public void doPositiveClick() {
        //---perform steps when user clicks on OK---
        Log.d("DialogFragmentExample", "User clicks on OK");
    }
    public void doNegativeClick() {
        //---perform steps when user clicks on Cancel---
        Log.d("DialogFragmentExample", "User clicks on Cancel");
    }

Using a PreferenceFragment

Typically, in your Android applications you provide preferences for users to personalize the application. For example, you might allow users to save the login credentials that they use to access their web resources. Also, you could save information, such as how often the feeds must be refreshed (for example, in an RSS reader application), and so on. In Android, you can use the PreferenceActivity base class to display an activity for the user to edit the preferences. In Android 3.0 and later, you can use the PreferenceFragment class to do the same thing.

The following Try It Out shows you how to create and use a preference fragment in Android 3 and 4.

TRY IT OUT
Creating and Using a Preference Fragment (PreferenceFragmentExample.zip)

Using Android Studio, create an Android project and name it PreferenceFragmentExample.
Create a new xml directory under the res folder and then add a new XML resource file to it. Name the XML file preferences.xml.

Populate the preferences.xml file as follows:

<?xml version="1.0" encoding="utf-8"?>
<PreferenceScreen
    xmlns:android="http://schemas.android.com/apk/res/android">
    <PreferenceCategory android:title="Category 1">
        <CheckBoxPreference
            android:title="Checkbox"
            android:defaultValue="false"
            android:summary="True of False"
            android:key="checkboxPref"/>
        </PreferenceCategory>
    <PreferenceCategory android:title="Category 2">
        <EditTextPreference
            android:name="EditText"
            android:summary="Enter a string"
            android:defaultValue="[Enter a string here]"
            android:title="Edit Text"
            android:key="editTextPref"/>
        <RingtonePreference
            android:name="Ringtone Preference"
            android:summary="Select a ringtone"
            android:title="Ringtones"
            android:key="ringtonePref"/>
        <PreferenceScreen
            android:title="Second Preference Screen"
            android:summary=
                "Click here to go to the second Preference Screen"
            android:key="secondPrefScreenPref">
            <EditTextPreference
                android:name="EditText"
                android:summary="Enter a string"
                android:title="Edit Text (second Screen)"
                android:key="secondEditTextPref"/>
        </PreferenceScreen>
    </PreferenceCategory>
</PreferenceScreen>

Add a Java Class file to the package and name it Fragment1.

Populate the Fragment1.java file as follows:

import android.os.Bundle;
import android.preference.PreferenceFragment;
public class Fragment1 extends PreferenceFragment {
    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //---load the preferences from an XML file---
        addPreferencesFromResource(R.xml.preferences);
    }
}

Modify the MainActivity.java file as shown in bold:

import android.app.FragmentManager;
import android.app.FragmentTransaction;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
public class MainActivity extends AppCompatActivity {
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FragmentManager fragmentManager = getFragmentManager();
        FragmentTransaction fragmentTransaction =
                fragmentManager.beginTransaction();
        Fragment1 fragment1 = new Fragment1();
        fragmentTransaction.replace(android.R.id.content, fragment1);
        fragmentTransaction.addToBackStack(null);
        fragmentTransaction.commit();
    }
}

Press Shift+F9 to debug the application on the Android emulator. Figure 5.21 shows the preference fragment displaying the list of preferences that the user can modify.

Figure 5.21
When the Edit Text preference is clicked, a pop-up is displayed (see Figure 5.22).

Figure 5.22
Clicking Edit Text (Second Screen) causes a second preference screen to be displayed (see Figure 5.23).

Figure 5.23
To dismiss the preference fragment, click the Back button on the emulator.

How It Works

To create a list of preferences in your Android application, you first need to create the preferences.xml file and populate it with the various XML elements. This XML file defines the various items that you want to persist in your application.

To create the preference fragment, you must extend the PreferenceFragment base class:

public class Fragment1 extends PreferenceFragment {
}

To load the preferences file in the preference fragment, use the addPreferencesFromResource() method:

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        //---load the preferences from an XML file---
        addPreferencesFromResource(R.xml.preferences);
    }

To display the preference fragment in your activity, you can make use of the FragmentManager and the FragmentTransaction classes:

     FragmentManager fragmentManager = getFragmentManager();
     FragmentTransaction fragmentTransaction =
         fragmentManager.beginTransaction();
     Fragment1 fragment1 = new Fragment1();
     fragmentTransaction.replace(android.R.id.content, fragment1);
     fragmentTransaction.addToBackStack(null);
     fragmentTransaction.commit();

You need to add the preference fragment to the back stack using the addToBackStack() method so that the user can dismiss the fragment by clicking the Back button.

SUMMARY

This chapter provided a look at some of the commonly used views in an Android application. Although it is not possible to exhaustively examine each view in detail, the views you learned about here should provide a good foundation for designing your Android application's user interface, regardless of its requirements.

EXERCISES

How do you programmatically determine whether a RadioButton is checked?
How do you access the string resource stored in the strings.xml file?
Write the code snippet to obtain the current date.
Name the three specialized fragments you can use in your Android application and describe their uses.
You can find answers to the exercises in the appendix.

WHAT YOU LEARNED IN THIS CHAPTER

Topic	Key Concepts
`TextView`	`<TextView android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="@string/hello" />`
`Button`	`<Button android:id="@+id/btnSave" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Save"/>`
`ImageButton`	`<ImageButton android:id="@+id/btnImg1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:src="@drawable/icon"/>`
`EditText`	`<EditText android:id="@+id/txtName" android:layout_width="fill_parent" android:layout_height="wrap_content"/>`
`CheckBox`	`<CheckBox android:id="@+id/chkAutosave" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Autosave"/>`
`RadioGroup` and `RadioButton`	`<RadioGroup android:id="@+id/rdbGp1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:orientation="vertical" > <RadioButton android:id="@+id/rdb1" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Option 1"/> <RadioButton android:id="@+id/rdb2" android:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Option 2"/> </RadioGroup>`
`ToggleButton`	`<ToggleButton android:id="@+id/toggle1" android:layout_width="wrap_content"`
`ProgressBar`	`<ProgressBar android:id="@+id/progressbar" android:layout_width="wrap_content" android:layout_height="wrap_content"/>`
`AutoCompleteTextBox`	`<AutoCompleteTextView android:id="@+id/txtCountries" android:layout_width="fill_parent" android:layout_height="wrap_content"/>`
`TimePicker`	`<TimePicker android:id="@+id/timePicker" android:layout_width="wrap_content" android:layout_height="wrap_content"/>`
`DatePicker`	`<DatePicker android:id="@+id/datePicker" android:layout_width="wrap_content" android:layout_height="wrap_content"/>`
`Spinner`	`<Spinner android:id="@+id/spinner1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:drawSelectorOnTop="true"/>`
Specialized fragment types	`ListFragment, DialogFragment, and PreferenceFragment`

Previous Chapter

Chapter 4: Getting to Know the Android User Interface

Next Chapter

Chapter 6: Displaying Pictures and Menus with Views

Table of Contents for Beginning Android Programming with Android Studio, Fourth Edition

USING BASIC VIEWS

TextView View

Button, ImageButton, EditText, CheckBox, ToggleButton, RadioButton, and RadioGroup Views

ProgressBar View

AutoCompleteTextView View

USING PICKER VIEWS

TimePicker View

DatePicker View

USING LIST VIEWS TO DISPLAY LONG LISTS

ListView View

Customizing the ListView

Using the Spinner View

UNDERSTANDING SPECIALIZED FRAGMENTS

Using a ListFragment

Using a DialogFragment

Using a PreferenceFragment

SUMMARY

EXERCISES

WHAT YOU LEARNED IN THIS CHAPTER

Table of Contents for
Beginning Android Programming with Android Studio, Fourth Edition