Lecture outline Mobile Information Device Programming

Lecture 3: User interface components: Part II The List View Working with images ViewGroups Form Layout Form Items Designing a multi-screen application

Target: Pizza Order Application

A program that illustrates the use of Lists, ViewGroups and other Views. Allows the user to order a predefined (speciality) or customized (build your own) pizza from a fictional pizza parlor. Working with images.

The List View

ListView: Displays a list of items Presents the user with a list of choices. User can select:
One element: CHOICE_MODE_SINGLE Many elements: CHOICE_MODE_MULTIPLE

Showing a ListView
Create a list of values to show:
private String[] items = {First, Second, };

A ListView Displayed

Create the ListView object:

ListView list = new ListView(this);

Create an Adapter to connect items and ListView:

ArrayAdapter<String> choices; choices = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items);

Attach Adapter to ListView:

list.setAdapter(choices);

Display on screen
setContentView(list);

Modifying elements in ListView

Create an Adapter with an ArrayList as the source of items (instead of array) Then modify the ArrayList object and the ListView gets updated automatically
ArrayList<String> itemList; itemList = new ArrayList<String>() ; // Populate itemList in some way choices = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, itemList);

Dealing with item clicks

Often youll want to perform an action the moment the user selects from list. Use OnItemClickListener like this:
MyListItemListener mlli = new MyListItemListener(); list.setOnItemClickListener(mlli); where youll define class MyListItemListener implements OnItemClickListener{ public void onItemClick(AdapterView<?> av, View itemView, int pos,long id) { } }

Dealing with user selection

Returns the number of items currently selected. long[] getCheckedItemIds(): Returns the set of checked items ids. int getCheckedItemPosition(): Returns the currently checked item. SparseBooleanArray getCheckedItemPositions(): Returns the set of checked items in the list.
int getCheckedItemCount():

Example App: Activity Launcher

An app that shows a list of frequently used activities. User selects an item to launch corresponding Activity. Question: How do you launch another activity from your Activity?
May be your own activity or something thats already on the system

Intents
Intent: Description of an action to be performed
A message that you can send to the system to launch another activity

Starting Activity
Create Intent object Add any additional data needed Invoke startActivity() with the Intent object as parameter.

You create an Intent object by stating:

action: ACTION_VIEW, ACTION_DIAL, ACTION_EDIT, etc. data: to operate on, such as a person record in the contacts database, expressed as a Uri
Common URIs:
http://hofstra.edu tel:15164635560

What it looks like

User Interface Code

ArrayAdapter<String> choices; ListView list; String[] items = {"Go to Hofstra's Website", "Dial Krish", "Google Search" }; choices = new ArrayAdapter<String>(this, android.R.layout.simple_list_item_1, items); list = new ListView(this); list.setChoiceMode(ListView.CHOICE_MODE_SINGLE); list.setAdapter(choices); MyListItemListener mlli = new MyListItemListener(); list.setOnItemClickListener(mlli); setContentView(list);

Event Listener class

