android ui tools - cs 4720 · ui vs. ux • an important distinction to make up front is the...

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