Android UI Design

139 Pages·2014·3.68 MB·English

AndroidUIDesign i
Android UI Design
AndroidUIDesign ii
Contents
1 AndroidUIOverview 1
1.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2 AndroidAppStructureandUIpatterns . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2.1 Toplevelview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2.2 Detailview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.2.3 ActionBar . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.3 Standardcomponents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4 Multipledevicessupport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2 AndroidUI:UnderstandingViews 10
2.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2 Views . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.2.1 TextViewcomponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.2.2 ImageViewcomponent . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.2.3 Inputcontrols . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 16
2.3 UIEventsandListeners . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
2.4 UIDevelopment. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
2.5 ViewandAdapters . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
2.5.1 HandlingListViewevents . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 32
2.5.2 CustomAdapterandViewHolderpattern . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34
2.6 DownloadtheSourceCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37
3 AndroidUI:LayoutswithViewGroupsandFragments 38
3.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.2 Layoutoverview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 38
3.2.1 LinearLayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 39
3.2.2 TableLayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 44
3.2.3 RelativeLayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 50
3.2.4 FrameLayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.2.5 GridLayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.2.6 Layoutandmultiplescreensupport . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
AndroidUIDesign iii
3.3 Fragments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 55
3.3.1 Fragmentlifecycle . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 59
3.3.2 Howtousefragments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61
3.3.3 FrameLayoutandFragmentManager. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
3.3.4 FragmentActivitycommunication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 64
3.3.5 Interfragmentcommunication . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
3.3.6 Multiplescreensupportusingfragments . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 66
3.4 DownloadtheSourceCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71
4 AndroidUI:AddingMultimediatoanApp 72
4.1 Overview . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
4.2 MultimediaAPI . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72
4.2.1 UsingAndroidCamera . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74
4.3 Graphics . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 77
4.4 Drawable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82
4.4.1 Shapedrawable . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 83
4.4.2 Statelist. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 88
4.4.3 Nine-patch . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 91
4.5 DownloadtheSourceCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95
5 AndroidUI:ThemesandStyles 96
5.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96
5.2 Styledefinition . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
5.2.1 Inheritance . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
5.2.2 Styleproperties . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97
5.3 Creatingandapplyingthemes . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 100
5.3.1 Themesandplatforms . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
5.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
5.5 DownloadtheSourceCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 108
6 AndroidUI:FullSampleApp 109
6.1 Introduction . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
6.2 Appstructure . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109
6.2.1 ItemListwithListViewandObjectModel . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 112
6.2.2 Multi-devicesupportandlayoutconsiderations . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 116
6.2.3 Additemuserinterfacelayout . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 118
6.2.4 TagColor/PrioritySpinner . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 120
6.2.5 DateandTimepicker . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 122
6.2.6 MainActivity . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 125
6.2.7 Actionbar. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 126
6.3 Stylingtheapp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 129
6.4 Conclusion . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
6.5 DownloadtheSourceCode . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 132
AndroidUIDesign iv
Copyright (c) Exelixis Media Ltd., 2014
All rights reserved. Without limiting the rights under
copyright reserved above, no part of this publication
may be reproduced, stored or introduced into a retrieval system, or
transmitted, in any form or by any means (electronic, mechanical,
photocopying, recording or otherwise), without the prior written
permission of the copyright owner.
AndroidUIDesign v
Preface
AndroidisanoperatingsystembasedontheLinuxkernelanddesignedprimarilyfortouchscreenmobiledevicessuchassmart-
phonesandtabletcomputers. AndroidOShastakenovertheworldofmobiledevicesandisgrowingrapidlythelastfewyears.
Android’suserinterfaceisbasedondirectmanipulation, usingtouchinputsthatlooselycorrespondtoreal-worldactions, like
swiping, tapping, pinchingandreversepinchingtomanipulateon-screenobjects. Theresponsetouserinputisdesignedtobe
immediateandprovidesafluidtouchinterface.
Inthiscourse,youwillgetalookatthefundamentalsofAndroidUIdesign. Youwillunderstanduserinput,viewsandlayouts,
aswellasadaptersandfragments.
Furthermore,youwilllearnhowtoaddmultimediatoanappandalsoleveragethemesandstyles. Ofcourse,allthesearetied
upwithasampleapplication,whichyouwillbuildfromscratch.
AndroidUIDesign vi
About the Author
FrancescoAzzolaisanelectronicengineer,havingachievedhisdegreeattheUniversityofPerugia(Italy). Hehasmorethan15
yearsexperienceinarchitectinganddevelopingJEEapplications. Heworkedinthetelecomareaforseveralyearsarchitecting
VASservicewithJEEtechnologyanddevelopingmobileapplications. Inparticularhisexperienceandactivitiesarefocusedin:
• Androidsoftwaredevelopment
• JEEenterpriseapplication
• Multichannelapplication(Web,Mobile,Voicechannel)
HedesignedandimplementedajavalibraryforUCPprotocoltoexchangeinformationwithaSMSgateway. Healsodesigned
theVodafoneMAMjavalibrarytosendandreceiveSMS.HedesignedanddevelopedaGSMATcommandslibrarytoconnect
toaGSMexternalmodel,sothatanapplicationusingthislibrarycansendandreceiveSMSandmonitortheGSMmodemstatus.
FrancescodevelopedaSMS/GSMapplicationinJEE,usedbysomeitalianmobilecompaniestosupporthugeSMS/MMStraffic
andtodevelopvalueaddedservices. HeworkedondesigninganddevelopingatooltoanalyzeSIMCardGSM/UMTSinorder
torepresentitsfilesysteminXMLformat. ThistoolwasdevelopedinJava/JEEtechnologyanditcanbeusedtoverifysimcard
compliancetothespecifications.
HedesignedandimplementedaJEEenterpriseapplicationusingallJEEtechnologiesforaninsurancecompany. Hedeveloped
and implemented a jee library useful to support multichannel application that can be accessed using normal browser, mobile
application(Androidandsoon)andbyVoice(VoicerecognitionandTexttospeech).
FrancescohasalsodevelopedseveralAndroidappssomeofthemarepublishedonGooglePlay.
HewroteseveralarticlesforJava.netregardingJavaFX,JBI(JavaBusinessIntegration)andSMS,JavaFXJEEintegrationusing
Springandalsosomeotherarticlesforitalianonlinemagazine.
Latelyheisworkingforacompanythatprovidessoftwaresolutionsforpublicadministrationandinmoredetailmyactivities
arefocusedondocumentmanagement.
HisareasofinterestincludemobileapplicationdevelopmentinAndroid,JEEarchitectureandOpenSourcesoftwarethatheused
fordevelopingsomeprojectsdescribedabove.
Duringhiscareerhehasreceivedthesecertifications:
• SunCertifiedEnterpriseArchitect(SCEA)
• SunCertifiedWebComponentDeveloper(SCWCD)
• SunCertifiedJavaProgrammer(SCJP)
AndroidUIDesign 1/132
Chapter 1
Android UI Overview
1.1 Introduction
AndroidisawidelyusedOSmadeforsmartphonesandtablets.ItisanopensourceprojectledbyGoogleanditisreleasedunder
ApacheLicense. ThispermissivelicensehelpedthisOStobewidelyadoptedandallowsthemanufacturerstofreelymodifyand
customizeit. Asmatteroffact,despiteAndroidbeingdesignedforsmartphonesandtablets,itisalsousedinTVs,camerasand
soon. Moreover,Androidhasaverylargecommunitythatextenditsfeaturesandcreatesappsthatcoveralmostallaspects.
Allandroidapplications,calledapps,arebuiltonAndroidUIframework. Appinterfaceisthefirstthingauserseesandinteracts
with.Fromtheuserperspective,thisframeworkkeepstheoverallexperienceconsistentforeveryappinstalledinoursmartphone
ortablets. Atthesametime,fromthedeveloperperspective,thisframeworkprovidessomebasicblocksthatcanbeusedtobuild
complexandconsistentuserinterface(API).
AndroidUIinterfaceisdividedinthreedifferentareas:
• Homescreen
• Allapps
• Recentscreen
Thehomescreenisthe“landing”areawhenwepowerourphoneon. Thisinterfaceishighlycustomizableandthemed. Using
widgetswecancreateandpersonalizeour“home”screen. Allappsistheinterfacewheretheappinstalledaredisplayed,while
recentscreensarethelistoflastusedapps.
Sinceitsborn,Androidhaschangedalotintermsofitsfeaturesanditsinterfaces. Thegrowthofthesmartphonepowermade
possiblecreatingevermoreappealingapps.
Atthebeginning,appsinAndroiddidnothaveaconsistentinterfaceandwelldefinedrulessoeveryapphadadifferentapproach,
navigation structure and buttons position. This caused user confusion and it was one of the most important missing features
comparedtotheiOS.
1.2 Android App Structure and UI patterns
Androidappsareverydifferentfromeachotherbecausetheytrytoaddressdifferentuserneeds. Therearesimpleappswitha
verysimpleUIthathasjustonlyoneviewandthereareotherappsmuchmorecomplexwithaverystructurednavigationand
multipleviews.
Ingeneral,wecansayanAndroidappismadebyatop-levelviewanddetail/levelview.
AndroidUIDesign 2/132
Figure1.1: screenshot
OneofthebiggesteffortsmadebyGooglewastodefineawelldefinedsetofrulesthathelpsdeveloperstocreateappealinguser
interfaces. Atthesametime,theseruleshelpuserstonavigatethrougheveryappinthesameway. WecallthisUIconsistency.
Android,moreover,guaranteestothedeveloperstherequiredflexibilitytocustomizetheapplookandfeelandmakeitunique.
These rules are known as UI patterns. Patterns are proven solution approaches to well known problems. Thus, having a well
defined UI pattern catalog and knowing when and where apply them, we can create appealing apps that are not only full of
interestingfeaturesbuttheyareenjoyablebyusersandeasytouse.
1.2.1 Toplevelview
Assaid,thetoplevelviewisthe“landing”areaofourapp,sowehavetoreservetoitaspecialattention,becausethisisthefirst
thinganuserseesofourapp. Therearesomespecificpatternsthatcanbeappliedwhendesigningthisviewdependingonthe
typeofinformationwewanttoshow:
• Fixedtabs
• Spinner
• Navigationdrawer
Wehavetochooseoneofthemcarefullydependingonthenatureofourapp. Wecanusefixedtabswhenwewanttogiveto
theuseranoverviewofthedifferentviewspresentinourapp, sothatausercanswitcheasilybetweenthemtoshowdifferent
typeofinformation. Atypicalexampleisaappthatshowstechnews: inthiscasewecouldusedifferenttabstogroupnewslike
(‘Android’,iOS,‘Games’andsoon).
Spinnerisusedwhenwewanttomovedirectlytoaspecificview,thisisthecaseofacalendarappwhenwecanusespinnerto
godirectlytoaspecificmonth.
AndroidUIDesign 3/132
ThenavigationdrawerisoneofthenewestpatternsintroducedbyGoogle. Thisisaslidingmenu,usuallyattheleftsideofthe
smartphonescreen,thatcanbeopenedandclosedbytheuser. Thispatterncanbeusedwhenwehaveamultipletoplevelview
andwewanttogivetotheuserafastaccesstooneofthem,orwewanttogivetotheuserthefreedomtomovetoonelowlevel
viewdirectly. Thispatternreplaces,somehow,anoldpatterncalleddashboardwidelyusedinthepast. Thispatternissimplea
viewwheretherearesomebigbuttons/iconstoaccesstospecificviews/appfeatures.
1.2.2 Detailview
The detail view is a low level view where a user can interact with data directly. It is used to show data and edit them. In this
kind of view the layout plays an important role to make data well organized and structured. At this level, we can implement
an efficient navigation to improve usability of our app. In fact, we can use swipe view pattern so that user can move between
different detail views. Depending on the type of component we use to show detail information to the user, we can implement
somelowlevelpatternsthatsimplifytheuserinteractionwithourapp.
1.2.3 ActionBar
The action bar is relatively new in Android and was introduced in Android 3.0 (API level 11). It is a well known pattern that
plays an important role. An action bar is a piece of the screen, usually at the top, that is persistent across multiple views. It
providessomekeyfunctions:
• Appbranding: iconarea
• Titlearea
• Keyactionarea
• Menuarea
1.3 Standard components
Howdowebuildanuserinterface? Androidgivessomekeycomponentsthatcanbeusedtocreateuserinterfacethatfollows
thepatternwetalkedaboutbefore. AlltheAndroiduserinterfacearebuiltusingthesekeycomponents:
• ViewItisthebaseclassforallvisualcomponents(controlandwidgets). Allthecontrolspresentinanandroidapparederived
fromthisclass. AViewisanobjectthatdrawssomethingonasmartphonescreenandenablesanusertointeractwithit.
• ViewgroupAViewGroupcancontainoneormoreViewsanddefineshowtheseViewsareplacedintheuserinterface
(theseareusedalongwithAndroidLayoutmanagers.
• FragmentsIntroducedfromAPIlevel11,thiscomponentencapsulatesasinglepieceofUIinterface. Theyareveryuseful
whenwehavetocreateandoptimizeourappuserinterfaceformultipledevicesormultiplescreensize.
• ActivitiesUsuallyanAndroidappconsistsofseveralactivitiesthatexchangedataandinformation. AnActivitytakes
careofcreatingtheuserinterface.
Moreover,AndroidprovidesseveralstandardUIcontrols,Layoutmanagersandwidgetsthatwecanusewithoutmucheffortand
withwhichwecancreateappsfastandsimply.
Furthermore,wecancanextendthemandcreateacustomcontrolwithacustomlayoutandbehaviour. Usingthesefourcompo-
nentsandfollowingthestandardUIpatternswecancreateamazingappsthatare“easy-to-use”. Therearesomeotheraspects,
anyway,wehavetoconsiderwhenbuildingandcodinganapp,likethemes,styles,imagesandsoon,andthosewillbecovered
inthefollowingarticles.
Assaid,AndroidprovidessomestandardUIcomponentsthatcanbegroupedin:
• Tabs