01 10 - graphical user interface - others

101
-1

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
101
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

01 10 - graphical user interface - others

  1. 1. Android Graphical User Interface
  2. 2. Agenda Familiarize with the main types of GUI components Layouts Basic Widgets Others
  3. 3. Menus
  4. 4. Using Menus Menus is not consuming ‘much’ view space. Android provides two types of menu known as: options menu and context menu.  The options menu is triggered by pressing the hardware Menu button on the device, while  The context menu is raised by a tap-and-hold on the widget associated to the menu.
  5. 5. Using Menus Example: Using an option menu Options available in this context Press Menu Button A max of six entries per menu. Excess will be displayed as part of the More option
  6. 6. Example: Using an option menu Available Options in this context Press Menu button Using Menus
  7. 7. Example : Dealing with SMS (text-messages) by using the built- in Messaging app’s context menu Tap-&-Hold Using Menus
  8. 8. Option and Context Menus may include: 1. Text 2. Icons 3. Radio Buttons 4. Check Boxes 5. Sub-menus 6. Short-cut keys
  9. 9. Example 1: Option Menu
  10. 10. Example 1: Option Menu
  11. 11. Example 1: Context Menu
  12. 12. Example 1: Using Option and Context Menu The app shows two text boxes. Menus are used to change text’s size, color, and style.
  13. 13. Example 1: Using Option and Context Menu The app shows two text boxes. Menus are used to change text’s size, color, and style.
  14. 14. Example 1: Using Option and Context Menu The app shows two text boxes. Menus are used to change text’s size, color, and style.
  15. 15. Example 1: Using Option and Context Menu
  16. 16. Example 1: Using Option and Context Menu
  17. 17. Example 1: Using Option and Context Menu
  18. 18. Example 1: Using Option and Context Menu
  19. 19. Comments on Creating an Option & Context Menu Step1. Indicate which widget(s) on your activity have context menus. To do this, call registerForContextMenu(theWidget) supplying the View that is the widget needing a context menu. Step2. Implement onCreateContextMenu(…), populate your menu adding text, icons, etc. to the different options.Use input menu parameter to determine which menu to build (assuming your activity has more than one). The onCreateContextMenu()method gets the Context Menu itself, the View the context menu is associated with, and a ContextMenu. ContextMenuInfo, which tells you which item in the list the user did the tap-and-hold over, in case you want to customize the context menu based on that information
  20. 20. Comments on Creating an Option & Context Menu •onCreateContextMenu() is called each time the context menu is requested. •Unlike the options menu (which is only built once per activity), context menus are discarded once they are used or dismissed. •To find out when a context menu choice was chosen, implement onContextItemSelected() on the activity.
  21. 21. Example 1: Using Option and Context Menu
  22. 22. Selection Widgets
  23. 23. Selection Widgets Radio Buttons and Check Buttons are suitable for selecting from a smallset of options. When the pool of choices is larger other widgets are more appropriate, those include classic UI controls such as: list boxes, combo boxes, drop-down lists, picture galleries, etc. Android offers a framework of data adapters that provide a common interface to selection lists ranging from static arrays to database contents. Selection views –widgets for presenting lists of choices –are handed an adapter to supply the actual choices.
  24. 24. Displaying/Selecting Options
  25. 25. Using Array Adapter  The easiest adapter to use is ArrayAdapter–all you need to do is wrap one of these around a Java array or java.util.List instance, and you have a fully functioning adapter: The Array Adapter constructor takes three parameters: 1.The Context to use (typically this will be your activity instance) 2.The resource ID of a view to use (such as the built-in system resource android.R.layout.simple_list_item_1as shown above) 3.The actual (source) array or list of items to show
  26. 26. Example 1: A simple list Instead of Activity we will use a ListActivity which is an Android class specializing in the use of ListViews.
  27. 27. Example 1: A simple list (Activity) Instead of Activity we will use a ListActivity which is an Android class specializing in the use of ListViews.
  28. 28. Example 1: A simple list (Adapter)
  29. 29. Example 1: A simple list (out put)
  30. 30. Selection Widgets - Spin Control In Android, the Spinner is the equivalent of the drop-down selector. Spinners have the same functionality of a ListView but take less space. As with ListView, you provide the adapter for linking data to child views using setAdapter() Add a listener object to capture selections made from the list with setOnItemSelectedListener(). Use the setDropDownViewResource()method to supply the resource ID of the multi-line selection list view to use.
  31. 31. Example - Using the Spinner (Demo)
  32. 32. Example - Using the Spinner (Xml Layout)
  33. 33. Example - Using the Spinner (Activity)
  34. 34. Example - Using the Spinner (Events)
  35. 35. Selection Widgets - GridView GridView is a ViewGroup that displays items in a two-dimensional, scrollable grid. The grid items are automatically inserted to the layout using a ListAdapter.
  36. 36. Example . Grid View (Xml Layout)
  37. 37. Example . Grid View (Activity)
  38. 38. Example . Grid View (Events)
  39. 39. Selection Widgets - AutoCompleteTextView With auto-completion, as the user types, the text is treated as a prefix filter, comparing the entered text as a prefix against a list of candidates. Matches are shown in a selection list that, like with Spinner, folds down from the field. The user can either type out a new entry (e.g., something not in the list) or choose an entry from the list to be the value of the field. AutoCompleteTextView subclasses EditText, so you can configure all the standard look-and-feel aspects, such as font face and color. AutoCompleteTextView has a android:completionThresholdproperty, to indicate the minimum number of characters a user must enter before the list filtering begins.
  40. 40. Example . Auto Complete TextView
  41. 41. Example . AutoCompleteTextView (Xml layout)
  42. 42. Example . Auto Complete TextView (Activity)
  43. 43. Example . AutoCompleteTextView (Events)
  44. 44. Selection Widgets - Gallery Widget The Gallery widget provides a set of options depicted as images. Image choices are offered on a contiguous horizontal mode, you may scroll across the image-set.
  45. 45. Example - Gallery Widget (XML Layout)
  46. 46. Example - Gallery Widget (Activity)
  47. 47. Example - Gallery Widget (Events)
  48. 48. Example - Gallery Widget (Adapter)
  49. 49. Example - Gallery Widget (Adapter - cont)
  50. 50. Example - Gallery Widget (Adapter - cont)
  51. 51. Example - Gallery Widget (Adapter - cont)
  52. 52. Questions?
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×