CS4720
AndroidUITools
CS4720– MobileApplicationDevelopment
Resource:developer.android.com
CS4720
UIvs.UX• AnimportantdistinctiontomakeupfrontisthedifferencebetweenUIandUX
• UI– UserInterface– Thecomponentsofapieceofsoftwarethatauserwillinteractwith
– Thedesignandlayoutofthosecomponents• UX– UserExperience
– Theentirepackageofsoftware+hardware
2
CS4720
UIvs.UX• Weareconcernedwithbothofthese,butwillfirstfocusonUI
• UXhasabitmoretodowiththehandset+display+processingcapabilities+network+…
• OurappswilldependonthesethingstohaveagoodUX,butlet’sstartwithagoodUI
3
CS4720
ViewsandViewGroups• ThedefaultcomponentsofabaseUIinAndroidareViewsandViewGroups
• AViewisanobjectthatdrawssomethingonthescreenandtheusercaninteractwith
• AViewGroup isanobjectthatholdsotherViews(orViewGroups)togetherinaparticularorderanddefinesthelayoutofthosecomponentsintheinterface
4
CS4720
ViewsandViewGroups• Ingeneral:
– ViewGroups areyourlayoutXMLfiles– ViewsareeverythingthatgoesinthelayoutXMLfiles
• ViewGroups andViewscanbedefinedineitherthelayoutXMLfilesorinthecodebaseitself
• AViewGroup isloadedintoatreehierarchyfordisplayandquerying
5
CS4720
ViewsandViewGroups
6
CS4720
Layouts• LayoutscanbedefinedineitherXMLorincode
• Whydoitinonevs.theother?– XML:Goodtoseparatedisplayfrombusinesslogicforreusability,distributionoflabor,etc.
– Code:Goodfordynamicchanges• ThewordingandtermsintheXMLandincodelookandbehavesimilarly(alsotoSwing…)
7
CS4720
BuildingaLayout• Tocreatealayout:
– YoucanwritetheXMLyourself(fun…)– YoucangeneratetheXMLusingabuilder(thereareotherbuildersbesidestheAndroidStudiobuilder…)
– YoucandoitallintheonCreate()oftheActivity(badforseveralreasons)
– YoucanaddtoitinlatercallsintheActivity– Youcandoamixofallofthese
8
CS4720
BuildingaLayout
9
CS4720
AccessingViews• EveryViewintheUIisassignedauniqueintegerID
• Likemostglobal/static/finalidentifiers,wedon’teverwanttowritetheactualvalueorknowitsactualpositioninmemory
10
CS4720
AccessingViewsandroid:id=“@+id/my_button”where@tellsAndroidtoexpandthisand+meansthisresourceshouldbeaddedtotheRfile
android:id=“@android:id/entity”meansgetthebuilt-inAndroidthingcalledentity
11
CS4720
ConnectingaViewtoCode
12
In the Layout XML:
In the Android code:
Remember: you can also do this with android:onClick!
CS4720
SoManyLayouts…• LinearLayout– allchildrenareinarow(verticalorhorizontal)
• RelativeLayout– eachitemispositionedaccordingtothepositionoftheothers
• TableLayout- …it’satablewithrowsandcolumns
• AbsoluteLayout– (x,y)coordinates,basically• FrameLayout– singlescreen• AndotherViews(List,Group)thataresimilar
13
CS4720
WhichLayoutDoIUse?• Youshouldmakedifferentlayoutsfordifferentgrosscategories(i.e.phonevs.tablet)ofdevicesandforverticalvs.horizontal
• Consider:– Whichdeviceandorientationwilltheuserbein?– Howwilltheuserbeholdingthedevice?Onehandortwo?
– Wherewilltheuserbe(standing,sitting,walking,etc.)?
– Whereshouldimportantfunctionsbe?14
CS4720
TypicalLayouts• Linear
– Listsofthingsisprettycommon…• Relative
– Reallygoodforchangingdevicesizesascomponentsaredynamicallyallocated
• Table– Goodfordatapresentation
• Absolute– Typicallynotagoodoption…
15
CS4720
DynamicLayouts• You’regoingtomakealist(LinearLayout,ListView,etc.)butyoudon’tknowuntilruntimehowmanyitemswillbeinthelist
• Howdoyoudynamicallyallocateitemsinthelayout?
16
CS4720
Adapters• AnAdapterisaclassthat“hookstogether”anAdapterView (likeListView)toadatasource
• SubclassesofAdapterhookuptodifferenttypes/formatsofdata– ArrayAdapter looksatarrays,ArrayLists,etc.– SimpleCursorAdapter looksatCursorclass(reading2Ddataforexample)
17
CS4720
Adapter
18
Allocate an Adapter against the layout and data source:
Find the view that will show the data and call setAdapter():
To change how the data is shown in each list item, override toString() in the objects in the array.
CS4720
Adapter• Tohandleclicksonitemsinthelist:
19
CS4720
BuildingaBasicListView
20