Mobile Application Development

Mobile Application Development Part 1: Android Application Development

Lecture 10OutlineChapter 4: Designing Your User Interface with ViewsUsing Basic ViewsUsing Picker ViewsUsing List Views to Display Long ListsUnderstanding Specialized FragmentsDesigning Your User Interface with ViewsPart 1

ObjectivesHow to use the basic views in Android to design your user interfaceHow to use the picker views to display lists of itemsHow to use the list views to display lists of itemsHow to use specialized fragmentsLearning OutcomesBasic views: Commonly used views such as the TextView, EditText, and Button viewsPicker views: Views that enable users to select from a list, such as the TimePicker and DatePicker viewsList views: Views that display a long list of items, such as the ListView and the SpinnerView viewsSpecialized fragments: Special fragments that perform specific functionsUsing Basic ViewsTextViewEditTextButtonImageButtonCheckBoxToggleButtonRadioButtonRadioGroupUsing the Basic Views Step 1Using Eclipse, create an Android project and name it BasicViews1.Using the Basic Views Step 2Modify the main.xml file by adding the following elements shown in bold.

Using the Basic Views Step 2

Using the Basic Views Step 2

Using the Basic Views Step 3To see the views in action, debug the project in Eclipse by selecting the project name and pressing F11.

Using the Basic Views Step 4Click the various views and note how they vary in their look and feel. The figure shows: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.

AssignmentTextbook pp. 161-163 (4 Steps).Individual report contains output snapshots.Due time: After one week.

Using the ProgressBar View Step 1Using Eclipse, create an Android project and name it BasicViews2.Using the Basic Views Step 2Modify the main.xml file by adding the following elements shown in bold.

Using the Basic Views Step 3In the BasicViews2Activity.java file, add the following statements in bold.

Using the Basic Views Step 3

Using the ProgressBar View Step 4Press F11 to debug the project on the Android emulator. The figure shows the ProgressBar animating. After about five seconds, it will disappear.

AssignmentMake two views of ProgressBar: Circular and Linear Bar.Textbook pp. 172-173 (4 Steps) and pp. 174-176 (4 Steps).Individual report contains output snapshots.Due time: After one week.

Using the AutoCompleteTextView Step 1Using Eclipse, create an Android project and name it BasicViews3.Using the AutoCompleteTextView Step 2Modify the main.xml file by adding the following elements shown in bold.

Using the AutoCompleteTextView Step 3In the BasicViews3Activity.java file, add the following statements in bold.

Using the AutoCompleteTextView Step 4Press F11 to debug the application on the Android emulator. As shown in the figure, a list of matching names appears as you type into the AutoCompleteTextView.

AssignmentTextbook pp. 177-178 (4 Steps).Individual report contains output snapshots.Due time: After one week.

Using Picker ViewsTimePicker ViewDatePicker ViewUsing the TimePicker View Step 1Using Eclipse, create an Android project and name it BasicViews4.Using the TimePicker View Step 2Modify the main.xml file by adding the following elements shown in bold.

Using the TimePicker View Step 3Select the project name in Eclipse and press F11 to debug the application on the Android emulator. The figure shows the TimePickerin action. Besides clicking the plus (+) and minus (-) buttons, you can use the numeric keypad on the device to change the hour and minute, and click the AM button to toggle between AM and PM.

Using the TimePicker View Step 4Back in Eclipse, add the following statements in bold to the BasicViews4Activity.java file:

Using the TimePicker View Step 5Press F11 to debug the application on the Android emulator. This time, the TimePickerwill be displayed in the 24-hour format. Clicking the Button will display the time that you have set in the TimePicker.

AssignmentTextbook pp. 179-181 (5 Steps).Individual report contains output snapshots.Due time: After one week.

Using the DatePicker View Step 1Using the BasicViews4 project created earlier, modify the main.xml file as shown here

Using the DatePicker View Step 2Press F11 to debug the application on the Android emulator. The figure shows the DatePicker view you have to change the emulators orientation to landscape by pressing Ctrl-F11; portrait mode is too narrow to display the DatePicker.

Questions?