class MyListItemListener implements OnItemClickListener{ public void onItemClick( . . .) { Intent i; Uri u; String hofstra = "http://hofstra.edu"; String krish = "tel:15164635560"; String terms = "android intent"; switch((int)id){ case 0: u = Uri.parse(hofstra); i = new Intent(Intent.ACTION_VIEW,u); startActivity(i); break; case 1: u = Uri.parse(krish); i = new Intent(Intent.ACTION_DIAL, u); startActivity(i); break; case 2: // And so on } } }

Working with Images

Bitmap objects hold graphical images. Not automatically visible on screen, need to be explicitly placed is some other user interface element.
Bitmap in ImageView Bitmap drawn on arbitrary Views

Bitmap may be mutable (modifiable) or immutable (non-modifiable).

Loading images
Images loaded from files, etc. are immutable Images Only image format that is preferred is PNG We saw sample code to load Bitmap in Lesson 2.
private Bitmap loadImage(String filename) throws IOException{ AssetManager am = this.getAssets(); InputStream img_stream = am.open(filename); return BitmapFactory.decodeStream(img_stream); }

Manipulating images
Creating a mutable image:
Bitmap myPic; Bitmap.Config cfg = Bitmap.Config.ARGB_8888; myPic = Bitmap.createBitmap(width,height,cfg);

To edit (draw) on a mutable image:

Create a Canvas object for the Bitmap
Canvas c = new Canvas(myPic);

Use draw methods in Canvas class to draw lines, curves, etc.

Drawing into an Image

ImageView simple = new ImageView(this); Bitmap.Config cfg = Bitmap.Config.ARGB_8888; Bitmap mut = Bitmap.createBitmap(200, 200, cfg); Canvas g = new Canvas(mut); Paint p = new Paint(); p.setARGB(255, 255, 0, 0); g.drawCircle(50, 50, 25, p); p.setARGB(255, 0, 255, 0); p.setStyle(Paint.Style.FILL); g.drawRoundRect(new RectF(26, 26, 50, 50), 3, 3, p); p.setARGB(255, 0, 0, 0); p.setStyle(Paint.Style.FILL); g.drawText("Hello, Android!", 0, 50, p); simple.setImageBitmap(mut); simple.setScaleType(ImageView.ScaleType.CENTER); setContentView(simple);

Creating mutable Image from Immutable

Sometimes you want to load an image and then change it in some way.
Example: You want to overlay one image on top of another (top image must have transparent pixels).

Solution: Draw an immutable Image into a Mutable image

Example

Code for example

Bitmap crust = loadImage("crust1.PNG"); Bitmap olives = loadImage("olives.PNG"); Bitmap.Config cfg = Bitmap.Config.ARGB_8888; int width = crust.getWidth(); int height = crust.getHeight(); Bitmap scratch = Bitmap.createBitmap(width, height, cfg); Canvas c = new Canvas(scratch); Paint p = new Paint(); c.drawBitmap(crust, 0, 0, p); c.drawBitmap(olives, 0, 0, p); iv.setScaleType(ImageView.ScaleType.CENTER); iv.setImageBitmap(scratch);

ViewGroups
Can be used to create complex user interfaces. Acts as a container for widgets (user interface elements).
Components display data and input/edit data. A ViewGroup may contain other ViewGroups Also called Layouts

General Usage of LinearLayout

Create a LinearLayout:
loginForm = new LinearLayout();

Create Item(s)
txtUname = new EditText(); txtPasswd = new EditText();

Add them to the layout:

loginForm.addView(txtUname); loginForm.addView(txtPasswd);

Best known: LinearLayout, RelativeLayout, and GridView

Add Buttons, and finally display Form. See LoginForm project for code details

Hiearchical Description
LinearLayout (ViewGroup)

Widgets on ViewGroups
Multiple items on Layout, not all necessarily visible at the same time. User can navigate from item to item by scrolling or using the up/down/left/right navigation buttons. Items can be selected/edit similar to List, EditText, etc.

TextView (View)

EditText (View)

EditText (View)

LinearLayout (ViewGroup)

Button (View)

Button (View)

Button (View)

Widgets on Layouts
Can addView() and removeView() items as needed from Layout Can access/set item properties using set/get methods.

TextView
Used to display non-editable text on screen. Typical usage:
String message = "Enter info TextView myLabel = new TextView(this); myLabel.setText(message);

ImageView
Displays an image (perhaps from a Bitmap object) If the Image is mutable, any change made to it is reflected on display. Same usage as in Lecture 2, but can be added to ViewGroup using addView().

EditText
Allows user to input/edit text. Can display multi-line text. Usage:
txtLogin = new EditText(this);

Getting input text:

username = txtLogin.getText();

Can alter input method using setInputType() method Use the setHint() method to provide a hint of what is expectednot a label, the hint vanishes when the user enters text username.setHint("Username");

InputTypes for EditText

Password: Show dots instead
my_edit.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD)

Spinner
Allows the user to select from a list of choices. Similar in intent to ListView, but is a drop down. Was used in FacultyLookup app. Typical usage:
String names[] = {Adam, Bob, Charlie }; Spinner nameChoices = new Spinner(this); ArrayAdapter<CharSequence> adapter; adapter = new ArrayAdapter<CharSequence>(this, android.R.layout.simple_spinner_item, names); adapter.setDropDownViewResource(android.R.layout.simple_spinner_dropdown_item); nameChoices.setAdapter(adapter);

Email addresses:
InputType.TYPE_CLASS_TEXT|InputType.TYPE_TEXT_VARIATION_EMAIL_ADDRESS

Does not validate! Many many more at http://developer.android.com/reference/an droid/text/InputType.html

ProgressBar
Visual indication of progress in some task
How much of a file has been downloaded How many steps in a multi-step activity have been completed

LinearLayout
Items on a LinearLayout are laid out like words on a page: Horizontal from left to right, but one row high. If not all Items can fit in display, user can scroll down/up to see non-visible Items. Can change orientation to vertical

Non-interactive Can be made indeterminate when length of task is unknown: Cyclic animation Default is spinning wheel (indeterminate) To make horizontal:
progress = new ProgressBar(this, null, android.R.attr.progressBarStyleHorizontal);

Listening for events

Can associate listeners for each View (item in the user interface). Listener objects
Login

Design: Ordering Pizza

Type selection

Yes Specialty No No Crust Toppings Peppers

Display pizza

Yes

Heat level

Login Form

Toppings Form

Pepper Form

Finished Veggie Lovers

Next lesson
All about Drawing