BuildingUser Interface for AndroidMobile...

OutlineAndroid GUI – Review

GUI Components

Building User Interface for Android Mobile Applications II

Mobile App Development

Przemyslaw Pawluk

Przemyslaw Pawluk Building User Interface for Android Mobile Applications II


GUI Components

1 Android GUI – ReviewMVC

2 GUI ComponentsViewsViewGroupsAdaptersLayoutsFragments



GUI ComponentsMVC





GUI ComponentsMVC

Android

ControllerView

Model

tap, key pressedredraw

updateinvalidate



GUI ComponentsMVC

MVC in Android

View

The View is the application’s feedback to the user and is a portionof application that is responsible for rendering the display.Graphically, it represents a rectangular area on the screen that iscompletely within the rectangular area represented by its parent inthe tree. The root of this tree is the application window.



GUI ComponentsMVC

MVC in Android

Controller

The Controller is the portion of an application that responds toexternal actions: a keystroke, a screen tap, an incoming call, etc.System maintains a queue of events and removes events in orderand dispatches them.

Vie

w

Qu

eue Controller2

Controller1

Controller3

eventeventeventevent



GUI ComponentsMVC

MVC in Android

Model

Controller as a reaction to the event notifies the Model. TheModel is updated and sends the information to the View to refresh(invalidate)

Vie

w

Qu

eue Controller Model

event event update

invalidate



GUI ComponentsMVC



GUI Components

ViewsViewGroupsAdaptersLayoutsFragments





GUI Components


Chapter 4 – Building UI

Using Views and layouts

Understanding Fragments

Optimizing layouts

Creating resolution-independent user interfaces

Extending, grouping, creating, and using Views

Using Adapters to bind data to Views



GUI Components


TextView and EditText

TextView

TextView is for display only. It can be used as a label or as a wayto present text without option to edit it.

EditText

EditText is a predefined subclass of TextView that includes richediting capabilities.



GUI Components


TextView properties

You can change its height, width, font, text color, backgroundcolor, etc.

Interesting non-standard properties

autoLink – if set to true, finds URLs in the displayed textand automatically converts them to clickable links.

autoText – if set to true, finds and corrects simple spellingerrors in the text.

editable – if set to true, indicates that the program hasdefined an input method to receive input text.

inputMethod – Identifies the input method

inputType – specifies a type of input e.g. phone no, email,password.a

ahttp://developer.android.com/reference/android/widget/TextView.html#attr android:inputMethodPrzemyslaw Pawluk Building User Interface for Android Mobile Applications II


GUI Components


Button and ImageButton

Button

The Button View is just a button, printed with some text toidentify it, that the user can click to invoke some action.

ImageButton

ImageButton View is a button with an image on it rather than onewith text



GUI Components


ImageButton Example

In main.xml

1 <ImageButton2 and ro i d : i d=”@+i d /btnDone”3 and ro i d : l a y o u t w i d t h=” wrap conten t ”4 and ro i d : l a y o u t h e i g h t=” wrap conten t ”5 />

in activity’s onCreate

1 . . .2 //Get p o i n t e r s to the Views d e f i n e d i n main . xml3 btn1 = ( ImageButton ) f i ndV i ewBy Id (R . i d . btnDone ) ;4 . . .5 // Set the image f o r the Done button6 btn1 . s e t ImageResou rce (R . d rawab le . l o g ) ;



GUI Components


Adapters and AdapterViews

Adapters

The Adapter has two responsibilities:

find the data object that corresponds to a particular index

supply a view through which the data at a particular index canbe displayed.

AdapterViews

The AdapterView is a generic, list-oriented view of data. Anycollection of data objects that can be ordered in some relativelystable way can be displayed through an AdapterView.



GUI Components


CheckBoxes, RadioButtons, and Spinners

Check-Boxes are typically used when you want to offermultiple selections

RadioButtons are used when only one choice is allowed at atime

Spinners are similar to combo boxes, displays the currentlyselected option, along with a pull-down list from which theuser can click on another option to select it.

