Android Basics and User Interfaces

4/27/12
Android Basics and User Interfaces
yet another insignificant programming notes... | HOME
TABLE OF CONTENTS (HIDE)
Android Programming
Basics and Interfaces
1. Introduction
1. Introduction 2. The Android Platform 3. Android Application Framework

3.1 Revisit Hello-world 3.2 Android Application Framework 3.3 Activity
User
4. User Interfaces
4.1 Views & Layouts 4.2 Example 1: V e s (E i T x , R d o u t iw dtet aiBto 4.3 Example 2: Relative Layout 4.4 Next? 4.5 Example 3: Simple Calculator 4.6 Example 4
Android is an Operating System for mobile devices developed by Google, which is built upon Linux kernel. Android competes with Sambian OS, Apple's iOS (for iPhone/iPad), RIM's Blackberry, Microsoft's Windows Phone (previously called Windows Mobile), and many other proprietary mobile OSes.
A Brief History
In 2005, Google acquired a start-up called Android Inc. and started to work on the Android platform, in particular the Dalvik Java Virtual Machine. In 2007, a group of mobile handset producers and computing companies (including Google, Samsung, Motorola, Sony Ericsson, Intel, Toshiba, T-mobile, and Vodaphone) formed the "Open Handset Alliance" (OHA) to develop an open and non-proprietary mobile operating platform. In September 2008, Google released Android SDK 1.0, and made the source code available under the Apache's open-source license. Android SDK 1.0 and 1.1 did not support soft keyboard and required physical keypad. Android 1.5 fixed this problem and including new features such as madia recording and playback; and widgets. In October 2009, Google released Android SDK 2.0, which supports HTML 5, flash and many new features. In late 2010, Google released Android SDK 2.3, which supports the OpenGL ES 2.0, NearField (contact-less) Communications, and many improvements. In March 2011, Google released Android SDK 3.0 (codenamed Honeycomb) targeting the tablets, with larger screen and more powerful processor.
www3.ntu.edu.sg/home/ehchua/programming/android/Android_BasicsUI.html 1/20
4/27/12
Android 4.0 was released in October 2011.
2. The Android Platform

Dalvik
Virtual Machine
Dalvik VM (DVM) was developed by Google, led by Dan Bornstein, so as to optimize the performance of Java applications on mobile devices with limited capablities (Dalvik is the name of a town in Iceland). DVM takes the traditional Java classes (". l s ") and combines them into one or more Dalvik cas Executable (". e ") files. By removing duplicate information among the Java classes, it reduces the dx resultant file size compared with the traditional JAR file. However, as a result, the DVM is not binarycompatible with Java Virtual Machine (JVM). You need to convert the . l s into . e . cas dx Android 2.3 added a JIT (Just-in-time) compiler to improve the run-time performance. Android SDK uses XML file extensively. All the XML files are compiled into binary files to improve the performance.
Linux Kernel and Device Drivers

The Linux kernel is responsible for the OS functions, such as processor, memory, file, power management. The device drivers includes display, camera, keypad, flash memory, communications (GSM telephony, 3G, WiFi, bluetooth, Near-Field Contact-less communication), accessories (GPS, compass, accelerator), and etc.
Native C/C++ Libraries

4/27/12
The native C/C++ libraries include: Google's Skia: for 2D graphics support (also used in Google's Chrome). Khronos Group's OpenGL ES: for 3D graphics support. WebKit: for broswer support (also used in Google's Chrome). FreeType: for font support. SSL (Secure Socket Layer): for secure communications. SQLite: a lightweight relational database system. PacketVideo's OpenCore: video/audio record and playback in various format. Others.
Android Java API Packages

The API reference is available @ http://developer.android.com/reference/packages.html. adodap nri.p: adodve, adodwde: nri.iw nri.igt a d i i . r p i sa d o d a i a i n nrodgahc, nri.nmto: a d o d m d aa d o d s e c , a d o d t l p o y nri.ei, nri.peh nri.eehn: adodnt nri.e: a d o d b u t o ha d o d l c t o : nri.leot, nri.oain a d o d p o i e , a d o d c n e ta d o d d t b s : nri.rvdr nri.otn, nri.aaae adidgsue nro.etr: adodsx nri.a: adodscrt: nri.euiy a d o d t s , j n t f a e o kj n t r n e : nri.et ui.rmwr, ui.unr adodtx, adodui: nri.et nri.tl j v . a gj v . oj v . i , j v . e tj v . t l aaln, aai, aano aatx, aaui jv.e, jvxnt aant aa.e: j v . e u i yj v . r p o aascrt, aacyt: jv.q, jvxsl aasl aa.q: j v x x lo g j o , o g w c d mo g x l s xo g x l u l aa.m, r.sn r,3.o, r.m.a, r.mpl: ogaah.tp r.pceht:
3. Android Application Framework

