1

Mobile Information Device

Programming

Lecture 3: User interface

components: Part II

Lecture outline

• 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”, …};

• 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 screensetContentView(list);

A ListView Displayed

2

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 automaticallyArrayList<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 you’ll want to perform an action the moment the user selects from list.

• Use OnItemClickListener like this:MyListItemListener mlli = new MyListItemListener();

list.setOnItemClickListener(mlli);

where you’ll define

class MyListItemListener implements OnItemClickListener{

public void onItemClick(AdapterView<?> av,

View itemView, int pos,long id) {…

}}

Dealing with user selection

• int getCheckedItemCount(): 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.

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 that’s

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

• 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

Starting Activity

• Create Intent object

• Add any additional data needed

• Invoke “startActivity()” with the Intent

object as parameter.

3

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 classclass 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 BitmapCanvas c = new Canvas(myPic);

– Use “draw” methods in Canvas class to draw

lines, curves, etc.

4

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 exampleBitmap 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

• Best known: LinearLayout, RelativeLayout, and GridView

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);

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

5

Hiearchical Description

LinearLayout

(ViewGroup)

TextView

(View)

EditText

(View)

EditText

(View)

LinearLayout

(ViewGroup)

Button

(View)

Button

(View)

Button

(View)

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.

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 expected—not a label, the hint vanishes when the user enters textusername.setHint("Username");

6

InputTypes for EditText

• Password: Show dots insteadmy_edit.setInputType(InputType.TYPE_CLASS_TEXT | InputType.TYPE_TEXT_VARIATION_PASSWORD)

• 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

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);

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

• 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);

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

Listening for events

• Can associate listeners for each View

(item in the user interface).

• Listener objects

Design: Ordering Pizza

LoginType

selection

Crust

Specialty

Toppings Heat level

Displaypizza

Peppers

Yes

No

No

Yes

7

Login Form Toppings Form

Pepper Form Finished Veggie Lovers

Next lesson

• All about Drawing