Outline Android 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
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
OutlineAndroid GUI – Review
GUI Components
1 Android GUI – ReviewMVC
2 GUI ComponentsViewsViewGroupsAdaptersLayoutsFragments
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI ComponentsMVC
1 Android GUI – ReviewMVC
2 GUI ComponentsViewsViewGroupsAdaptersLayoutsFragments
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI ComponentsMVC
Android
ControllerView
Model
tap, key pressedredraw
updateinvalidate
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
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
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
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
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI ComponentsMVC
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
1 Android GUI – ReviewMVC
2 GUI ComponentsViewsViewGroupsAdaptersLayoutsFragments
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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 ) ;
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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!
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
1 Android GUI – ReviewMVC
2 GUI ComponentsViewsViewGroupsAdaptersLayoutsFragments
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
ViewGroup
ViewGroups are Views that contain child Views.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
1 Android GUI – ReviewMVC
2 GUI ComponentsViewsViewGroupsAdaptersLayoutsFragments
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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);
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
1 Android GUI – ReviewMVC
2 GUI ComponentsViewsViewGroupsAdaptersLayoutsFragments
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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).
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
1 Android GUI – ReviewMVC
2 GUI ComponentsViewsViewGroupsAdaptersLayoutsFragments
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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();
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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();
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II
OutlineAndroid GUI – Review
GUI Components
ViewsViewGroupsAdaptersLayoutsFragments
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.
Przemyslaw Pawluk Building User Interface for Android Mobile Applications II