Read: Android Developers Dev Guide "Application Fundamentals" (http://developer.android.com/guide/topics/fundamentals.html).
4/27/12
3.1 Revisit Hello-world

Let us revisit the Hello-world program, reproduced as follow:
pcaecmmts; akg o.yet ipr adodapAtvt; mot nri.p.ciiy ipr adodo.ude mot nri.sBnl; ipr adodwde.etiw mot nri.igtTxVe; pbi casHlonri etnsAtvt { ulc ls elAdod xed ciiy /*Cle we teatvt i frtcetd * * ald hn h ciiy s is rae. / @vrie Oerd pbi vi oCet(udesvdntnett){ ulc od nraeBnl aeIsacSae sproCet(aeIsacSae; ue.nraesvdntnett) TxVe txVe =nwTxVe(hs;/ CntutaTxVe U etiw etiw e etiwti) / osrc etiw I txVe.eTx(Hlo wrd"; etiwstet"el, ol!) / Sttx frTxVe / e et o etiw stotnVe(etiw; eCnetiwtxVe) / Ti Atvt st cnett teTxVe / hs ciiy es otn o h etiw } }
View
Views are UI components (such as button, label, text field) as well as containers, that could be used to build the user interface. In the hello-world, we use a view called T x V e to display the message. etiw Android supports many of the core JDK packages, except graphics packages AWT and Swing. It provides its own 2D graphics supports, via views and widgets. It supports 3D graphics via OpenGL ES.
Activity
An Android application typically comprises several activities. An activity has a single screen, which usually composes of one of more views. An activity interacts with the user to do ONE (and only ONE) thing, such as viewing information, or editing data.
Adodaietxl nriMnfs.m
Each application has a manifest, or application descriptor, to describe its contents, resources and behavior, such as the list of activities and services, intents and permissions. For example, the helloworld's manifest is as follow:
<xlvrin"."ecdn=uf8? ?m eso=10 noig"t-"> <aietxlsadod"tp/shmsadodcmakrsadod mnfs mn:nri=ht:/cea.nri.o/p/e/nri" pcae"o.yet akg=cmmts" adodvrinoe"" nri:esoCd=1 adodvrinae"."> nri:esoNm=10 <plcto adodio=@rwbeio" apiain nri:cn"daal/cn adodlbl"srn/p_ae> nri:ae=@tigapnm" <ciiyadodnm=.elAdod atvt nri:ae"Hlonri" adodlbl"srn/p_ae> nri:ae=@tigapnm" <netfle> itn-itr <cinadodnm=adoditn.cinMI"/ ato nri:ae"nri.netato.AN >
4/27/12
<aeoyadodnm=adoditn.aeoyLUCE"/ ctgr nri:ae"nri.netctgr.ANHR > <itn-itr /netfle> <atvt> /ciiy <apiain /plcto> <mnfs> /aiet
The root element < a i e t defines the XML name space and specifies the Java package name. mnfs> It contains one < p l c t o >element. apiain The < p l c t o >element specifies the icon and label to be used in the mobile device's "apps" apiain menu. It contains one ore more < c i i y elements. atvt> This application has one activity. The < c i i y element declares its Java class name atvt> (. e l A d o dwhere ' 'is relative to the package c m m t s ); and label (to be displayed Hlonri . o.yet as window title). It may contain < n e t f l e >to declare the intent for this activity. itn-itr (The Android application descriptor file A d o d a i e t x l is similar to web application nriMnfs.m deployment descriptor w b x lin a JavaEE web application.) e.m
Intent
An intent declares an intention to do something, such as launching an activity, broadcasting a message, starting a service, dialing or answering a phone call. An intent could be initiated by your application, or by the system to notify your application about a specific event (such as an incoming phone call). For example, the < n e t f l e >in the above manifest declares that this activity is the entry point itn-itr (a d o d i t n . c i n M I ) nri.netato.AN of the application when it is launched (a d o d i t n . a e o y L U C E ). Recall that an application can contain one or more nri.netctgr.ANHR activities, and each activity performs one task.
3.2 Android Application Framework

An Android application is made up of components. An distinct feature of an Android application, comparing with other traditional application environments, is that it can make use of another application's components, without including the codes of the other application or linking to it. Instead, an application can simply start other application's component by instantiate Java objects for that component. An Android application does not have a single entry point (there is no m i ( method), an) but consists of components that can be instantiated and run as the need arises. There are four type of application components: 1. Activity: An activity has a single screen, which usually composes of one of more views. An activity interacts with the user to perform one task. 2. Service: Background processes (similar to Windows' service or Unix's daemon), e.g., playing music. 3. Broadcast Receiver: Receives and reacts to system messages, e.g., low battery life. 4. Content Provider: Android defines a content provider mechanism for applications to share data
4/27/12
without exposing the underlying implementation. Via content provider, your application can share data with other applications, or use data from another application (e.g., from SQLite Database).
3.3 Activity
As mentioned, an activity is a single, focused thing that the user can do (e.g., viewing information or entering data). It is usually presented in a single screen. It interacts with the user, through a visual UI composing of one or more views. An Android application has one or more activities (multiple screens). One of the activities is marked as the starting activity, which can in turn start the next activity. To create an activity, we extend the a d o d a p A t v t class, and override some of its methods nri.p.ciiy (in particular, o C e t ( method) to provide our own implementation. A typical template of an nrae) A t v t is as follows: ciiy
pcae...; akg ... ipr adodapAtvt; mot nri.p.ciiy ipr adodo.ude mot nri.sBnl; pbi cas...etnsAtvt { ulc ls .. xed ciiy /*Cle bc we teatvt i frtcetd * * ald ak hn h ciiy s is rae. / @vrie Oerd pbi vi oCet(udesvdntnett){ ulc od nraeBnl aeIsacSae sproCet(aeIsacSae; ue.nraesvdntnett) ... ... stotnVe(...; / Stteue itraeo tesre eCnetiw...) / e h sr nefc n h cen } }
The life cycle of an activity is managed via the following call-back methods, defined in the A t v t ciiy base class: o C e t ( , o D s r y ) Called back when the A t v t is created/destroyed. nrae) neto(: ciiy o S a t ) o S o ( , o R s a t ) Called back when the A t v t is starting, stopping and ntr(, ntp) netr(: ciiy re-starting. o P u e ) o R s m ( : Called when the A t v t is paused/resume, can be used to release nas(, neue) ciiy resources or initialize states. Refer to Android API on A t v t (http://developer.android.com/reference/android/app/Activity.html) ciiy for the life cycle's state diagram.
4. User Interfaces
Read: Android Developers Dev Guide "User Interface"
6/20
www3.ntu.edu.sg/home/ehchua/programming/android/Android_BasicsUI.html
4/27/12
(http://developer.android.com/guide/topics/ui/index.html).
4.1 Views & Layouts

An A t v t interacts with the user, via a visual UI on a screen. The UI is placed on the A t v t via ciiy ciiy the A t v t . e C n e t i w )method. In Android, the UI composes of V e (UI components ciiystotnVe( iw such as button, label and text field) and V e G o p (layout) objects, organized in a single treeiwru structure. A V e is an interactive UI component, such as button and text field. It controls a rectangular area on iw the screen. It is responsible for drawing itself and handling events (such as clicking, entering texts). Android provides many ready-to-use V e s such as T x V e , E i T x , B t o , R d o u t n iw etiw dtet utn aiBto, etc, in package a d o d w d e . You nri.igt can create your custom V e by iw extending adodve.iw nri.iwVe. A V e G o pis an invisible container used to layout the V e components. Android provides many iwru iw V e G o p such as L n a L y u , R l t v L y u , T b e a o tand G i L y u . You can iwrus ieraot eaieaot alLyu rdaot create your V e G o pby extending from a d o d v e . i w r u . iwru nri.iwVeGop V e s and V e G o p are organized in a single tree structure called view-tree. You can create a iw iwrus view-tree either using programming codes or describing it in a XML layout file. XML layout is recommended as it separates the presentation view from the controlling logic, which provides modularity and flexibility in your program design. Once a view-tree is constructed, you can add the root of the view-tree to the A t v t as the content view via A t v t . e C n e t i w ) ciiy ciiystotnVe( method. Revise the "Hello-world in XML Layout", if necessary.
4.2 Example 1: V e s (E i T x , R d o u t n B t o ) and iw dtet aiBto, utn V e G o p(L n a L y u ) iwru ieraot

Let's illustrate the view-tree with a simple example as illustrated. The UI consists of a text field (E i T x ), dtet two radio buttons (R d o u t n and a aiBto) button (B t o ), arranged linearly in vertical utn orientation (L n a L y u ). ieraot First, create an Android project called "C u t r with target at "Android 2.2", o n e ", application name of "C u t r package o n e ", "c m m t s " o.yet and main activity "C u t r c i i y o n e A t v t ". (You should set the target at the lowest possible level that supports your application requirements. This is because your codes will be able to run on the later versions, but not vice versa. Setting to
4/27/12
lowest level will maximize the number of devices that your application can run on. These examples should be supported in Android 2.0, or even any version above 1.6. Also, you should test your codes on various AVDs of higher versions.)
r s l y u \ a n x land r s v l e \ t i g . m e\aotmi.m e\aussrnsxl

Expand the project node, and replace the "r s l y u \ a n x l with the following codes: e\aotmi.m"
<xlvrin"."ecdn=uf8? ?m eso=10 noig"t-"> <ieraotxlsadod"tp/shmsadodcmakrsadod LnaLyu mn:nri=ht:/cea.nri.o/p/e/nri" adodoinain"etcl nri:retto=vria" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"ilprn"> nri:aothih=fl_aet <dtet EiTx adodi=@i/xCutd nri:d"+dttonI" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodeial=fle / nri:dtbe"as" > <aiGop Rdoru adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodoinain"oiotl > nri:retto=hrzna" <aiBto Rdoutn adodi=@i/aiUI" nri:d"+drdopd adodtx=@tigrdopae" nri:et"srn/aiULbl adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodcekd"re / nri:hce=tu" > <aiBto Rdoutn adodi=@i/aiDwI" nri:d"+drdoond adodtx=@tigrdoonae" nri:et"srn/aiDwLbl adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet / nri:aothih=wa_otn" > <Rdoru> /aiGop <utn Bto adodi=@i/tCutd nri:d"+dbnonI" adodtx=@tigbnonLbl nri:et"srn/tCutae" adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet / nri:aothih=wa_otn" > <LnaLyu> /ieraot
This XML layout file describes a view-tree, composing of V e s (UI components) and V e G o p iw iwrus (layouts) objects. The root of this view-tree is a L n a L y u , which has 3 children: E i T x , ieraot dtet R d o r u and B t o . R d o r u is also a layout V e G o p which has two children of aiGop utn aiGop iwru Rdoutn aiBto. Each object has its own set of properties (attributes). The common attributes are: i : an integer used for referencing the object. Instead of hardcoding the integer, we use a special d syntax @ i / d a e with a ' 'sign to ask the Android SDK to generate a new ID resource. To +diNm, + reference an element, we use syntax @ d i N m , without the ' 'sign. i/dae + For example, in the B t o declaration, we generate a new i called b n o n I as follow: utn d tCutd
4/27/12
<utnadodi=@i/tCutd ... / Bto nri:d"+dbnonI" ... >
Once the i is set up, we can use this i to reference the object and manipulate the object in our d d programming codes. For example, in our A t v t ' o C e t ( method, we can retrieve a ciiys nrae) reference to the button (via method f n V e B I ( ), and attach an on-click event handler: idiwyd)
pbi casCutrciiyetnsAtvt { ulc ls oneAtvt xed ciiy /*Cle we teatvt i frtcetd * * ald hn h ciiy s is rae. / @vrie Oerd pbi vi oCet(udesvdntnett){ ulc od nraeBnl aeIsacSae sproCet(aeIsacSae; ue.nraesvdntnett) stotnVe(.aotmi) eCnetiwRlyu.an; / Rtiv arfrnet teBto ve b fnigi b isi / eree eeec o h utn iw y idn t y t d Bto bnon =(utnfnVeBI(.dbnonI) utn tCut Bto)idiwydRi.tCutd; bnon.eOCikitnrnwOCikitnr){ tCutstnlcLsee(e nlcLsee( @vrie Oerd pbi vi oCikVe ag){... } ulc od nlc(iw r0 ... }; ) } }
(This approach is very similar to JavaScript programming, which uses d c m n . e E e e t y d " d a e ) to retrieve an element, and process the element or ouetgtlmnBI(inm" attach an event handler such as o c i k n l c .) l y u _ i t and l y u _ e g t specifying the rectangular area of the V e or V e G o p aotwdh aothih: iw iwru. It is recommended to use a relative measurement, such as F L _ A E T(as big as its parent, ILPRN renamed to M T H P R N in API level 8) or W A _ O T N (big enough to enclose its content). AC_AET RPCNET You can also provide an absolute measurement by specifying a floating-point number with a unit, e.g., 12.5px. The available measurement units are px (pixels), dp or dip (density-independent pixels), sp (scaled pixels based on preferred font size), in (inches), and mm (millimeters). In our example, the root L n a L y u fills the entire screen (F L _ A E Tin both width and ieraot ILPRN height). The E i T x displays across the screen (F L _ A E T for width) with a height big dtet ILPRN enough to enclose its content (W A _ O T N for height). RPCNET t x : specifying an initial text for a text field, or a label for a button. Instead of hardcoding the text et in the XML layout file, it is recommended to provide a string reference in the form of @tigsrnNm s r n / t i g a e in the layout file, and place the actual text in "r s v l e \ t i g . m ". In this way, you could provide different strings for different locales e\aussrnsxl (languages and countries) for internationalization (i18n) support. For this example, we used string references r d o p a e and r d o o n a e (for aiULbl aiDwLbl R d o u t n and b n o n L b l(for B t o ). aiBto) tCutae utn Next, replace "r s v l e \ t i g . m " to provide the actual string texts, as follows: e\aussrnsxl
<xlvrin"."ecdn=uf8? ?m eso=10 noig"t-"> <eore> rsucs <tignm=bnonLbl>ON<srn> srn ae"tCutae"CUT/tig <tignm=rdopae" >on U<srn> srn ae"aiULbl Cut p/tig
4/27/12
<tignm=rdoonae"CutDw<srn> srn ae"aiDwLbl>on on/tig <tignm=apnm"Cutr/tig srn ae"p_ae>one<srn> <rsucs /eore>
Take note that the reference a p n m keeps the application name (to be displayed in the p_ae device's apps menu) which we configured while creating the Eclipse project. o i n a i n " o i o t l v r i a " For layouts such as L n a L y u and R d o r u , retto=hrzna|etcl: ieraot aiGop you can specify whether to arrange its children in horizontal or vertical orientation. In our example, the L n a L y u uses vertical orientation, while R d o r u uses horizontal. ieraot aiGop others: There are many other attributes. Some attributes are applicable to a certain object only. For example, you can use c e k d " r e to set the initial state of a R d o u t n and hce=tu" aiBto; e i a l = f l e to make the E i T x read-only. dtbe"as" dtet
Cutrciiyjv oneAtvt.aa
Let's complete our example by writing the main A t v t class to process the button-clicks: ciiy
pcaecmmts; akg o.yet ipr adodapAtvt; mot nri.p.ciiy ipr adodo.ude mot nri.sBnl; ipr adodve.iw mot nri.iwVe; ipr adodve.iwOCikitnr mot nri.iwVe.nlcLsee; ipr adodwde.utn mot nri.igtBto; ipr adodwde.dtet mot nri.igtEiTx; ipr adodwde.aiBto; mot nri.igtRdoutn pbi casCutrciiyetnsAtvt { ulc ls oneAtvt xed ciiy / Rfrne t U ves / eeecs o I iw EiTx tton; dtet xCut Rdoutnrdop aiBto aiU; Rdoutnrdoon aiBto aiDw; Bto bnon; utn tCut itcut=0 n on ; / Iiilcut / nta on
/*Cle we teatvt i frtcetd * * ald hn h ciiy s is rae. / @vrie Oerd pbi vi oCet(udesvdntnett){ ulc od nraeBnl aeIsacSae sproCet(aeIsacSae; ue.nraesvdntnett) stotnVe(.aotmi) eCnetiwRlyu.an; / Stcnetve t XLlyu / e otn iw o M aot / Rtiv rfrne t U vesb teri i XLlyu / eree eeecs o I iw y hi d n M aot rdop=(aiBto)idiwydRi.aiUI) aiU RdoutnfnVeBI(.drdopd; rdoon=(aiBto)idiwydRi.aiDwI) aiDw RdoutnfnVeBI(.drdoond; tton =(dtetfnVeBI(.dttonI) xCut EiTx)idiwydRi.xCutd; tton.eTx(tigvlefcut) / Stiiilcut xCutstetSrn.auO(on); / e nta on bnon =(utnfnVeBI(.dbnonI) tCut Bto)idiwydRi.tCutd; / Poestebto o-lc eet / rcs h utn ncik vn bnon.eOCikitnrnwOCikitnr){ tCutstnlcLsee(e nlcLsee(
4/27/12
@vrie Oerd pbi vi oCikVe ag){ ulc od nlc(iw r0 i (aiU.shce(){ f rdopiCekd) / Cutn u / onig p cut+ on+; }es i (aiDw.shce(){/ Cutn dw le f rdooniCekd) / onig on cuton-; } tton.eTx(tigvlefcut) xCutstetSrn.auO(on); } }; ) } }
Now, you can run the application.
Dissecting C u t r c i i y j v oneAtvt.aa
[TODO]
Generated A d o d a i e t x l nriMnfs.m
Each Android application has a manifest file (or application descriptor) named A d o d a i e t x l in the project's root directory. It describes the application components. The nriMnfs.m, manifest is generated automatically by the Eclipse ADT:
<xlvrin"."ecdn=uf8? ?m eso=10 noig"t-"> <aietxlsadod"tp/shmsadodcmakrsadod mnfs mn:nri=ht:/cea.nri.o/p/e/nri" pcae"o.yet akg=cmmts" adodvrinoe"" nri:esoCd=1 adodvrinae"." nri:esoNm=10> <plcto adodio=@rwbeio" apiain nri:cn"daal/cn adodlbl"srn/p_ae> nri:ae=@tigapnm" <ciiyadodnm=.oneAtvt" atvt nri:ae"Cutrciiy adodlbl"srn/p_ae> nri:ae=@tigapnm" <netfle> itn-itr <cinadodnm=adoditn.cinMI"/ ato nri:ae"nri.netato.AN > <aeoyadodnm=adoditn.aeoyLUCE"/ ctgr nri:ae"nri.netctgr.ANHR > <itn-itr /netfle> <atvt> /ciiy <apiain /plcto> <mnfs> /aiet
In our example, The < a i e t element specifies the Java package name and program version. It contains one mnfs> < p l c t o >element. apiain The < p l c t o >element specifies the icon and label used in mobile device's "apps" menu. It apiain contains one ore more < c i i y elements. atvt> This application has one activity named C u t r c i i y The < c i i y element declares its oneAtvt. atvt> program name (. o n e A t v t where ' 'is relative to the package c m m t s ) and label Cutrciiy . o.yet (string reference a p n m , where actual text in r s v l e \ t i g . m ). It may contain p_ae e\aussrnsxl
4/27/12
<netfle> itn-itr. The < n e t f l e >declares that this activity is the entry point (i t n . c i n M I ) of itn-itr netato.AN the application when it is launched (i t n . a e o y L U C E ). netctgr.ANHR
Generated R j v .aa
/ AT-EEAE FL. D NTMDF. * UOGNRTD IE O O OIY *Ti caswsatmtclygnrtdb teap to fo hs ls a uoaial eeae y h at ol rm *tersuc dt i fud I sol ntb mdfe b hn. h eore aa t on. t hud o e oiid y ad * / pcaecmmts; akg o.yet pbi fnlcasR{ ulc ia ls pbi sai fnlcasat { ulc ttc ia ls tr } pbi sai fnlcasdaal { ulc ttc ia ls rwbe pbi sai fnlitio=xf200 ulc ttc ia n cn07000; } pbi sai fnlcasi { ulc ttc ia ls d pbi sai fnlitbnonI=xf503 ulc ttc ia n tCutd07000; pbi sai fnlitrdoond07000; ulc ttc ia n aiDwI=xf502 pbi sai fnlitrdoruI=xf504 ulc ttc ia n aiGopd07000; pbi sai fnlitrdopd07000; ulc ttc ia n aiUI=xf501 pbi sai fnlitttonI=xf500 ulc ttc ia n xCutd07000; } pbi sai fnlcaslyu { ulc ttc ia ls aot pbi sai fnlitmi=xf300 ulc ttc ia n an07000; } pbi sai fnlcassrn { ulc ttc ia ls tig pbi sai fnlitapnm=xf403 ulc ttc ia n p_ae07000; pbi sai fnlitbnonLbl07000; ulc ttc ia n tCutae=xf400 pbi sai fnlitrdoonae=xf402 ulc ttc ia n aiDwLbl07000; pbi sai fnlitrdopae=xf401 ulc ttc ia n aiULbl07000; } }
Eclipse ADT automatically generates a R j v (R for resources) to keep track and instantiate all the .aa resources (icons, string, view and layout) used in the application. The resource IDs are kept in inner classes R i , R d a a l , R l y u , R s r n , which maps to the respective resource folders. For .d .rwbe .aot .tig example, Rlyu.an .aotmi maps to rslyu\anxl e\aotmi.m. Rsrn .tig maps to rsvle\tig.m. e\aussrnsxl
4.3 Example 2: Relative Layout

Let's modify our program to use R l t v L y u , instead of L n a L y u . In relative layout, the eaieaot ieraot UI are arranged relative to each others.
rslyu\anrltv.m e\aotmi_eaiexl
We shall use the same project (as the previous example). Create a XML layout file called
4/27/12
m i _ e a i e x lin r s l y u folder anrltv.m e\aot (right-click on the r s l y u node new e\aot file) as follows:
<xlvrin"."ecdn=uf8? ?m eso=10 noig"t-"> <eaieaotxlsadod"tp/shmsadodcmakrsadod RltvLyu mn:nri=ht:/cea.nri.o/p/e/nri" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"ilprn"> nri:aothih=fl_aet <dtet EiTx adodi=@i/xCutd nri:d"+dttonI" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodeial=fle nri:dtbe"as" adodgaiy"ih"/ nri:rvt=rgt > <aiGop Rdoru adodi=@i/aiGopd nri:d"+drdoruI" adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodoinain"oiotl nri:retto=hrzna" adodlyu_eo=@dttonI" nri:aotblw"i/xCutd adodlyu_lgPrnRgt"re > nri:aotainaetih=tu" <aiBto Rdoutn adodi=@i/aiUI" nri:d"+drdopd adodtx=@tigrdopae" nri:et"srn/aiULbl adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodcekd"re / nri:hce=tu" > <aiBto Rdoutn adodi=@i/aiDwI" nri:d"+drdoond adodtx=@tigrdoonae" nri:et"srn/aiDwLbl adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet / nri:aothih=wa_otn" > <Rdoru> /aiGop <utn Bto adodi=@i/tCutd nri:d"+dbnonI" adodtx=@tigbnonLbl nri:et"srn/tCutae" adodlyu_it=wa_otn" nri:aotwdh"rpcnet adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_eo=@drdoruI" nri:aotblw"i/aiGopd adodlyu_lgPrnRgt"re / nri:aotainaetih=tu" > <RltvLyu> /eaieaot
We use the R l t v L y u as the root element. In relative layout, we need to assign an i to eaieaot d
4/27/12
elements that would be used for reference. As mentioned, to create an i , we use a special syntax d @ i / d a e with a ' 'sign to ask the Eclipse ADT to generate an integer i . To reference an +diNm, + d element, we use the syntax @ d i N m . i/dae In relative layout, we could use l y u _ e o , l y u _ o e t f l y u _ o i h O , aotblw aottLfO, aottRgtf lyu_lgPrnRgt aotainaetih, lyu_lgTp aotaino, etc, (defined in a d o d w d e . e a i e a o t L y u P r m ) to arrange a UI view relative to another view. nri.igtRltvLyu.aotaas In this example, the R d o r u is placed below the E i T x and right-aligned with its parent aiGop dtet R l t v L y u . The B t o is placed below the R d o r u , and also right-aligned with its eaieaot utn aiGop parent R l t v L y u . In the E i T x , the g a i y " i h "right-aligns the text. eaieaot dtet rvt=rgt
Cutrciiyjv oneAtvt.aa
To use the new XML layout file, simply change the A t v t . e C n e t i w )as follows: ciiystotnVe(
pbi vi oCet(udesvdntnett){ ulc od nraeBnl aeIsacSae sproCet(aeIsacSae; ue.nraesvdntnett) stotnVe(.aotmi_eaie; / Uerslyu\anrltv.m eCnetiwRlyu.anrltv) / s e\aotmi_eaiexl ... ... }
rsvle\tig.m e\ausSrnsxl
No Change.
4.4 Next?
Study "Hello View" examples at http://developer.android.com/resources/tutorials/views/index.html for the pre-defined views and layouts in Android SDK. L n a L y u : A V e G o pthat displays its V e children in linear direction, either horizontally ieraot iwru iw or vertically. R l t v L y u : A V e G o pthat display its V e children in relative position to each others eaieaot iwru iw or to the parent. e.g., below, align (top, left, right, bottom), margin (top, left, right, bottom). T b e a o t A V e G o pthat display its V e children in table of rows and columns. alLyu: iwru iw G i L y u : A V e G o pthat display its V e children in a 2D scrollable grid. rdaot iwru iw T b a o t for organizing activities in separate tabs. aLyu: L s V e : A V e G o pthat create a list of scrollable items. itiw iwru Study the "Hello Localization" example at http://developer.android.com/resources/tutorials/localization/index.html on how to provide different strings for different locales (languages and countries).
4.5 Example 3: Simple Calculator

Create a project called C l u a o S m l , with target at "Android 2.2", application name of "Simple acltripe
4/27/12
Calculator", package "c m m t s ", and main o.yet activity "C l u a o A t v t ". acltrciiy
rslyu\anxl e\aotmi.m
The UI consists of an E i T x for displaying dtet the result and 16 B t o s. utn We use T b e a o tto layout the buttons in rows alLyu and columns as illustrated.
<xlvrin"."ecdn=uf8? ?m eso=10 noig"t-"> <eaieaotxlsadod"tp/shmsadodcmakrsadod RltvLyu mn:nri=ht:/cea.nri.o/p/e/nri" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"ilprn"> nri:aothih=fl_aet <dtet EiTx adodi=@i/xRslI" nri:d"+dtteutd adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodeial=fle nri:dtbe"as" adodgaiy"ih"/ nri:rvt=rgt > <alLyu Tbeaot adodi=@i/alI" nri:d"+dtbed adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_eo=@dtteutd > nri:aotblw"i/xRslI" <alRw Tbeo> <utn Bto adodi=@i/tNmI" nri:d"+dbnu7d adodtx=7 nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <utn Bto adodi=@i/tNmI" nri:d"+dbnu8d adodtx=8 nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <utn Bto adodi=@i/tNmI" nri:d"+dbnu9d adodtx=9 nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 >
4/27/12
<utn Bto adodi=@i/tDvd nri:d"+dbniI" adodtx= nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <Tbeo> /alRw <alRw Tbeo> <utn Bto adodi=@i/tNmI" nri:d"+dbnu4d adodtx=4 nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <utn Bto adodi=@i/tNmI" nri:d"+dbnu5d adodtx=5 nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <utn Bto adodi=@i/tNmI" nri:d"+dbnu6d adodtx=6 nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <utn Bto adodi=@i/tMld nri:d"+dbnuI" adodtx= nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <Tbeo> /alRw <alRw Tbeo> <utn Bto adodi=@i/tNmI" nri:d"+dbnu1d adodtx=1 nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <utn Bto adodi=@i/tNmI" nri:d"+dbnu2d adodtx=2 nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <utn Bto adodi=@i/tNmI" nri:d"+dbnu3d adodtx=3 nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <utn Bto adodi=@i/tSbd nri:d"+dbnuI"
4/27/12
adodtx=nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <Tbeo> /alRw <alRw Tbeo> <utn Bto adodi=@i/tNmI" nri:d"+dbnu0d adodtx=0 nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <utn Bto adodi=@i/tCerd nri:d"+dbnlaI" adodtx=C nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <utn Bto adodi=@i/tEuld nri:d"+dbnqaI" adodtx== nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <utn Bto adodi=@i/tAdd nri:d"+dbndI" adodtx=+ nri:et"" adodlyu_it=fl_aet nri:aotwdh"ilprn" adodlyu_egt"rpcnet nri:aothih=wa_otn" adodlyu_egt""/ nri:aotwih=1 > <Tbeo> /alRw <Tbeaot /alLyu> <RltvLyu> /eaieaot
rsvle\tig.m e\aussrnsxl
All strings, except a p n m , are hardcoded in m i . m , as they are international symbols. p_ae anxl
<xlvrin"."ecdn=uf8? ?m eso=10 noig"t-"> <eore> rsucs <tignm=apnm"Sml Cluao<srn> srn ae"p_ae>ipe acltr/tig <rsucs /eore>
CluaoAtvt.aa acltrciiyjv
pcaecmmts; akg o.yet ipr adodapAtvt; mot nri.p.ciiy ipr adodo.ude mot nri.sBnl; ipr adodve.iw mot nri.iwVe; ipr adodve.iwOCikitnr mot nri.iwVe.nlcLsee; ipr adodwde.utn mot nri.igtBto; ipr adodwde.dtet mot nri.igtEiTx;
4/27/12
pbi casCluaoAtvt etnsAtvt ipeet OCikitnr{ ulc ls acltrciiy xed ciiy mlmns nlcLsee piaeEiTx tteut / Rfrnet EiTx o rsl rvt dtet xRsl; / eeec o dtet f eut piaeitrsl =0 rvt n eut ; / Rsl o cmuain / eut f optto piaeSrn iSr="" / Cretiptsrn rvt tig nt 0; / urn nu tig / Peiu oeao:'' '' '' '' ''o ''(ooeao) / rvos prtr +, -, *, /, = r n prtr piaeca lsOeao ='' rvt hr atprtr ; /*Cle we teatvt i frtcetd * * ald hn h ciiy s is rae. / @vrie Oerd pbi vi oCet(udesvdntnett){ ulc od nraeBnl aeIsacSae sproCet(aeIsacSae; ue.nraesvdntnett) stotnVe(.aotmi) eCnetiwRlyu.an; / Rtiv arfrnet teEiTx fedfrdslyn tersl. / eree eeec o h dtet il o ipaig h eut tteut=(dtetfnVeBI(.dtteutd; xRsl EiTx)idiwydRi.xRslI) tteutstet""; xRsl.eTx(0) / Rgse lsee (hscas fraltebtos / eitr itnr ti ls) o l h utn (Bto)idiwydRi.tNmI).eOCikitnrti) (utnfnVeBI(.dbnu0d)stnlcLsee(hs; (Bto)idiwydRi.tNmI).eOCikitnrti) (utnfnVeBI(.dbnu1d)stnlcLsee(hs; (Bto)idiwydRi.tNmI).eOCikitnrti) (utnfnVeBI(.dbnu2d)stnlcLsee(hs; (Bto)idiwydRi.tNmI).eOCikitnrti) (utnfnVeBI(.dbnu3d)stnlcLsee(hs; (Bto)idiwydRi.tNmI).eOCikitnrti) (utnfnVeBI(.dbnu4d)stnlcLsee(hs; (Bto)idiwydRi.tNmI).eOCikitnrti) (utnfnVeBI(.dbnu5d)stnlcLsee(hs; (Bto)idiwydRi.tNmI).eOCikitnrti) (utnfnVeBI(.dbnu6d)stnlcLsee(hs; (Bto)idiwydRi.tNmI).eOCikitnrti) (utnfnVeBI(.dbnu7d)stnlcLsee(hs; (Bto)idiwydRi.tNmI).eOCikitnrti) (utnfnVeBI(.dbnu8d)stnlcLsee(hs; (Bto)idiwydRi.tNmI).eOCikitnrti) (utnfnVeBI(.dbnu9d)stnlcLsee(hs; (Bto)idiwydRi.tAdd)stnlcLsee(hs; (utnfnVeBI(.dbndI).eOCikitnrti) (Bto)idiwydRi.tSbd)stnlcLsee(hs; (utnfnVeBI(.dbnuI).eOCikitnrti) (Bto)idiwydRi.tMld)stnlcLsee(hs; (utnfnVeBI(.dbnuI).eOCikitnrti) (Bto)idiwydRi.tDvd)stnlcLsee(hs; (utnfnVeBI(.dbniI).eOCikitnrti) (Bto)idiwydRi.tCerd)stnlcLsee(hs; (utnfnVeBI(.dbnlaI).eOCikitnrti) (Bto)idiwydRi.tEuld)stnlcLsee(hs; (utnfnVeBI(.dbnqaI).eOCikitnrti) } / O-lc eethnlrfraltebtos / ncik vn ade o l h utn @vrie Oerd pbi vi oCikVe ve){ ulc od nlc(iw iw sic (iwgtd) { wth ve.eI() / Nme btos ''t '' / ubr utn: 0 o 9 cs Ri.tNmI: ae .dbnu0d cs Ri.tNmI: ae .dbnu1d cs Ri.tNmI: ae .dbnu2d cs Ri.tNmI: ae .dbnu3d cs Ri.tNmI: ae .dbnu4d cs Ri.tNmI: ae .dbnu5d cs Ri.tNmI: ae .dbnu6d cs Ri.tNmI: ae .dbnu7d cs Ri.tNmI: ae .dbnu8d cs Ri.tNmI: ae .dbnu9d Srn iDgt=(Bto)iw.eTx(.otig) tig nii (utnve)gtet)tSrn(;
4/27/12
i (nt.qas""){ f iSreul(0) iSr=iDgt nt nii; / n laigzr / o edn eo }es { le iSr+ iDgt nt = nii; / acmlt iptdgt / cuuae nu ii } tteutstetiSr; xRsl.eTx(nt) / Cerbfe i ls oeao i '' / la ufr f at prtr s = i (atprtr= '' { f lsOeao = =) rsl =0 eut ; lsOeao ='' atprtr ; } bek ra; / Oeao btos '' '' '' ''ad'' / prtr utn: +, -, *, / n = cs Ri.tAdd ae .dbndI: cmue) opt(; lsOeao ='' atprtr +; bek ra; cs Ri.tSbd ae .dbnuI: cmue) opt(; lsOeao ='' atprtr -; bek ra; cs Ri.tMld ae .dbnuI: cmue) opt(; lsOeao ='' atprtr *; bek ra; cs Ri.tDvd ae .dbniI: cmue) opt(; lsOeao ='' atprtr /; bek ra; cs Ri.tEuld ae .dbnqaI: cmue) opt(; lsOeao ='' atprtr =; bek ra; / Cerbto / la utn cs Ri.tCerd ae .dbnlaI: rsl =0 eut ; iSr="" nt 0; lsOeao ='' atprtr ; tteutstet""; xRsl.eTx(0) bek ra; } } / Ue pse '' '' '' ''o ''bto. / sr uhs +, -, *, / r = utn / Promcmuaino tepeiu rsl adtecretiptnme, / efr optto n h rvos eut n h urn nu ubr / bsdo tepeiu oeao. / ae n h rvos prtr piaevi cmue){ rvt od opt( itiNm=Itgrpren(nt) n nu nee.asItiSr; iSr="" nt 0; i (atprtr= '' { f lsOeao = ) rsl =iNm eut nu; }es i (atprtr= '' { le f lsOeao = +)
4/27/12
rsl + iNm eut = nu; }es i (atprtr= '' { le f lsOeao = -) rsl - iNm eut = nu; }es i (atprtr= '' { le f lsOeao = *) rsl * iNm eut = nu; }es i (atprtr= '' { le f lsOeao = /) rsl / iNm eut = nu; }es i (atprtr= '' { le f lsOeao = =) / Ke tersl frtenx oeain / ep h eut o h et prto } tteutstetSrn.auO(eut) xRsl.eTx(tigvlefrsl); } }
Dissecting C l u a o A t v t . a a acltrciiyjv
We register the same listener object (t i object) to all the 16 B t o s. In the on-click event handler, hs utn we inspect the V e object's i to dispatch the appropriate action. [TODO more] iw d
4.6 Example 4
[TODO]
REFERENCES & RESOURCES
Latest version tested: Android SDK r15, Android 2.3, 3.2, 4.0, Eclipse 3.7.1 Last modified: November, 2011
Feedback, comments, corrections, and errata can be sent to Chua Hock-Chuan (ehchua@ntu.edu.sg) | HOME
www3.ntu.edu.sg/home/ehchua/programming/android/Android_BasicsUI.html
20/20

Android Basics and User Interfaces

Transféré par

Informations du document

Description originale:

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Android Basics and User Interfaces

Transféré par

Droits d'auteur :

Formats disponibles

4/27/12