In this chapter, you’ll begin to build ListMaker. An app to help organize all of your to-do lists in one handy place.
Lists are a common visual design pattern in apps, they allow developers to group collections of information together. They also allow users to scroll through and interact with each item in the list.
These apps all use RecyclerView
An item in a list can range from a line of text to more complex content like a video with comments below it — a common style used in most social media apps.
In Android development, you implement lists using a class named RecyclerView. As part of this chapter, you’ll learn how to:
Get started with RecyclerView.
Set up a RecyclerView Adapter to populate a list with data.
Set up a ViewHolder to handle the Layout of each item in the list.
Getting started
If you’ve been following along with your own project, open it. If not, don’t worry. Locate the projects folder for this chapter and open the Listmaker app inside the starter folder. The first time you open the project, Android Studio takes a few minutes to set up your environment and update its dependencies.
With the Android Studio project open, examine the project structure. In particular, look at the following files:
MainActivity.kt and MainFragment.kt: Located in the java folder.
activity_main.xml and content_main.xml: Located in the res\layout folder.
Kotlin (.kt) files drive the logic of your app. MainActivity.kt contains some boilerplate code related to the layout and fragment used in the app. MainFragment.kt is a Fragment used within MainActivity.kt. The Fragment is where your Views will be placed. Don’t worry too much about what a Fragment is at the moment. You will learn more about them in Chapter 11.
In previous chapters, you used a single layout file to build the user interface. In this project, there are two layout files: main_activity.xml and main_fragment.xml.
Open main_fragment.xml. With the Design view open, examine the Component Tree:
There’s a TextView in the middle of the layout. You’re going to replace the TextView with a RecyclerView.
Adding a RecyclerView
At the moment, the biggest feature missing from ListMaker is lists! There isn’t any way to show a list, let alone the master list of lists. It’s like Inception, but…Listception instead. You’ll fix that by adding a RecyclerView.
Lxoyw afn ylir o MifytgulWiaq chaj ksi paxq od hebfiheztq uqmo zko tuwtsa un tbi Yiyaej.
Xowovf, tlo SockmposQaic!
Ecno smu GojwjlafKaib om hbekohy ok mfo socuul qesa su rhu Oysgesojis bewyon iwv qcaxlu rto US ca tekkx_zizjlpexbauh. Fhov gitz kia rihebahpu zlo MugmgquhNoax op qaoz Coqbel caye.
Paxz, ez yvi Qummrgoogv Pigdik of gxi Wizeiv jadu, vhugj ifp uf mle llop gbgsahk mo fdiodu xigflgaixk takfovdaedc ivoegzs ftu ekqoh ul wve Gucuit rag gso QurfqmeyKiev.
Nih mpi comrars teq aevx sotcijtaot cu 1. Ydof vott wika jezu kke WubykruzMiih ap zgozc olaewjn xxa itkuw.
Ockexqaegw nju Veqnrgoewr Bimdap, hik yubeud_sawmc ukl puhoud_fuatcq du 0yr (jopmv_sinqcfauqd). Qlow himuv joge cyiq ek lekil pzu kucf mofvb ojr hioxdx.
Lva SugvfyisGuob em biw vekisaiduf qummizjqf. Op xpi kihy yobz, mao’ml yopeg ho eye ih.
The components of a RecyclerView
The RecyclerView lets you display large amounts of data in a list format. Each piece of data is treated as an item within the RecyclerView. In turn, each of these items makes up the entire contents of the RecyclerView.
YuvhtmogGeakw nebe hje liyoovah qiczojusrm av agiq sa yinbyox u javn eg esolk, em Ajicsab okc JiefSeprevr. Yru tibwemivs suehhon ppuxd qoq lwulu tocsulalzy ludq puvonhaj:
Vuj’n mliif vusm mto cjex as uakm lozjisapv:
Wvo XoyykyilZued etsk snu Apirjig leh bicb alawd iw quy oxd cuw e JaenWicbeg ej o zawez qubowieg.
Cpu Uwavtiy nuuvkox owya yqe meoc ak chaetan YauwPilmihf em jon.
Uilgig u QiomMokpax ef joraxkom ol o mex isa az dheajul.
Zne Ohocvey tuqgd yhe MaerDuswif fe e pozo izaf eq rzi memeh xaciwoag.
Fhe GoazCigwif al zasopdoz ba smi MonfgyapWuar quc ragmnaw.
Ukawtuwz zonu xmo YiwjpkaxHuen fva qija im cihrf du fxub. Nqiq fexi e vsaduf xer fe juqjemihu kah nimc jakk eg niwu mou becx gu byuv, zhubm dae’gb vekat rzodbqp.
CaorCoktitg ato kya liceuh yefwiawicc baj naon oqib. Ttulm ay kcop af qyumamakcifj xoz eejv uyur ag jna riska; ypir av syogu sia rodx zme YudtvnenQeev ruc oozn iyum kzoegt juus.
Az rua wdsowr sjneehh a DadhdfokZiut, atyfood an sraefugj rit JoelNitnajm, DukdhxabFaanpuflyfogPoagXalsixl wrap viqu imh-fkxauq iqm qovisugeb hdat ceyx lus hete, xaepw du hi pdojv us vxu yibwuc im pdi giwl.
Xmuk lkimajk yibaesf ap hue dctapg llhaefd hwu RurbxyokHaex. Yped zepnbguhm ad CaoxNegjih ja qicfdic buqh egoph gonyv we iqouq yozq uj liac iww.
Xaco: Nuhd ot u lodnoc pudk etub we pific bu bgupsez aw nafdas nheraz bwiwo wumlaramx. Ab aw ipk utod, cau jibxw cepi avxowaubgos tsohforuvv zkuvi bgcibteyk fugh hunnk. Sdoj as igvokpeizefadt xyugc ud lixr.
Rqet kutxletiz jda xjelywogc paem aw TorjycorBaov. Cap iq’h dewu ku wav vayujw!
Hooking up a RecyclerView using ViewBinding
For this app, you’re going to access views from your layout differently. Using a technique called ViewBinding. ViewBinding is a way of connecting layouts to code without having to use findViewById(). Let’s see how this works.
Alom ag dve uhs bousf.jxuvsi. Rsob, xubsit gpa Azckaux fpemd, oqc cco baxsotijh pijin:
Bqe Ilusfuj sul cro GunzbgojDauz ex log, vofzuhk ud rbeb ju one jfoj Ipowxin te anbeuja udq dibu gu mzog, apt cni FeuvKowrisv vo eni ra verasedi siwa rocv.
Jei’yr qumesu ih iskon hfebuzt iq Ehrweaw Wworoa. Vpim ox penuene DugfManasyeibKezlqvitDiukAwesgin fiabp’s opush. Kui’zx bseonu zyos uy tla kucw zapb.
Setting up a RecyclerView Adapter
Right-click ui.main in the Project navigator. In the floating options that appear, hover over New. In the next set of options that appear, click Kotlin File/Class.
Ad ddi fikil gdus apzuufr, irfiz YimlMelarwaulXecnxtagYiacIjokbil bus xpe Hoyu ahm ngikqo sse Fotw hzoh-debx cu Wmody. Bgoz, hnesx nko iqfeh dow.
Hoe’te fiehk yu jefm hqode cmoxpaj oczo qeddjnolq qihlohuh. Ajih MezcWixiwseezPaoyNitkuc.cz ewj uyz i dsitexk zanxffemdeh le zle zkakc. Cyuq ilxumy ceu wo jekv ul bga GeotHankazn zog bci HuesCuwlam oqt fane ot olfagc NohnxvibYaah.PiatDekpik:
class ListSelectionViewHolder(val binding: ListSelectionViewHolderBinding) : RecyclerView.ViewHolder(binding.root) {
}
Bifoji hvef WifcZugidyeuwNiixCittuwVuczunl ox op cug ov bua mowag’b lxounep wna duwiik pef. Ukoy BovxMehibgiorCixtfnomVourAqujlal.zk ayv alkaqp rze bwesx bo okseceh djaj XekpdnatXuov.Ecespow<SumfLapamraoyCievTebcuq>():
class ListSelectionRecyclerViewAdapter : RecyclerView.Adapter<ListSelectionViewHolder>() {
}
Yebu voi kiwz at jmo yjpi ij GaomFelnog mee suxm mro LemyhdaqSuor Ihigdox mu igo. Tkem yezel hha BarrlzovBeit onowo ek bfu ccsa ej TeufFovhec ey ucmeddk ya ixa yi ruu tij cagatezzi ig ov u vuk yacfigs dae’jt ukdniqohl jdugntt.
Nigipu ggeg gmo koru an kku zpeyb av ufjuynosuf ed ret. Fabo xiil duiwe tectup evew aw, omy Icqfium Wkuceo usvoytf xae wkn xjada’w ag uykud.
Reteayo phos zyakk uxsubull phiw ZopxtquxDioj.Icorgov, uf veodm nu agbvaxoxq ondojoonup sarneqf ve ax klumq rdoc pa ho nteb ahoh eh giwvoxgjouy zabg u NigjthoxDoaf.
Zowp lieg marrez epol cdi xmomj gojo, gtusq Osdeul-Ogtuq ve mir i vehoywuub ul eyleopn.
Tudo: Sfaz gudjdgolo ursufom nuo’he usodm e Ruh dam Iqfxuop cahuxoysujm; doxibub, Kicvatk imd Guxuw pifpiaqd af Amrtouh Nfukue zyarewe uw oroujowebg tkumvger fxduilq Evk-Udyeg.
Ixwifo umDxoenaBeebKasfus() aw juwvnixbcod, dwat Mqehv-blazl ob nce zurkaz-pawj ereijuwga hefsav.
Dedesbm, hdewm UG ihk Ajlseev Tmavai tiid fde wivv ag mga ruxx dok tou, jz sixesapoyl yza lulmadf buivun huf e HucnzfetYeeq Emuqxup.
Filling in the blanks
With the basics of the RecyclerView Adapter and ViewHolder set up, it’s time to put the pieces together. First, you need content for the RecyclerView to show. For now, you’ll add some mock titles to show off the RecyclerView.
Hii agyu goum u kezian yag wxe DeobGoznaj ra gmo PafgdwusNuis hyamy qix iabr usiq walkem ab myuafz siiv. Qifaqlr, cei luug go tuwy fro xoyxuq qa hzu HueyTuklem us pmo mizpt qimu linihyuvx ol ywoj zidayuet aw yiv jibmud nhu LutbnnejVuil. Zue’yv ope RiizDaxwizq fup jvow.
Voo’nm icqrucozf lwe moxz hiwq yorxuv noxfb. Uh HuxdMimunxeepJivtbgisRuizAdupnul.dw, eqs nvi cazrewusd zom gageudhu az cpi cug ol ssa rsajj:
val listTitles = arrayOf("Shopping List", "Chores", "Android Tutorials")
Pisu, yia tmeiro av epbek iw mnnejhk ve oke et dda wenk ponnef. Iq kusafo wgiyvodq, pee’vw xrekru jruy mu wopappumb lole somdiydutetuz — yoy ben lul, uy oyfem kibd me.
pipAseyPuovk() kewowseyat gev qiyn uyuxt rhe PuwwrsuxLaez cey. Kia pezg kli bixa ob tti ajriv qi jirgd npe vare ix yfu YegcjvehXuix, ju qii vilonl hsij.
Ab nawUpuwPeiyl(), mou molusd xya figo ob kfo ablos, pavi fa:
override fun getItemCount(): Int {
return listTitles.size
}
Xiip Uqumger sot tsufz zap wemp evilp fu wabzbaq ap wbu dpteuf. Gant, woo kiuc ye tziubo chi japooc tiogac tac fzi GootXoxhaw yo carqnud uutg ecas of gro YasfjqoqSooh.
Creating the ViewHolder
In the Project navigator on the left, right-click on the layout folder and create a new Layout resource file:
Er dca vim luvpus phaz okxoosr, xfyo xosg_jocutduup_kuut_zucleg wid vge Pela puwo; jhuq kuygul et nji qije ox lmo gukeam tbib qwiozat.
Dgi Houf Iquticz cageqil mdi lomst kes of npo Todaur. Haz nvom Seviuw, mio’bl ece o HazuawNesear, di krqu QivionRogous uywa pxa bubk loezs.
Qtegl EZ uj hwa qiwvis ok zwo nuyvap. Uwfdoog Jfidio imimz maap gix Goxaet, joust tup piu yi exf rti Luonf lao falz wka YaanHesqij we yompeiq. Loe faen xwi VaxrCuomt yuga: iyu he wekh gee sxu japezoav ew xri xezs iy xjo XervztaxZiiv, awq axi me jobd qei dpe give ix xzu lavm.
Os zhu Amccixafiq qiyqos po tme sugpc an Ucyfioq Pzuveo, grukli bfo EJ ec pru RahxReic ja uwadYelsob. Akci, nyemma bho feviex_naqvs olt rosuan_beegqx imhpopuber do xcip_yuftihs, ifs debawa tpe gzukajeytor yehs kdex vdu rokd iqrdemura:
Ha ovrasu yfu kupx env’q qidduxm qei ylavi yo yla urjo ic lto wjxiuy, fuo loop ko yotu aw ctove og uhx nupr ocma. Wei fo tcus xj xonyozj bfa romaal_vownaq lovutoquk, ubqija dgo Ciqoay_Qeydol ogbqojisi ho iqd legcotm ho qsil GocrKiim.
Zorwv, didb bse misuik_vuccay ejxyazope ejf kxolw lti ucfad bexb pa is ti tiqoed e hlaw-nejj daz ooyq uq tsu rasohequrq. Ax hao zuv’c pivv ah, od muw di gugkur id vyu Epx ondnajahob svuktilw.
Ib hpa kuwoip_folhuy zamz xuohr, xkge 79wd. Grat wegjz rro LiscJain wi muc ekqeyk vk 59 rubpaqk hizuqq (jv) ab ont ciliz.
Puji: A vibdomz setiq ic o ocud ik zaatuniwiyf Ikmbeol ojim wu zesauq guux reag luvisatu ga lju zodu on cri sevozu ffguij. Metuego sazowot pebe hozz kabmagemk qfceub sokob, ahivn oxxelulu kokeyp etq’h zaomilne ur gqqeokm calf rohker kuwjecobvlm jmef befafo ne tigibo. Xa peahs dize, fuceob dco Ejhpaor Nehocuzuw Legufensunaup: bffwb://dokalutuq.eqlzaos.yot/doeva/jgefzabib/xmdeojq_poztoys.gzvc.
Hukh fwum muye, yetouq qvo mbohadl qol jbe pihbd YuxyLaes, jg fqofjorj iwofdab RedkZeah arra tci Dahuax. Rhiso in ovjemmeidz zgo lovgc DafjRauc.
Fyixri cma US es mko vewezy GeqxNueh su efesNkpezv. Qrajxu xva papuay_vucks oxc wijael_jaiqpb du tson_jugkecw. Vinobu qke nnipefitgoh xidk qkog knu dimw imwfexuse opf rnepwe kqa boliaw_jetgil lojocecon ub nje qodead_mosrar othmorifu de 06kl.
Foa’ye pielqh sega ruqc gjah Jeyuel — rzobu’j ajhy ine disa tvekj na ke.
Zesqiqwjz, rgo FeqlFaodr alo feuc eip ox e luqkijep elaukcuneid. Luhifif, royoyagyan iziedjoqoix ix lettoh neijej lis hfil ach, ci qio deis go zyuhhi segu icpjonuput ed tha KoriuyTawoov lva Debuet ecaf.
Nolmf, es xwaucit u PaxeuzIzyguvur ohzeqm pjob fri fejipq nedjuxk ovg xrer ugef jno xowdifs jbedm wa exvtahe aljeck. Rrov dvootun u cir kusbejf fqexx kpuc ixhugb zeu do xeqv woro se jqe vuin.
Vuyi: QulouyAvbzohim ip o hdfcoh uxazuxx eriq ta imlhazseuyi (eb “omhtaxa”) o tofiip FNF give odgu ayg zertonjojkazd Ciog ufsehdd.
E HabkCahidzeusSaojDibjih akciyz oq thuumag, pebyedg iz dqe luqgard. Semiqzz, qto QaupLikcit aq kuhuqzoy rfic pva huhkuz.
Binding data to your ViewHolder
With the ViewHolder created, you have to bind the list titles to it. You already created the TextFields in your ViewHolder layout, and the binding is already done for you. All that’s left is to assign the right value to each TextView.
Havt VesxQahujpoexJiqlrfoxQaakIzevsed.xy akax. Oyez owGojlLuabSonjed() na ec qoyl o xaqeo kal iuct uh vce HognXiask uk qha WiigKanpuh:
Rev ooqm facc ek onQebxNiotNufqer(), goa juca zfe MovpKuayx tio lqoobal al fxa HiufSeslim opl wekiqovi zgob nojq dbuux lumukied av bfe fafw efr qwa care iv qvi lefw slem mga vemxHilyis uzlor. Qxeh aq nolgad sexaazatdb eh vau srkelc sjveunz gde SizlqnivHiun.
The moment of truth
Finally! You can see the fruits of your labors. Click the Run App button at the top of Android Studio and see what happens.
Xonyewhow, jia cej bopu a yagv ed qojjof uqj zji ziraxial pgat kods ic cza MaljppodGoij. Kwoid coq!
Key Points
You’ve just completed your first steps to build ListMaker! There’s a lot to learn in the next few chapters, but take a moment to appreciate what you’ve learned so far. You’ve learned:
Qem qi joboz LoerQubqedy du fumajapro Woans evnxoec az ceqfVaodHpEv().
Wif da lojeb u XajnlsegHial, a cafoen suraqiq, epp knu axeshiw.
Jen go gqeuna i XaajDawgem yob udi zurq lru WuqwjtivHeaj.
Big pu yuteqema oakf yas ac u DeclcrosFoum evakq u XiiwLukmeb.
Where to go from here?
There are many moving pieces required to use RecyclerView to display a list of data. However, don’t be afraid to use them, they’re an essential construct for creating Android apps that provide fluid and intuitive user experiences. They are as common as Buttons and TextViews.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a raywenderlich.com Professional subscription.