Mobile Programmming Dr. Mohsin Ali Memon

Android GUI Architecture The Android UI framework is, like other Java UI frameworks, organized around the common Model-View-Controller pattern

The Model The Model is the backbone of your application—what it actually does. It might be, for instance, the database of music on your device and the code for playing the music.

The View The View is the visualization of the Model. More generally, a view is the portion of the application responsible for rendering the display, sending audio to the speakers, generating tactile feedback, and so on.

The Controller The Controller is the portion of an application that responds to external actions: a keystroke, a screen tap, an incoming call, and so forth. It is implemented as an event queue.

Assembling a Graphical Interface The Android UI framework provides both a complete set of drawing tools with which to build a UI, and a rich collection of prebuilt components based on these tools. The MapActivity and MyLocationOverlay classes make it possible to create extremely sophisticated applications without doing any custom drawing at all.

Assembling a Graphical Interface cont’d In the Android UI framework, the widgets are all subclasses of android.view.View.

Android Widget Toolbox Android supplies a toolbox of standard Views to help make an interactive interface TextView A standard read only text label. It supports multiline display, string formatting, and automatic word wrapping. EditText An editable text entry box. It accepts multiline entry and word wrapping. ListView A View Group that creates and manages a group of Views used to display the items in a List. The standard ListView displays the string value of an array of objects using a TextView for each item.

Android Widget Toolbox cont’d Spinner Composite control that displays a TextView and an associated ListView that lets you select an item from a list to display in the textbox. It has a Text View displaying the current selection, combined with a button that displays a selection dialog when pressed. Button Standard push-button

Android Widget Toolbox cont’d CheckBox Two-state button represented with a checked or unchecked box RadioButton Two-state grouped buttons. Presents the user with a number of binary options of which only one can be selected at a time.

Layouts/ ViewGroups Positioning of these views depend upon the android.view.ViewGroup. The view groups are the containers of these views LinearLayout - displays View-elements as a single row (if it is Horizontal) or a single column (if it is Vertical). TableLayout - displays elements in the form of a table, with rows and columns. RelativeLayout - each element’s position is configured relatively to other elements. AbsoluteLayout - each element is specified an absolute position on the screen in the coordinate system (x, y)

Example

Linear Layout code

LinearLayout Code cont’d

Relative Layout code

Absolute Layout code

Dimensions px Screen pixels in Physical inches pt Points - 1/72 of an inch based on the physical size of the screen. mm Physical millimeters dp Density-independent pixels relative to a 160- dpi screen. One dp is one pixel on a 160 dpi screen. When running on a higher density screen, the number of pixels used to draw 1dp is scaled up by a factor appropriate for the screen's dpi. sp Scale-independent pixels.  It is recommend when specifying font sizes

Example Project explored

Example Project explored again @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); final EditText tb1 = (EditText) findViewById(R.id.text1); final EditText tb2 = (EditText) findViewById(R.id.text2); final Button btnred = (Button) findViewById(R.id.button1); final Button btngreen = (Button) findViewById(R.id.button2); // create click listener OnClickListener oclbtnr = new OnClickListener() { @Override public void onClick(View v) { tb1.setText(………); } }; OnClickListener oclbtng = new OnClickListener() { @Override public void onClick(View v) { tb2.setText(………); } }; // assign click listener to the buttons btnred.setOnClickListener(oclbtnr); btngreen.setOnClickListener(oclbtng); } }

Handling user Interaction Events To make your new widget interactive, it will need to respond to user events like key presses, screen touches, and button clicks. onClick()From View.OnClickListener. This is called when the user either touches the item (when in touch mode), or focuses upon the item with the navigation-keys or trackball and presses the suitable "enter" key or presses down on the trackball.

Handling user Interaction Events cont’d onLongClick()From View.OnLongClickListener. This is called when the user either touches and holds the item (when in touch mode), or focuses upon the item with the navigation-keys or trackball and presses and holds the suitable "enter" key or presses and holds down on the trackball (for one second). onFocusChange()From View.OnFocusChangeListe ner. This is called when the user navigates onto or away from the item, using the navigation-keys or trackball.

Handling user Interaction Events cont’d onKey()From View.OnKeyListener. This is called when the user is focused on the item and presses or releases a hardware key on the device. onTouch()From View.OnTouchListener. This is called when the user performs an action qualified as a touch event, including a press, a release, or any movement gesture on the screen (within the bounds of the item).

Android Menu system To improve the usability of application menus, Android features a three-stage menu system optimized for small screens: The Icon Menu This compact menu appears along the bottom of the screen when the Menu button is pressed. It displays the icons and text for up to six Menu Items.

Android Menu system cont’d The Expanded Menu The expanded menu is triggered when a user selects the More Menu Item from the icon menu.

Android Menu system cont’d Submenus when a user selects a submenu such as given in the example, its items are displayed in a floating menu Dialog box Icons are not displayed in the submenu items, so it’s good practice to avoid assigning icons to submenu items.

Defining an Activity Menu To define a menu for an Activity, override its onCreateOptionsMenu method. This method is triggered the first time an Activity’s menu is displayed. The onCreateOptionsMenu receives a Menu object as a parameter. You can store a reference to, and continue to use, the Menu reference elsewhere in your code until the next time that onCreateOptionsMenu is called.

Defining an Activity Menu cont’d Use the add method on the Menu object to populate your menu. For each Menu Item, you must specify: A group value to separate Menu Items for batch processing and ordering A unique identifier for each Menu Item. For efficiency reasons, Menu Item selections are generally handled by the onOptionsItemSelected event handler This unique identifier is important to determine which Menu Item was pressed.

Defining an Activity Menu cont’d An order value that defines the order in which the Menu Items are displayed The menu text, either as a character string or as a string resource

Adding item to a menu

Checkbox, radio buttons menu items

Adding icon to Icon menu Icon is a drawable resource identifier for an icon to be used in the Menu Item. Icons are only displayed in the icon menu; they are not visible in the extended menu or submenus.

Creating shortcut keys for menu item You can specify a keypad shortcut for a Menu Item using the setShortcutmethod. Each call to setShortcut requires two shortcut keys, one for use with the numeric keypad and a second to support a full keyboard.

Menu Item Click Listener An event handler that will execute when the Menu Item is selected. For efficiency reasons, this is discouraged; instead, Menu Item selections should be handled by the onOptionsItemSelected handler