android
Madhukar Kunam 
Week4.pptxCOIT20270 Application Development for Mobile Platforms Week 4: Designing UI’s with Views
Dr. R. Balsys, CQU, 2012.
Source: Beginning Android Programming with Android Studio, J.F. DiMarzio, 2016
Week 4 – Designing UI’s with Views
Objectives, to understand how to use:
basic views
TextView views
Button, ImageButton, EditText, Checkbox, ToggleButton, RadioButton and RadioGroup views
ProgressBar views
AutoCompleteTextView views
Picker views – TimePicker and DatePicker
CQU - COIT20270 Application Development for Mobile Platforms
Basic Views
Basic views allow you to display text and perform selection. This includes-
TextView
Button
ImageButton
EditText
Checkbox
ToggleButton
RadioButton
RadioGroup
CQU - COIT20270 Application Development for Mobile Platforms
3
TextView view
This basic view allows you to display static text
<TextView> elements are contained in the main.xml file in the res/layout directory
CQU - COIT20270 Application Development for Mobile Platforms
4
Other Basic Views
Other basic views you will use include:
Button – a push button widget
ImageButton – a Button with an image on it
EditText – subclass of TextView with editable text
CheckBox – a button with checked and unchecked states
RadioGroup and RadioButton – RadioGroup is used to group RadioButton’s
ToggleButton – displays states using a light indicator
CQU - COIT20270 Application Development for Mobile Platforms
5
…Other Basic Views
Use “fill_parent” for android:layout_width or android:layout_height so that the basic view fills the parent view space
Use “wrap_content” for android:layout_width or android:layout_height so that the basic view tightly bounds the content only
The android:src value is used to define the image for an ImageButton
You can use the style attribute to set the style of a CheckBox to a star
RadioButtons in a RadioGroup automatically toggle off when one is selected
CQU - COIT20270 Application Development for Mobile Platforms
6
…Other Basic Views
Use android:orientation=“horizontal” to place RadioButtons horizontally, rather than in the default vertical layout
The android:id of a view is used by View.findViewById() to identify each unique view by its Id
The setOnClickListener() method is used to define a call-back for handling a click on a view
CQU - COIT20270 Application Development for Mobile Platforms
7
ProgressBar View
The ProgressBar view is used to indicate progress of some background task
The default view is indeterminate, merely showing cyclic animation, that you stop when the activity is complete
You hide a ProgressBar by setting its Visibility attribute to View.Gone. This stops the ProgressBar and removes the it from the view
You can change the look of the ProgressBar using the constants: Widget.ProgressBar.Horizontal, Widget.ProgressBar.Small, Widget.ProgressBar.Large, Widget.ProgressBar.Inverse, Widget.ProgressBar.Small.Inverse, Widget.ProgressBar.Large.Inverse
CQU - COIT20270 Application Development for Mobile Platforms
8
AutoCompleteTextView
Is similar to EditText but it shows a list of suggestions to complete the list automatically
You first create a list of Strings for the autocomplete suggestions and use an ArrayAdapter object to manage the strings
A simple_dropdown_item_1line constant is used to cause the display of the strings 1 per line
The setThreshold() methods is used to determine how many characters must be typed before the suggestions are displayed
CQU - COIT20270 Application Development for Mobile Platforms
9
Picker Views - TimePicker
The TimePicker allows you to select the time of day in 24 hour or AM/PM mode
By default it displays time in AM/PM mode. To use 24 hour mode use the setIs24HourView() method
To programmatically get the time call the getCurrentHour() and getCurrentMinute() methods
To display the time in a dialog use showDialog(id) with an id for selecting a TimePickerDialog() method
The TimePickerDialog() method must be passed the current context, hour, minute and a flag for the mode
When the Set button is clicked in the dialog the onTimeSet() method is called and returns the values entered by the user
CQU - COIT20270 Application Development for Mobile Platforms
Add screenshot from emulator
10
PickerViews - DatePicker
The DatePicker view allows the user to pick a particular date
You can call getDayOfMonth(), getMonth() and getYear() methods to return the current day, month and year
When used in a dialog it works just like the TimePicker. The onDateSet() method returns the selected day, month and year values
CQU - COIT20270 Application Development for Mobile Platforms
11
COIT13234 Mobile Software Development Week 4: Designing UI’s with Views
Dr. R. Balsys, CQU, 2018.
Source: Beginning Android Programming with Android Studio, Dimarzio, 2016.
Week 4 – Chapter 4: Enhancing Your Apps
Objectives, to :
use the ListView view
customise the ListView view
use the Spinner view
use ListFragment, DialogFragment and PreferenceFragment
CQU - COIT20270 Application Development for Mobile Platforms
The ListView View
The ListView view displays a list of items as a vertical list
To use a ListView extend the ListActivity class
In the onCreate() method use the setListAdapter() method to programmatically fill the ListView
The onListItemClick() method is fired when a list element is clicked
theSetChoiceMode() method is used to customise the choices to CHOICE_MODE_NONE, CHOICE_MODE_SINGLE or CHOICE_MODE_MULTIPLE
The setTextFileFilterEnabled() method is used to filter choices based on what text is typed. To find out which items are checked used the isItemChecked() method
getItemAtPosition() method returns item at the position
CQU - COIT20270 Application Development for Mobile Platforms
The SpinnerView
The SpinnerView displays one item at a time and lets the user choose among them
The SpinnerView works much the same as the ListView with the exception of the onNothingSelected() method which is fired when the user pressing the back button which dismisses the view
CQU - COIT20270 Application Development for Mobile Platforms
Specialised Fragments
Fragments are used to dynamically customise the UI
Fragments are mini-activities with their own life-cycles
Three important Fragment sub-classes are the ListFragment, DialogFragment and the PreferenceFragment
CQU - COIT20270 Application Development for Mobile Platforms
ListFragment
The ListFragment displays a list of items from a data source such as an array or Cursor
List fragments extend the ListFragment base class
In your onCreate() method you use setListAdapter() to fill the list from the data source
The onListItemClick() method is called when a list element is clicked
CQU - COIT20270 Application Development for Mobile Platforms
DialogFragment
The DialogFragment floats on top of other fragments and is modal
DialogFragments are used when you need a response from the user before continuing
DialogFragments extend the DialogFragment base class
The newInstance() method allows a new instance of the fragment to be created and displayed
The onCreateDialog() method is used to create the dialog and show it by calling its show() method
You also need to implement doPositiveClick() and doNegativeClick() to handle clicks on the OK and Cancel buttons of the dialog
CQU - COIT20270 Application Development for Mobile Platforms
PreferenceFragment
PreferenceFragment’s are used to allow the user to save preferences for the application
You use a PreferenceActivity activity when working with preferences
You must create a preferences.xml file and define the various items that you want to persist in it
You load the preferences file in the preference fragment using the addPreferencesFromResouce() method
Use the FragmentManager and FragmentTransaction classes to display the preferences
CQU - COIT20270 Application Development for Mobile Platforms