All above are optimized in Android to serve better in touchscreenenvironment



GUI Components


CheckBox

The CheckBox View takes care of flipping its state back and forthand displaying the appropriate checkmark when the state is true.All you have to do is create an OnClickListener to catch clickevents, and you can add whatever code you want to react.



GUI Components


RadioGroup

RadioGroup View is really a ViewGroup that contains any numberof RadioButton Views. The user can select only one of the buttonsat a time, and you capture the selections by settingOnClickListeners for each RadioButton. Note that clicking onone of the RadioButtons does not fire a click event for theRadioGroup.



GUI Components


Spinner

Spinners require the most work of these three Views, but can alsoprovide the best use of scarce screen real estate. To make it workyou have to:

Create a list of the selections (can be dynamic)

Create an ArrayAdapter from the list that the Spinner canuse for its drop-down list.

Create an onItemSelectedListener for the Spinner tocapture select events.

Note

If you declared values in XML then Adapter is implicit!



GUI Components


WebView

WebView

A View that displays web pages. This class is the basis upon whichyou can roll your own web browser or simply display some onlinecontent within your Activity. It uses the WebKit rendering engineto display web pages and includes methods to navigate forward andbackward through a history, zoom in and out, perform textsearches and more.

To enable zoom

Set WebSettings.setBuiltInZoomControls



GUI Components




GUI Components


ViewGroup

ViewGroups are Views that contain child Views.



GUI Components


ListView and ListActivity

ListView

ListView is similar to Gallery, the difference is in scrolling. Galleryprovides horizontal while ListView vertical scrolling capabilities.

ListActivity

Is used to create a ListView that takes up the entire screen.Simple implementation can use a simple String array containingdata, an ArrayAdapter that contains a reference to this list ofstrings and ListActivity using Adapter. See the example in theHallo Android for more details.



GUI Components


ScrollView

A ScrollView is a container for another View that lets the userscroll that View vertically

ScrollView vs. ListView

ListView is designed to display a set of similar things (e.g. makesof cars). The ScrollView, on the other hand, allows an arbitraryView to scroll vertically.



GUI Components


TabHost

Three different approaches for setting the tab’s content

Set the content of a tab to an Intent

Use a TabContentFactory to create the tab’s contenton-the-fly

Retrieve the content from an XML layout file, much like thatof a regular Activity



GUI Components






GUI Components


Adapters

Why?

Android supplies a set of Adapters that can pump data fromcommon data sources (including arrays and Cursors) into thenative controls that extend Adapter View.

Responsibilities

Adapters are responsible both for supplying the data and forcreating the Views that represent each item, Adapters can radicallymodify the appearance and functionality of the controls they arebound to.



GUI Components


Two useful adapters

ArrayAdapter

It uses generics to bind an Adapter View to an array of objects ofthe specified class. By default, it uses the toString value of eachobject in the array to create and populate Text Views.

SimpleCursorAdapter

It enables you to bind the Views within a layout to specificcolumns contained within a Cursor (returned from a ContentProvider). The adapter will create a new View for each Cursorentry and inflate the layout into it, populating each View withinthe layout using the Cursor’s corresponding column value.



GUI Components


Creating and applying an Adapter

ArrayList<String> myStringArray =new ArrayList<String>();

int layoutID = android.R.layout.simple_list_item_1;

ArrayAdapter<String> myAdapterInstance;

myAdapterInstance =new ArrayAdapter<String>(this, layoutID, myStringArray);

myListView.setAdapter(myAdapterInstance);



GUI Components




GUI Components


Frame Layout

Frame Layout

The Frame Layout is sort of a null layout specification. It reservesspace on the screen for a single View to be drawn, and the View isalways located at the upper left of the space. There is no way tospecify a different location for the View, and there can be only oneView in the Layout.

Note!

If more than one View is defined in the layout file, they are justdrawn on top of each other, all pinned to the upper-left corner.



GUI Components


LinearLayout and TableLayout

LinearLayout

The most popular layout in Android. Views are laid out as either aseries of rows (vertical LinearLayout) or a series of columns(horizontal LinearLayout).

