1. Faculty of Technical Sciences
Android course
GUI
dr Milan Vidaković
Chair of Informatics
Faculty of Technical Sciences
University of Novi Sad

2. GUI elements Components (view, widgets, home-screen widgets) layouts
events
resources
menus
other activities invocation
dialogs
adapters
AsyncTask and Threads

3. Views
ViewGroup is the root class for the layout containers which hold View components as subelements and define their position on the screen
View is the root element for all GUI components. It is a rectangle object on the screen which draws its content on the screen and handles GUI events
View components are organised as a tree-like structure
View components can be defined in the xml layout file or programmatically

4. Widgets The other name for GUI components:
form widgets (TextView, Button, ToggleButton, itd.)
text widgets (EditText,DatePicker, itd.)
composite widgets (ListView, GridView, itd.)
advanced widgets (SurfaceView, ZoomControls)
Terminology problem: home-screen widgets are special GUI components which are placed on the desktop (or home-screen)

5. Form components To interact with user TextView draws text on screen
Button can be pressed (press or click or tap)
ToggleButton is a button which has two states (on/off)
CheckBox, RadioButton
Spinner – equivalent to the ComboBox (drop down)
RatingBar – draws a value as an array of stars
ProgressBar

6. Button, ToggleButton How to react on click (tap):
btnBig.setOnClickListener(new OnClickListener() {
public void onClick(View v) {
// WRITE YOUR CODE HERE }
});
Alterative way:
android:onClick=“myMethod" in the Button tag, in the layout XML file
create this method in the activity
public void myMethod(View view) {
ToggleButton state can be found usig this:
tglBtn.isChecked()
ComponentExamples

7. Spinner Spinner – a kind of a drop down (Combo Box).
Contains a header which displays currently selected option and a window which holds all the options.
ArrayAdapter – special class that feeds the spinner.
contains data that will be displayed
onItemSelectedListener – callback function that reacts on option selection.

8. Text widgets
EditText component has approx. 30 subtypes. inputType attribute defines those subtypes:
textPassword
text Address
textMultiLine
date
AutoCompleteTextView – automatically completes user input
based on the list of accepted valuesnudi mogućnost automatskog dopunjavanja teksta, na osnovu spiska reči
MultiAutoCompleteTextView – similar to the component above – allows multiple words to be chosen, and puts the delimiter between them

9. AutoCompleteTextView
private static final String[] COUNTRIES = new String[] { "Belgium", "Bulgaria", "France", "Italy", "Germany", "Spain", "Sweden" }; private void setAutoComplete() { ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, COUNTRIES); AutoCompleteTextView textView = (AutoCompleteTextView) findViewById(R.id.autoCompleteTextView1); textView.setAdapter(adapter); }

10. MultiAutoCompleteTextView
private static final String[] COUNTRIES = new String[] { "Belgium", "Bulgaria", "France", "Italy", "Germany", "Spain", "Sweden“ }; private void setMultiAutoComplete() { ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_dropdown_item_1line, COUNTRIES); MultiAutoCompleteTextView textView = (MultiAutoCompleteTextView) findViewById(R.id.multiAutoCompleteTextView1); textView.setAdapter(adapter); textView.setTokenizer(new MultiAutoCompleteTextView.CommaTokenizer()); }

11. Composite widgets List View – displays data in a list
Grid View – displays data in a table
ScrollView – provides scrolling capability to views which have more data than can be displayed
Web View – displays web pages
Gallery – displays images
Google Map View – displays Google map

12. ListView Displays data in a list
data comes from:
hardcoded values in the code,
database, or
custom source
setListAdapter method links ListView to data
data is placed in the Adapter component
onListItemClick – callback finction which is invoked when user clicks on an item
ListActivity – customised activity which holds one ListView
ListViewExamples

13. ListView data item display
There are system components for data item display:
this.setListAdapter(
new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,
names) );
Or, to make custom viewer for one row of data

14. GridView Displays data in a table Data is placed in an adapter:
gv.setAdapter(new ArrayAdapter<String>(this,
android.R.layout.simple_list_item_1,
PLANETS) );
OnItemClickListener.onItemClick() callback invoked when clicked on an item
GridViewExamples

15. ScrollView
If the number of items in a view is so big that only a fraction can be displayed, this component should hold the view as a subcomponent
There can be only one direct subcomponent (of layout type):
ScrollView
LinearLayout
TextView
TextView,
...
ListViewExamples

16. WebView Displays web page
JavaScript is turned off by default and there is no error handling
instead of using this component, a “real“ browser can be used:
Uri uri = Uri.parse("
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);
WebViewExamples

17. WebView A page is loaded by invoking the loadUrl() method:
web.loadUrl(“
Needs to add the following permission in the AndroidManifest.xml file:
<uses-permission android:name="android.permission.INTERNET" />

18. WebView
Instead of HTML page, this component can display a string containing HTML:
String summary = "<html><body>Hello <b>World</b>.</body></html>";
webview.loadData(summary, "text/html", "utf-8");

19. Home-screen widgets Components which are placed on the desktop
Thay are installed on the desktop
There is a desktop process, but these components are not part of tha t process
they are separated from the desktop process in order to save it when they crash
System can call this component periodically

20. Layouts
Layouts place components on the screen according to their internal logic
One activity can have one or more layouts
layouts can be combined (one layout inside other)
LayoutExamples

21. Layouts
Linear Layout
Relative Layout
Table Layout
Tab Layout

22. FrameLayout
Displays single component all over the window

23. LinearLayout
Puts components in a row or column (horizontal, or vertical)
there is an attribute: android:orientation = "vertical“ which sets the orientation
When adding component in the LinearLayout, following attributs are important:
android:layout_width and android:layout_heigth define width and height of a component
match_parent (replaced the old fill_parent) – means: use the whole space for the component
wrap_content – don’t use the whole space
layout_weight – sum of all weights is equal to 1; individual weight defines percentage of a space used for that component
Margin:
android:padding=“2dip”

24. LinearLayout
android:gravity attribute can be understood as an alignment:
top or bottom – set the object at the top or bottom of a container, and keep the dimensions
left or right – set the object left or right in the container, and keep the dimensions
center_vertical – put it in a center (vertically), and keep the dimensions
fill_vertical – grow vertically until the container is filled
center – place it in a center (both vert. and horiz.), and keep the dimensions

25. RelativeLayout Components are placed relative to each other
Ignores the gravity attribute
Following attributes have the value of an ID of a component to which the component is placed:
layout_below, layout_above, etc. define postion relative to the component which ID is given
layout_toRightOf, layout_toLeftOf
layout_alignTop, layout_alignRight

26. TableLayout Displays components in a table
Components are added in rows (inside the TableRow tag)
alignment of components in cells are defined with the android:gravity attribute
the number of added components define the number of cells in a row
Merge two cells by using the following attribute:
android:layout_span="2"
Components are placed in cells from left to right
if a component needs to pbe placed in a different row that the one it should be, the following attribute will be used:
android:layout_column=“2”

27. TabLayout
Puts several activities on a single window and makes them selectable by clicking on a tab above each activity
TabActivity class inherits Activity class and holds all the tabs
When designing each tab, in the layout file, the TabHost tag is used
it holds the TabWidget tag for tabs and FrameLayout for the content
TabSpec class defines various parameters for tabs (name, icon, etc.)

28. Events Android GUI applications react on various GUI events
Click (tap) on the control generates an evente which can will be handled by the appropriate Listener
For example, if we tap on the button, that event will be handled this way:
btnFrame.setOnClickListener(new View.OnClickListener() {
public void onClick(View v) {
// WRITE YOUR CODE HERE }
});

29. Resources res folder in a project contains resources Resources can be:
animation –anim folder
lists of used colors –color folder
multimedia (pictures, animations, etc.) –drawable folder
the rest –raw folder
android.resource://com.blast/raw/famous
xml files which define GUI –layout folder
Resource names must be made with lower case letters (with the optional ‘_’ character)

30. Menu Options Menu – invoked by clicking on the system menu button
onCreateOptionsMenu(menu) callback method is used to add items to the menu
onMenuItemSelected(featureId, menuItem) callback method is invoked when user selects an item
Context Menu – the equivalent of the context menu (right click menu on desktop computers)
registerForContextMenu(component) method registers the context menu for a given component
onCreateContextMenu(menu, view, contextMenuInfo) callback method is used to add items to the menu
onContextItemSelected(menuItem) callback method is invoked when users selects an item
MenuExamples

31. Options menu Adding items: @Override
public boolean onCreateOptionsMenu(Menu menu) {
super.onCreateOptionsMenu(menu);
menu.add(0, OPTIONS_MENU_ADD_ID, 0,
R.string.options_menu_add);
return true; }

32. Options menu How to react when an item is selected: @Override
public boolean onMenuItemSelected(int featureId, MenuItem item) {
switch (item.getItemId()) {
case OPTIONS_MENU_ADD_ID:
// TODO
return true; }
return super.onMenuItemSelected(featureId, item);

33. Context menu Creating context menu:
registerForContextMenu(komponenta); if an activity extends ListActivity, then it is done this way:
registerForContextMenu(getListView());
Adding items:
public void onCreateContextMenu(ContextMenu menu, View v,
ContextMenuInfo menuInfo) {
super.onCreateContextMenu(menu, v, menuInfo);
menu.add(0, DELETE_ID, 0, R.string.v3_menu_delete); }

34. Context menu How to figuer out which item was selected
Us the callback method:
boolean onContextItemSelected(MenuItem item) {
AdapterContextMenuInfo info = (AdapterContextMenuInfo) item.getMenuInfo();
Log.d("V3", „Item Id: " + info.id + ", position: “ + info.position); }

35. Invoke other activity
Create an Intent and then invoke on of the two following methods:
startActivity(Intent intent) or
startActivityForResult(Intent intent, int requestCode)
The first method invoks activity and does not expect the result from it
Invoked activity can call the finish() method to go back, but it is sufficient to click on the Back button on the device

36. Invoke other activity How to pass some data to the other activity:
Object o = this.getListAdapter().getItem(position);
selectedCity = o.toString();
// Toast.makeText(this, "You selected: " + selectedCity, Toast.LENGTH_LONG).show();
Intent i = new Intent(this, AnotherActivity.class);
i.putExtra("com.blast.CITY", selectedCity);
startActivityForResult(i, EDIT_ID);
How does the invoked activity fetch that data:
Bundle extras = getIntent().getExtras();
city = extras != null ? extras.getString("com.blast.CITY"): null;

37. Invoke other activity, but expect a result from it
The result of the other activity work is fetched in the following callback method (written in the main activity):
protected void onActivityResult(int requestCode, int resultCode,
Intent intent)
In the invoked activity, the result code is set and the return intent is created and set:
Intent i = new Intent();
Bundle b = new Bundle();
city = editCity.getText().toString();
b.putString("com.blast.CITY", city);
i.putExtras(b);
setResult(RESULT_OK, i);
finish();
return Intent from the other activity

38. Invoke other activity, but expect a result from it
The main activity fetches the data in the following callback method:
@Override
protected void onActivityResult(int requestCode, int resultCode, Intent intent) {
super.onActivityResult(requestCode, resultCode, intent);
if (resultCode == RESULT_OK) {
... }

39. Dialogs To communicate with user Dialog types: System dialogs:
DialogExamples
To communicate with user
background (main) activity looses focus. A dialog takes over the control
Dialog types:
System dialogs
Custom dialogs
System dialogs:
AlertDialog
invoked when typed: Activity.showDialog(ID)
onCreateDialog(ID) callback method creates a dialog
ProgressDialog
setProgress(int) sets the progress value

40. Custom dialogs
The layout of the dialog is defined in the appropriate file in the res/layout folder
Extends the Dialog class and sets the layout in the constructor (setContentView() method)
From the main activity:
bd = new BigDialog(this);
bd.show();
All the listeners for dialog GUI components are written in the main activity:
Button btnClose = (Button)bd.findViewById(R.id.btnDialogBigClose);

41. Custom dialogs Dialog can be created using the builder:
AlertDialog.Builder builder = new AlertDialog.Builder(main_activity);
builder.setMessage("Are you sure you want to DELETE city “+ getListAdapter().getItem(info.position) + "?");
builder.setCancelable(false);
builder.setPositiveButton("Yes“, new DialogInterface.OnClickListener() {
public void onClick(DialogInterface dialog, int id) {
Toast.makeText(ComplexAppActivity3.this, "DELETING city “ + l.getItem(info.position), Toast.LENGTH_LONG).show(); }
});
builder.setNegativeButton("No“, new DialogInterface.OnClickListener() {
dialog.cancel();
dialog = builder.create();

42. Notifications Status Bar Notification
if we tap on the message, the system will remove it and can invoke some activity (if defined)
Toast – a text which will be displayed for some short period of time
makeText(roditelj, tekst, dužina) method returns a reference to a Toast message
show() displays a message

43. Adapters Adapters link components and data
components are usually those of the list types (ListView, GridView, Spinner, etc.)
Adapters hold only the visible portion of data

44. Filling the adapter Several types:
static list of string from resources
an array of strings from the code
dynamically, from the code

45. Filling the adapter with static text
Create the appropriate xml file in the res/values folder:
<?xml version="1.0" encoding="utf-8"?>
<resources>
<string-array name="planets_array">
<item>Mercury</item>
<item>Venus</item>
</string-array>
</resources>
Create an adapter with this static text:
ArrayAdapter<CharSequence> adapter = ArrayAdapter.createFromResource(
this, R.array.planets_array, android.R.layout.simple_spinner_item);
listView.setAdapter(adapter);
ListViewExamples

46. Filling the adapter with an array of strings
Create an adapter:
private static final String[] COUNTRIES = new String[] {
"Belgium", "France", "Italy", "Germany", "Spain" };
...
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, COUNTRIES);
listView.setAdapter(adapter);

47. Filling the adapter from the collection
Create a collection and pass it to the constructor on an adapter:
ArrayList<String> cities = new ArrayList<String>();
cities.add(“Novi Sad”);
cities.add(“Beograd”);
ArrayAdapter<String> adapter = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, cities);
listView.setAdapter(adapter);

48. Displaying single row in a list
System viewers fo a row (android.R.layout):
activity_list_item
browser_link_context_header
expandable_list_content
list_content
preference_category
select_dialog_item
select_dialog_multichoice
select_dialog_singlechoice
simple_dropdown_item_1line
simple_expandable_list_item_1
simple_expandable_list_item_2

49. Displaying single row in a list
System viewers fo a row (android.R.layout):
simple_gallery_item
simple_list_item_1
simple_list_item_2
simple_list_item_activated_1
simple_list_item_activated_2
simple_list_item_checked
simple_list_item_multiple_choice
simple_list_item_single_choice
simple_selectable_list_item
simple_spinner_dropdown_item
simple_spinner_item
test_list_item
two_line_list_item

50. List items as objects
What if we want to fill the adapter with some objects which are not strings?
a list row should have multiple rows
we will create a custom row viewer (res/layout/custom_single_row.xml)
we will create a custom ArrayAdapter
we will extend the ArrayAdapter class and override at least getView() method
this method returns a row viewer component

51. Custom Adapter class CityHolder { TextView txtViewZip;
@Override public View getView(int position, View rowView, ViewGroup parent) { CityHolder holder = null; View row = rowView; if(row == null) { LayoutInflater inflater = ((Activity)context).getLayoutInflater(); row = inflater.inflate(textViewResourceId, parent, false); holder = new CityHolder(); holder.txtViewZip = (TextView)row.findViewById(R.id.textZip); holder.txtViewName = (TextView)row.findViewById(R.id.textName); row.setTag(holder); } else { holder = (CityHolder)row.getTag(); } City city = cities.get(position); holder.txtViewZip.setText(city.getZipCode()); holder.txtViewName.setText(city.getName()); return row;
class CityHolder {
TextView txtViewZip;
TextView txtViewName; }
class City {
String zipCode;
String name;

52. Changing GUI components
Each listener is executed in the UI thread
if we make a long-running code in the listener, it will make our application unresponsive and Android will offer to terminate the application
Solution:
use standard Java threads (Thread class or Runnable interface)
drawback – cannot modify GUI components from this therad (progress bar changing, for example)
if that is needed, the Handler class is used to change GUI components
use the AsyncTask class, which is made for this purpose and can change GUI components
it is executed in a separate thread when processing, but joins the UI thread when changing GUI components
AsyncTaskExamples

53. Standard Java thread Changing the GUI components via Handler class:
handler.post(new Runnable() {
@Override
public void run() {
pBar.setProgress(count); }
});
An attempt to change GUI component without Handler would crash the application!

54. AsyncTask class
Extends the AsyncTask class and override at least the doInBackground method:
@Override
protected Integer doInBackground(Integer... params) {
int start = params[0];
for (int i = start; i <= 5; i++) {
...
publishProgress(count);
return count; }
No need for Handler when changing GUI components
Started by invoking the execute(param) method:
ProgressBarTask task = new ProgressBarTask();
task.execute(1);

55. AsyncTask class
When extending the AsyncTask class, there are three generics:
class ProgressBarTask extends AsyncTask<Integer, Integer, Integer> {
the first generics is the input type (the type of the execute() method argument)
the second generics is the type of the intermediate parameter, which describes current progress in processing (used at the publishProgress() method)
the third generics is used to define the type of the result (used with the return keyword in the doInBackground() method)

56. AsyncTask class
Except doInBackground() method, we can override following methods:
onProgressUpdate(), invoked from the doInBackground() method by calling the publishProgress() method, which is used to change GUI
@Override
protected void onProgressUpdate(Integer ... value) {
int current = value[0];
pBar.setProgress(current); }
onPostExecute(), invoked from the doInBackground() method by returning the result: return (result);
protected void onPostExecute(Integer result) {
Toast.makeText(getApplicationContext(), "Job completed: " + result, Toast.LENGTH_LONG).show();