1 / 47

User Interface and Handlers

User Interface and Handlers. Goal : Create an easy to use, intuitive, immersive experience. Can be done in code (like in Swing) Similar to previous generation UI API's (like Swing, AWT) Painful with lots of lines of code Five times more statements than XML version

damita
Télécharger la présentation

User Interface and Handlers

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript


  1. User Interface and Handlers Goal: Create an easy to use, intuitive, immersive experience • Can be done in code (like in Swing) • Similar to previous generation UI API's (like Swing, AWT) • Painful with lots of lines of code • Five times more statements than XML version • Normally done in XML and strongly advised • Progressive enhancement/Model-View (like JavaFX) • Easier to maintain, lots less code and separate from source • Can create specialized views for different environments • Store layout files as text in resource subdirectories • res/layout: The default version • res/layout-landscape, res/layout-fr-small

  2. User Interface Example • This application contains a series of labels presented vertically. • There is an outer container and two inner containers • The second inner container contains two lower level sub-containers

  3. Layout File Structure <?xml version="1.0" encoding="utf-8"?> <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <!-- NAME CONTAINER XML goes here --> <!-- ADDRESS CONTAINER goes here --> </LinearLayout> Notes • Shown is the outer container: like a frame in Java • Linear layout is similar to BoxLayout in Java • fill_parent means expand to use all the space provided by the parent container • Android > 2.2: fill_parent is deprecated; replaced by match_parent • "http://schemas.android.com/apk/res/android" contains XML android schema • Layouts and views can be nested, but keep the nesting to a minimum for maximum performance

  4. Name Container Shown as a comment in the previous slide <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Name:" /> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="John Doe" /> </LinearLayout> Notes • Use all available space horizontally and only the space needed vertically • This example uses hard-coded text, which is possible, but not advisable • TextView in this example is similar to Java JLabel components

  5. Address Container Shown as a comment in the previous slide <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="wrap_content"> <TextViewandroid:layout_width="fill_parent" android:layout_height="wrap_content" android:text="Address:" /> <TextViewandroid:layout_width="fill_parent" android:layout_height="wrap_content" android:text="911 Hollywood Blvd." /> </LinearLayout> Notes • Use all available space horizontally and only the space needed vertically • Two sub views (components) containing text strings

  6. Using String ids <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="horizontal" android:layout_width="fill_parent“ android:layout_height="wrap_content"> <TextViewandroid:id="@+id/nameText" android:text="@string/name_text" android:layout_width="wrap_content“ android:layout_height="wrap_content"/> <TextViewandroid:id="@+id/nameValue" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </LinearLayout> Notes • @string/name_text refers to a strings.xml entry in res/values/strings.xml<string name="name_text">Name:</string> • The + in @+id/nameValueText adds a code for nameValueText if not defined • Java Access: TextView name = (TextView)findViewById(R.id.nameValue);namevalue.setText("John Doe");

  7. Text Views • TextView: Like a smarter Java Jlabel • Attribute: android:autoLink= "email|web|phone|map" • Creates hyperlink, initiates a phone call, or draws a map • Code: (TextView)findViewById(R.id.tv).setAutoLinkMask(Linkify.ALL); • Other attributes: android:minLines, android:maxLines, etc. • EditText: Like Java JTextField with additional capabilities • Autocorrection for captalizing text, etc. • Able to validate syntax for phone numbers, emails, etc. • Display field hints: android:hint="@string/someHint" or setHint() • Additional attributes like android:textMultiLine, etc. • AutoCompleteTextView: Suggestions based on a supplied array of strings • MultiAutoCompleteTextView: Suggestions during text entry after token boundaries (like commas, spaces, and periods).

  8. EditText Example <EditText android:inputType="textMultiLine" <!-- Multiline input --> android:lines="8" <!-- Total Lines prior display --> android:minLines="6" <!-- Minimum lines --> android:gravity="top|left" <!-- Cursor Position --> android:maxLines="10" <!-- Maximum Lines --> android:layout_height="wrap_content" <!– Content determines height --> android:layout_width="fill_parent" <!-- Fill entire width --> android:scrollbars="vertical" <!-- Vertical Scroll Bar --> android:hint="@string/email_hint"    android:inputType="textEmailAddress" />

  9. Button Controls • Button(Example launches browser) Button btn = (Button)this.findViewById(R.id.btn);btn.setOnClickListener(new OnClickListner()){ Intent intent = new Intent(Intent.ACTION_VIEW, URI.parse("http://www.sou.edu)); startActivity(intent);}); • ImageButton: Clickable image (or icon) in res/drawable directory <ImageButton android:id="@+id/imageBtn" android:src="@drawable/btnImage" android:layout_width="wrap_content" android:layout_height="wrap_content" /> • ToggleButton: Switch from on to off on each click, bar shows green if on <ToggleButton android:id="@+id/cctglBtn" android:layout_width="wrap_content" android:layout_height="wrap_content" Android:textOn="Stop" Android:textOff="Run" android:text="Toggle Button"/>

  10. Checkbox Buttons <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <CheckBox android:text="Chicken" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <CheckBox android:text="Fish" android:layout_width="wrap_content" android:layout_height="wrap_content" /> <CheckBox android:text="Steak" android:layout_width="wrap_content" android:layout_height="wrap_content" /> </LinearLayout>

  11. Radio Buttons <LinearLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent"> <RadioGroupandroid:layout_width="wrap_content" android:layout_height="wrap_content"> <RadioButtonandroid:id="@+id/chRBtn" android:text="Chicken" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <RadioButtonandroid:id="@+id/fishRBtn" android:text="Fish" android:layout_width="wrap_content" android:layout_height="wrap_content"/> <RadioButtonandroid:id="@+id/stkRBtn" android:text="Steak" android:layout_width="wrap_content" android:layout_height="wrap_content"/> </layout>

  12. Other Android Controls • ImageView:<ImageView android:id="@+id:myImageCode" /> • Display a color: anroid:src="#555555" • Display an image: android:src="@drawable/manatee" android:scaleType="centerInside" • Specify a picture not in the res/drawable directoryImageView img = (ImageView)findViewById(R.id.myImageCode); img.setImageUri(Uri.fromFile(new File("/sdcard/cats.jpg"))); • DatePicker, TimePicker: Select a date,time using dropdown menus • DigitalClock:Display a digital clock updating automatically • MapView: Display a Google map • WebView:Display HTML/JavaScript from an Android native application

  13. Layout Managers A view that controls how the sub-views are arranged • LinearLayout • components arranged horizontally or vertically • Similar to Java BoxLayout • TableLayout • Specify rows and columns • Similar to laying out HTML tables • RelativeLayout: positioning relative to other components • layout_centerInParent, alignParentTop, alignParentBottom • layout_above, layout_toRightOf, layout_toLeftOf, layout_below • FrameLayout • Multiple components in the same space • Similar to Java OverlayLayout and CardLayout

  14. TableLayoutExample One row/ three columns Stretch to fill entire width <TableLayout xmlns:android=http://schemas.android.com/apk/res/android android:layout_width="fill_parent" android:layout_height="fill_parent" android:stretchColumns="0,1,2"> <EditText android:text="Full Name:"/> <TableRow> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Barack"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Hussein"/> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:text="Obama"/> </TableRow> </TableLayout> android:layout_span="2" to span two view columns

  15. Example: FrameLayout Only the first picture is visible Similar to Java OverlayLayout <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/frmLayout" android:layout_width="fill_parent" android:layout_height="fill_parent"> <ImageView android:id="@+id/one" android:src="@drawable/one" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitCenter" /> <ImageView android:id="@+id/two" android:src="@drawable/two" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitCenter" android:visibility="gone" /> </FrameLayout>

  16. Android Code for Frame Layout @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.frame); ImageView one = (ImageView)this.findViewById(R.id.one); ImageView two = (ImageView)this.findViewById(R.id.two; one.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { ImageView two=(ImageView) FramelayoutActivity.this.findViewById(R.id.two); two.setVisibility(View.VISIBLE); view.setVisibility(View.GONE); }}); two.setOnClickListener(new OnClickListener() { @Override public void onClick(View view) { ImageView one=(ImageView)FramelayoutActivity.this.findViewById(R.id.one); one.setVisibility(View.VISIBLE); view.setVisibility(View.GONE); }}); }

  17. Merging Directly into Parent View Note: no fill specifications ?xml version="1.0" encoding="utf-8"?> <merge xmlns:android="http://schemas.android.com/apk/res/android" <ImageViewandroid:id="@+id/one" android:src="@drawable/one" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitCenter" /> <ImageViewandroid:id="@+id/two" android:src="@drawable/two" android:layout_width="fill_parent" android:layout_height="fill_parent" android:scaleType="fitCenter" android:visibility="gone" /> </merge>

  18. Frame Layout Example <FrameLayout xmlns:android =http://schemas.android.com/apk/res/android android:layout_width="fill_parent" android:layout_height="fill_parent">    <ImageView  android:layout_width="fill_parent"         android:layout_height="fill_parent" android:scaleType="center" android:src="@drawable/golden_gate" />    <TextView        android:layout_width="wrap_content" android:layout_height="wrap_content"         android:layout_marginBottom="20dip"        android:layout_gravity="center_horizontal|bottom"        android:padding="12dip“ android:background="#AA000000"        android:textColor="#ffffffff" android:text="Golden Gate" /></FrameLayout>

  19. Frame Inefficiency Solution Eliminate extra layout by merging with parent <merge xmlns:android="http://schemas.android.com/apk/res/android">    <ImageView          android:layout_width="fill_parent"         android:layout_height="fill_parent"       android:scaleType="center"        android:src="@drawable/golden_gate" />   <TextView        android:layout_width="wrap_content"         android:layout_height="wrap_content"         android:layout_marginBottom="20dip"        android:layout_gravity="center_horizontal|bottom"        android:padding="12dip"        android:background="#AA000000"        android:textColor="#ffffffff" android:text="Golden Gate" /></merge>

  20. Reusable layoutsInserting one layout into another <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent" android:orientation="vertical"> <include android:id="@+id/my_actionbar" layout= "android:layout/actionbar" /> <include android:id= "@+id/my_image_text_layout" layout = "@layout/image_text_layout" /> </LinearLayout>

  21. Lazy Includes <?xml version="1.0" encoding="utf-8"?> <FrameLayoutxmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="match_parent" android:layout_height="match_parent"> <ListViewandroid:id="@+id/myListView" android:src="@drawable/one" android:layout_width="fill_parent" android:layout_height="fill_parent“ /> <ViewStubandroid:id="@+id/progress" android:inflateId="@+id/progress_inflate" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_gravity="bottom" android:layout= "@layout/progress_panel" /> </FrameLayout> Corresponding Java Code View stub = findViewById(R.id.progress_inflate); Stub.setVisibility(true); Later: Stub.setVisibility(false0; A ViewStub is an invisible, zero-sized View that inflates only if needed

  22. Weight and Gravity • Weight: Sizing a component in a view • Controls size relative to other components • Android:layout_weight • Components with large weights expand more • Gravity: Component alignment • android:gravity: applies to the text within a view • android:layout_gravity: applies to the view alignment • Possible values: "right", "left", "center", "top", "bottom", "center_vertical", "clip_horizontal"

  23. Padding Definition: Space around the text <LinearLayout xmlns:android=http://schemas.android.com/apk/res/android android:orientation="vertical" android:layout_width="fill_parent“ android:layout_height="fill_parent"> <EditText android:layout_width="wrap_content" android:text="one" android:layout_height="wrap_content" android:padding="40px" /> </LinearLayout> Measurements • Well known measurements: Pixels: px, Inches: in, Millimeters: mm, Points: pt (1/72 of an inch) • Density-independent pixels:dip or dp based on a 160-dp screen size • Scale-independent pixels: sp scales dp to font sizes if Font size is normal normal, sp=dp; if font size is large, sp>dp

  24. Density Independent pixels • Physical screen width 1.5 inches • Lower resolution screen • Dots Per Inch (dpi) 160 • Pixels 240 (width * dpi) • Density 1.0 (dpi/160) • Density Independent pixels 160 (160 * density) • Higher resolution • Dots Per Inch (dpi) 240 • Pixels 360 (width * dpi) • Density 1.5 (dpi/160) • Density Independent pixels 240 (160 * density)

  25. Complex Views Displays a set of data using a single view • ListView: A scrollable list displayed vertically • GridView: A scrollable list of items displayed with a fixed number of columns • SpinnerView: (Like a Java combo box)A scrollable drop down menu of choices • GalleryView: Horizontally scrollable list focusing on the center of the list Note: Analogous to Swing JTree, JList, JTable components

  26. AdapterViews • Purposes • Connect a complex view to the data • Define the display format of a particular cell, which can contain a variety of sub views • Reuse the cell layout component for memory, performance efficiency • Adapters Required Because:It is unworkable to display a large lists with thousands of components, each requiring megabytes of memory. • Definition: An Adapter object is a bridge between a view and the data that view displays. The Adapter provides access to the data items. The Adapter is also responsible for displaying each data set item • Built in Adapters • ArrayAddapter: Data items stored in an array • SimpleCursorAdapter: Data are rows of an SQL table • Custom Adapters: A new class that overrides various adapter methods

  27. Activity using ArrayAdapter public class MyActivity extends Activity { private ArrayAdapter<String> instance; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); // main.xml in res/layout ListView view = (ListView)findViewById(R.id.my_list_view); // scrollable list ArrayList<String> words = new ArrayList<String> // create some data (Arrays.asList("the", "quick", "green", "Android", "jumped“);     intlayoutID = android.R.layout.simple_list_item_1; // format of list items adapter = new ArrayAdapter<String>(this, layoutID, words); view.setAdapter(adapter); // Attach array adapter to the list adapter.notifyDataSetChanged(); // force redisplay of items } }

  28. Item class for a To Do list Application public class ToDoItem { String task; Date created; SimpleDataFormat sdf; public ToDoItem(String task, Date created) { sdf = new SimpleDateFormat("dd/mm/yy"); task = this.task; created = this.created; } public ToDoItem(String task) { this(task, new Date(java.lang.System.currentTimeMillis())); } public String getTask() { return task; } public Date getCreated() { return created; } @Override public String toString() { return "("+sdf.format(created)+") "+task; } } Goal: display a list of these To Do items

  29. CustomAdapter Code public class ToDoItemAdapter extends ArrayAdapter<ToDoItem> { private int resource; private SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yy"); private String INFLATER = Context.LAYOUT_INFLATER_SERVICE; public ToDoItemAdapter(Context context, int resource, List<ToDoItem> items) { super(context, resource, items); this.resource = resource; } @Override public View getView(int position, View view, ViewGroup parent) { LinearLayout myView; ToDoItem item = getItem(position); String taskString = item.getTask(); Date createdDate = item.getCreated(); String dateString = sdf.format(createdDate); if (view == null) { myView = new LinearLayout(getContext()); LayoutInflater li=(LayoutInflater)getContext().getSystemService(INFLATER); li.inflate(resource, myView, true); } else { myView = (LinearLayout) view; } myView.findViewById(R.id.rowDate).setText(dateString); myView.findViewById(R.id.row).setText(taskString); return myView; } }

  30. Menu Categories • Regular option menus: Activity associated (onCreateOptionsMenu()) • Action Bar Actions: Menu items shown on the action bar • Secondary menus: Rarely used menu items created separately from the parent menu appearing after regular menu items • Submenus: A menu within a menu that appears in a floating window; options appear when the user selects a parent item • Context menus: triggered by a long press on a view • Popup menus: An alternate way to attach menus to a view • Icon menus: List of icons displayed along the screen bottom • Alternative menus: Menu items from other applications included as a menu option Note: When more menu items exist than can show, a more button appears

  31. Option Menu Framework Classes: android.view.Menu, android.view.SubMenu, android.view.MenuItem

  32. Regular Menu From XML XML in file game_menu.xml <?xml version="1.0" encoding="utf-8"?><menu xmlns:android="http://schemas.android.com/apk/res/android"> <group android:id="@+id/menuGroup"> // Group of items tied together    <item android:id="@+id/new_game"  android:title="@string/new" />    <item android:id="@+id/help"  android:title="@string/help" /> <group></menu> Java Code to include the menu @Override public boolean onCreateOptionsMenu(Menu menu) {    super.onCreateOptionsMenu(menu); // Allow for system menu items MenuInflater inflater = getMenuInflater();inflater.inflate(R.menu.game_menu, menu);return true; // Force menu to be visible } Note: Android calls onPrepareMenuOption every time a menu is invoked. Overriding this method enables dynamically changing menu items.

  33. Menu Groups • Definition:A sequence of items from a men • Purpose:Control all grouped items at once • Examples: • menu.setGroupCheckable(id, checkable, exclusive): Check selected items; if exclusive, only one group item can be checked • menu.setGroupEnabled(id, enabled):Control ghosted items • menu.setGroupVisible(id, visible): Show or hide the group items • menu.removeGroup(id): Remove all items from the group

  34. Creating a Menu in Code • Regular menu itemsint group = Menu.FIRST, order=Menu.FIRST, menuID = 99; menu.add(group, menuID++, order++, "append");menu.add(group, menuID++, order++, "clear"); • Secondary menu items int group = Menu.CATEGORY_SECONDARY int order=Menu.FIRST, menuID = Menu.FIRST; menu.add(group, menuID++, order++, "secondary item #1"); menu.add(group, menuID++, order++, R.string.secItem2); • Java Setup code @Override public boolean onCreateOptionsMenu(Menu menu) { super.onCreateOptionsMenu(menu); // Allow for system menu items addRegularMenuItems(menu); addSecondaryMenuItems(menu); return true; // Force menu to show }

  35. Respond to Menu Item Selections Android calls onOptionItemSelected method when an item is selected @Override public booleanonOptionsItemSelected(MenuItem item) {    switch (item.getItemId()) {  case R.id.new_game: newGame(); return true; // consume this selection here     case R.id.help: showHelp(); return true; // consume this selection here case R.id.secondary: this.myMenu.setGroupVisible(Menu.CATEGORY_SECONDARY, true); return true; // consume this selection here     default:   return super.onOptionsItemSelected(item); } }

  36. Icon Menus • In XML: android:icon="@drawable/ballons" • In Code: item.setIcon(R.drawable.balloons); • Restrictions • Will not appear on expanded menu options (those which show only when the more button is selected) • Check marks are not supported

  37. Submenus • In XML: <item android:title="Outer Menu Item> <menu><item> . . .</item></menu> • In Code: int base = Menu.FIRST;∙ ∙ ∙ SubMenu sub = menu.addSubMenu(base, item++ ,Menu.NONE, "submenu"); sub.add(base, order++, menuID++, "sub item # 1"); sub.add(base,order++, menuID++, R.string.subItem2 ); • Restrictions • Icons work with submenus, but not with individual submenu items • You cannot nest a submenu to a submenu • Advantage:Android automatically controls the visibility • Note: The order argument is optional; Menu.NONE indicates a default order.

  38. Context Menus onContextItemSelected() View

  39. Context Menu Creation • Ownership:view • Creation:Activity • Register in the activities onCreate method @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); TextViewtv = (TextView)this.findViewById(R.id.textViewId); registerForContextMenu(tv); // Indicate that view has context menu } • Populate: (note: info can get position for complex views) onCreateContextMenu(ContextMenu m, View v, ContextMenuInfo info) • Listener:onContextItemSelected(MenuItem item)

  40. Popup Menu It displays when touching the image, It disappears when selecting an item or touching outside its bounds • Specify in an XML view declaration <ImageButtonandroid:layout_width="wrap_content" android:layout_height="wrap_content" android:src="@drawable/ic_overflow_holo_dark"android:contentDescription="@string/descr_overflow_button"android:onClick="showPopup" /> • Activity code to display the popup public void showPopup(View v) {   PopupMenu popup = new PopupMenu(this, v);MenuInflaterinflater = popup.getMenuInflater();inflater.inflate(R.menu.actions, popup.getMenu());popup.show();} // Note: R.menu.actions refers to the XML menu declaration

  41. Alternative Menus • Application menus with items pointing to other applications for retrieval or manipulation of particular data types • Content Providers expose data by defining a MIME type and a content URI access point for other applications • Example: (The application Employees maintains employee data) • MIME type:vnd.android.cursor.item/mina.android.Emps • Other application can access the data by calling the Uri content://mina.android.Emps/All access all employees or the Uri content://mina.android.Emps/1 access a single employee instance • An alternative menu item in Application A, when clicked, launches the employee data activitythrough the Uri to perform calculations

  42. The Employee Content Provider • The content provider defines an activity with the AndroidManifest.xml file can handle employee requests <activity android:name=".Demo“ android:label="@string/app_name"> <intent-filter android:label="Access Employees"> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.ALTERNATIVE" /> <data android:mimeType="vnd.android.cursor.item/mina.android.Emps" /> </intent-filter> </activity> • This activity will respond to implicit application intents with Action: Intent.ACTION_VIEW. Category: android.intent.category.ALTERNATIVE. MIME type: vnd.android.cursor.item/mina.android.Emps

  43. Alternative Menu Code public booleanonCreateOptionsMenu(Menu menu) { menu.add("Regular item"); //adds a regular menu item //create intent with the employee content provider Uri Intent launch = new Intent(Intent.ACTION_VIEW, Uri.parse("content://mina.android.Emps/All")); target.addCategory(Intent.CATEGORY_ALTERNATIVE); menu.addIntentOptions(Menu.CATEGORY_ALTERNATIVE, //item group Menu.CATEGORY_ALTERNATIVE, //item id Menu.CATEGORY_ALTERNATIVE, //item order this.getComponentName(), //our activity class name null, //Specific menu items to place first launch, // the intent to handle 0, //no special flags to control menu items null); //Optional array in which to place the menu return true; }

  44. Dialogs Analogous to Java's JOptionPane • Functionality: Popup windows for user interaction • Asynchronous:Returns immediately from the dialog call • Modal:The dialog gets focus while the dialog popup shows • Call Back Listeners:Required to receive user inputs • Layout: Dialogs can have a layout with subcomponents • Examples • Alerts:Simple output messages • Prompts:Accept user input • Toast: Alerts that disappear after a designated time period

  45. Alerts if (validate(field1) == false) { showAlert("Very Bad"); } public static void showAlert(String message, Context ctx) { AlertDialog.Builder builder = new AlertDialog.Builder(ctx); //Create a builder builder.setTitle("Alert Window"); // Configure the anonymous listener builder.setPositiveButton("OK", new OnClickListener() { public void onClick(DialogInterface v, int buttonId) {} } ); AlertDialog alert = builder.create(); // Create the dialog alert.show(); // Make it visible }

  46. Prompts • Create a layout for a prompt dialog: using xml in res/layout • Create a builder object AlertDialog.Builder builder = new AlertDialog.Builder(context); Builder.setTitle("Why this?"); • Set the layout as the builder view LayoutInflater promptLayout = LayoutInflater.from(activity); View view = promptLayout.inflate(R.layout.prompt, null); builder.setView(view); • Add buttons and callbacks PromptListener listener = new PromptListener(view); // User-defined class Builder.setPositiveButton("OK", listener); Builder.setNegativeButton("Cancel", listener); • Create and show the dialog: AlertDialog ad = builder.create(); ad.show(); Note: For applications with many dialogs, Android provides a Managed-Dialog factory scheme for reusing previously created dialog objects

  47. Toast An alert that displays for a period of time, and then disappears • Toast display (could be a useful debug tool) public void toastDisplay(String message) { String data = "MY_CLASS" + ":" + message; Toast toast = Toast.makeText (activity, data, Toast.LENGTH_SHORT); // user definable Toast.show(); } • Exercise the toast display function toastDisplay("hello"); toastDisplay(resources.getString(R.string.toast_msg);

More Related