TableLayout

It lays out the included Views in the form of a table (similar to anHTML table).



GUI Components


AbsoluteLayout and RelativeLayout

AbsoluteLayout

An AbsoluteLayout puts views on the screen wherever you tell itto. No resizing, nor alignment is done. It just puts things whereit’s told so be careful!

RelativeLayout

It allows you to express the relative positioning of the Views in thescreen, and the layout manager will do its best to fit them all onthe screen in the proper relations. Properties such asandroid:layout below, android:layout toRightOf etc areused to express relative position



GUI Components




GUI Components


Fragments ...

... were introduced to Android as part of the Android 3.0Honeycomb (API level 11) release. They are now also available aspart of the Android support library, making it possible to takeadvantage of Fragments on platforms from Android 1.6 (API level4) onward.



GUI Components


Why?

Fragments enable you to divide your Activities into fullyencapsulated reusable components, each with its own lifecycle andUI.

What?

Each Fragment is an independent module that is tightly bound tothe Activity into which it is placed. Fragments can be reused withinmultiple activities, as well as laid out in a variety of combinationsto suit multipane tablet UIs and added to, removed from, andexchanged within a running Activity to help build dynamic UIs.



GUI Components


Building framgents

1 Extend the Fragment class to create a new Fragment,(optionally) defining the UI and implementing thefunctionality it encapsulates.

2 Assign a UI to your Fragment (It is possible to create aFragment that doesn’t include a UI but instead providesbackground behaviour for an Activity)

3 Override the onCreateView handler to in ate and return therequired View hierarchy



GUI Components


1

You must call back to the superclass when overriding most of theseevent handlers.

1Source: Professional Android 4 Application DevelopmentPrzemyslaw Pawluk Building User Interface for Android Mobile Applications II


GUI Components


Creating and Destroying fragments (1)

Create

The onAttach event is triggered before the Fragment’s UI hasbeen created, before the Fragment itself or its parent Activity havenished their initialization. Typically, the onAttach event is used togain a reference to the parent Activity in preparation for furtherinitialization tasks.As with Activities, you should use the onCreate method toinitialize your Fragment. It’s good practice to create any classscoped objects here to ensure they’re created only once in theFragment’s lifetime.

Note

Unlike Activities, the UI is not initialized within onCreate.



GUI Components


Creating and Destroying fragments (2)

Destroy

The created lifetime of your Fragment occurs between the first callto onCreate and the nal call to onDestroy. As it’s notuncommon for an Activity’s process to be terminated without thecorresponding onDestroy method being called, so a Fragmentcan’st rely on its onDestroy handler being triggered.



GUI Components


Fragment Manager

Each Activity includes a Fragment Manager to manage theFragments it contains. You can access the Fragment Managerusing the getFragmentManager method.It provides the methods used to access the Fragments currentlyadded to the Activity, and to perform Fragment Transaction toadd, remove, and replace Fragments.

FragmentManager fragmentManager =getFragmentManager();



GUI Components


FragmentTransaction

Fragment Transactions

Fragment Transactions can be used to add, remove, and replaceFragments within an Activity at run time. Using FragmentTransactions, you can make your layouts dynamic that is, they willadapt and change based on user interactions and application state.

FragmentTransaction fragmentTransaction =fragmentManager.beginTransaction();// Add, remove, and/or replace Fragments.// Specify animations.// Add to back stack if required.

fragmentTransaction.commit();



GUI Components


Android Fragment Classes

DialogFragment

A Fragment that you can use to display a floating Dialog over theparent Activity.

ListFragment

A wrapper class for Fragments that feature a ListView bound to adata source as the primary UI metaphor. It provides methods toset the Adapter to use and exposes the event handlers for list itemselection.

WebViewFragment

A wrapper class that encapsulates a WebView within a Fragment.The child WebView will be paused and resumed when theFragment is paused and resumed.


BuildingUser Interface for AndroidMobile...

Documents

Transcript of BuildingUser Interface for AndroidMobile...