Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the...
Transcript of Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the...
![Page 1: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/1.jpg)
CS4720
AndroidUITools
CS4720– MobileApplicationDevelopment
Resource:developer.android.com
![Page 2: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/2.jpg)
CS4720
UIvs.UX• AnimportantdistinctiontomakeupfrontisthedifferencebetweenUIandUX
• UI– UserInterface– Thecomponentsofapieceofsoftwarethatauserwillinteractwith
– Thedesignandlayoutofthosecomponents• UX– UserExperience
– Theentirepackageofsoftware+hardware
2
![Page 3: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/3.jpg)
CS4720
UIvs.UX• Weareconcernedwithbothofthese,butwillfirstfocusonUI
• UXhasabitmoretodowiththehandset+display+processingcapabilities+network+…
• OurappswilldependonthesethingstohaveagoodUX,butlet’sstartwithagoodUI
3
![Page 4: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/4.jpg)
CS4720
ViewsandViewGroups• ThedefaultcomponentsofabaseUIinAndroidareViewsandViewGroups
• AViewisanobjectthatdrawssomethingonthescreenandtheusercaninteractwith
• AViewGroup isanobjectthatholdsotherViews(orViewGroups)togetherinaparticularorderanddefinesthelayoutofthosecomponentsintheinterface
4
![Page 5: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/5.jpg)
CS4720
ViewsandViewGroups• Ingeneral:
– ViewGroups areyourlayoutXMLfiles– ViewsareeverythingthatgoesinthelayoutXMLfiles
• ViewGroups andViewscanbedefinedineitherthelayoutXMLfilesorinthecodebaseitself
• AViewGroup isloadedintoatreehierarchyfordisplayandquerying
5
![Page 6: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/6.jpg)
CS4720
ViewsandViewGroups
6
![Page 7: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/7.jpg)
CS4720
Layouts• LayoutscanbedefinedineitherXMLorincode
• Whydoitinonevs.theother?– XML:Goodtoseparatedisplayfrombusinesslogicforreusability,distributionoflabor,etc.
– Code:Goodfordynamicchanges• ThewordingandtermsintheXMLandincodelookandbehavesimilarly(alsotoSwing…)
7
![Page 8: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/8.jpg)
CS4720
BuildingaLayout• Tocreatealayout:
– YoucanwritetheXMLyourself(fun…)– YoucangeneratetheXMLusingabuilder(thereareotherbuildersbesidestheAndroidStudiobuilder…)
– YoucandoitallintheonCreate()oftheActivity(badforseveralreasons)
– YoucanaddtoitinlatercallsintheActivity– Youcandoamixofallofthese
8
![Page 9: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/9.jpg)
CS4720
BuildingaLayout
9
![Page 10: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/10.jpg)
CS4720
AccessingViews• EveryViewintheUIisassignedauniqueintegerID
• Likemostglobal/static/finalidentifiers,wedon’teverwanttowritetheactualvalueorknowitsactualpositioninmemory
10
![Page 11: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/11.jpg)
CS4720
AccessingViewsandroid:id=“@+id/my_button”where@tellsAndroidtoexpandthisand+meansthisresourceshouldbeaddedtotheRfile
android:id=“@android:id/entity”meansgetthebuilt-inAndroidthingcalledentity
11
![Page 12: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/12.jpg)
CS4720
ConnectingaViewtoCode
12
In the Layout XML:
In the Android code:
Remember: you can also do this with android:onClick!
![Page 13: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/13.jpg)
CS4720
SoManyLayouts…• LinearLayout– allchildrenareinarow(verticalorhorizontal)
• RelativeLayout– eachitemispositionedaccordingtothepositionoftheothers
• TableLayout- …it’satablewithrowsandcolumns
• AbsoluteLayout– (x,y)coordinates,basically• FrameLayout– singlescreen• AndotherViews(List,Group)thataresimilar
13
![Page 14: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/14.jpg)
CS4720
WhichLayoutDoIUse?• Youshouldmakedifferentlayoutsfordifferentgrosscategories(i.e.phonevs.tablet)ofdevicesandforverticalvs.horizontal
• Consider:– Whichdeviceandorientationwilltheuserbein?– Howwilltheuserbeholdingthedevice?Onehandortwo?
– Wherewilltheuserbe(standing,sitting,walking,etc.)?
– Whereshouldimportantfunctionsbe?14
![Page 15: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/15.jpg)
CS4720
TypicalLayouts• Linear
– Listsofthingsisprettycommon…• Relative
– Reallygoodforchangingdevicesizesascomponentsaredynamicallyallocated
• Table– Goodfordatapresentation
• Absolute– Typicallynotagoodoption…
15
![Page 16: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/16.jpg)
CS4720
DynamicLayouts• You’regoingtomakealist(LinearLayout,ListView,etc.)butyoudon’tknowuntilruntimehowmanyitemswillbeinthelist
• Howdoyoudynamicallyallocateitemsinthelayout?
16
![Page 17: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/17.jpg)
CS4720
Adapters• AnAdapterisaclassthat“hookstogether”anAdapterView (likeListView)toadatasource
• SubclassesofAdapterhookuptodifferenttypes/formatsofdata– ArrayAdapter looksatarrays,ArrayLists,etc.– SimpleCursorAdapter looksatCursorclass(reading2Ddataforexample)
17
![Page 18: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/18.jpg)
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.
![Page 19: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/19.jpg)
CS4720
Adapter• Tohandleclicksonitemsinthelist:
19
![Page 20: Android UI Tools - CS 4720 · UI vs. UX • An important distinction to make up front is the difference between UI and UX • UI – User Interface – The components of a piece of](https://reader033.fdocuments.net/reader033/viewer/2022050203/5f56f8459ae646016a2ddccc/html5/thumbnails/20.jpg)
CS4720
BuildingaBasicListView
20