Android course

1. 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 Viewis 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 • textEmailAddress • 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( newArrayAdapter<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("http://www.example.com"); Intent intent = new Intent(Intent.ACTION_VIEW, uri); startActivity(intent); WebViewExamples

17. WebView • A page is loaded by invoking the loadUrl() method: web.loadUrl(“http://www.google.com”); • 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_below=“@id/textView1”) • 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 –layoutfolder • 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 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 DialogExamples

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() { public void onClick(DialogInterface dialog,int id) { 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