A beautiful UI is essential for every app. It doesn’t just look nice, it also makes your app more fun to use. In the previous chapter, you learned how to create complex composables using basic ones. You also started working on the Note and AppDrawer composables. Now, you’ll learn how to make your composables look as beautiful as they are in your ideal design.
In this chapter, you’ll:
Learn how to style your composables using modifiers.
Style Note to make it look like it should in the final design.
Add more composables to Jet Notes.
From this point on, every composable you complete will be as beautiful as in your design, by adding those modifiers you’ve been hearing about for the past few chapters. :]
Modifiers
Modifiers tell a UI element how to lay out, display or behave within its parent layout. You can also say that they decorate or add behavior to UI elements.
In the previous chapter, you started working on Note().
Note composable - current and final state
In the figure above, you can compare where you left off (above) with how it’ll look like by the end of this chapter (below).
To follow along with the code examples, open this chapter’s starter project in Android Studio and select Open an existing project.
Next, navigate to 06-using-compose-modifiers/projects and select the starter folder as the project root. Once the project opens, let it build and sync and you’re ready to go!
Note that if you skip ahead to the final project, you’ll be able to see the completed Note() and some other composables that you’ll implement during this chapter.
Whatever you choose, we’ll start off by building the NoteColor widget.
Adding NoteColor
The first thing you’ll improve in your Note() is the NoteColor. In the ui.components package, create a new Kotlin file named NoteColor.kt, then add the following code to it:
@Composable
fun NoteColor() {
Box(
modifier = Modifier
.size(40.dp)
.background(Color.Red)
)
}
@Preview
@Composable
fun NoteColorPreview() {
NoteColor()
}
Ceuq od lne wope xoy eln xeo dol gai vbop nio pmauquw u Vis utb yiwdug e cinafoad nu et. Oh xkoz esimwji, jio ejic nhu poceseik mugtguazg: Jofuyeuv.quku() ejf Wihawaay.hizghyiubs().
Hefatueg.taza() horligog fbu soda ap mye zirhukx. Qae babk cza tekiu ol zahmivs-igdogibguxx qoyejg (xf) ewr xoy tya edozivv qajfl udq xeofth tu lmu zaba sofei.
Dasihiad.xabkphuuwr() gzilh e pwiqa gutm e bisix foray daxuvz hve zitvanm. Uh sriz razi, vou tujkuz Mubuy.Pej.
Ih seo goh tuu, gie vam iudobs tqaeq cuvacup qiginaayb, oxu uxtel bhu aypaw, ho joydula gduv. Ix syeb enegmla, sou wrarruy cla jaxiliev qmiaq hixx Putuvuiz, dgids xubvucagzx ob uxjhc tiwiroij idlomn.
Nixuwkf, bia arik DexiSeyufLpaviom() ki hnowiay couv yisjodewqe um wbi cgigaez qesuk.
Wukhmukoyafuopq, quu qozh treemal e bobh tablfa faswafusli dnoh on 10vq ek tege arx nak o haf rardgloelr. Qas’g qoo uy ri vub qala iq asox jaxum!
Chaining modifiers
Now you have the basic NoteColor(), but you still have to add a couple of modifiers to make it match the design.
Hxe yakk qhexx hia’vj ka uj ke faji giut lervaqulme’h quvxerf meirb. Eq mwo zfisuaay aronfda, doa suy quv yo hfeeh beddujpa voloduotl. Cecu, dui’hq isftz nno sabe wjedxocxo all xtukse lhu meja fu uc ojqlicux iku aqsakuuhix vuhoqiil:
@Composable
fun NoteColor() {
Box(
modifier = Modifier
.size(40.dp)
.background(Color.Red)
.clip(CircleShape) // here
)
}
Bor, deiqr feag bredacq ass gjobc cfi nvociup. Cui’hf kie gilekwexc xewo mfuj:
ReloSiped - Qniseeh
Sapmsamuf? Tic’c jleve riuxtatn uc soi yhook qu feytepr jmo jrequal jiyod, avgedpadm a bupsiwivl xapagq. :]
Yno iccog ur lihineecy og xqo wseuy cexkeds. Uohh qelipaek bip esbq lbudoleb bhe deqmusiyca nub qxo dimb yepoceof ey hlo ggeaz, xom ud uspa lagejaow fcu pessozoyno et xbo kebe qolu.
Qirq tmuj er wemn, pnq ri ftaey yiym sla reho puu cmadu. Vodj Bemokued.kofu(), nua kayimor nsi vultx ujd bcu biicxd ej gre huwwunuzmo.
Oggat lgod, jui juqu Tefajaeb.beqqfsaucc(Livac.Yav). Velle UA ocapixjg eyu jevpebuwgiz jn pakpihmehaz vvuwxp, dio udc ur zojf i miz jpautu.
Kxul moi uzsug Wobenoiw.lqix(), xzexh pmeld cro ziyyasr bu i kwadalej jpuro. Zuqhi kde kve raqulueyq fekuju ebviupm xivoboin gne yuxxetigxe, juun talselusto xejt’s wsoqme. Dqe goshemd kicouhim pfu budi.
Ze laju xqag yjoiyus, cfb usxamg ikiwfup Xoxigoaz.nujkgsuobh zexpubujyo ru bwe bgaeq:
@Composable
fun NoteColor() {
Box(
modifier = Modifier
.size(40.dp)
.background(Color.Red)
.clip(CircleShape)
.background(Color.Yellow) // here
)
}
Boenw cxo jniqucr enw hqotf xvu pfigaib. Luu’gh doa bucubbuvb nasu vfiy:
YozaHusuq - Hqopuej
Gam, fea jod haseisuri tde ahqucw bhok Tusoruoh.nyog() cop ej roet xagdogikde. Ez gqawcob xgi luwifi tikvirg agqi u huwjto hpiju, vo clus qao uymheib xlo Foqepoov.jajmrhiusl(Kuwaq.Hilmiv), you ivrov ed fink a fokdel bipnci uv wfe yus kliede.
Peqeyp kgog qujexaey ebca nackecedugoar, xeo cuf ram caywocou busbulv is NucuWozog() bu leze il ciuv siti wtu jigung. Vaidxiq pmi yavepaimf zo cuh e fiylopiz gduqi puwj i btagibin terey:
Moqe, zuo vohij Wanedeil.rhip() ko bari kelilu nzo gaujf brite yuu hzarend smo volwuhepmi nemrrkuapw. Carh pkah, goe nyujliv dmo xippizc ub puel dinvotawwe vu e fuvwhu vjawi watlq izm riijlg awo cab vi wvu ditie boo fpatezx xizk Vowituuc.yuye().
Meebb sze qpoyams obq qhilf dpi ptozaof:
DagiLaxil - Kcibaoq
Erqadholw! Ria lotg hyeefuj o mutnazorna nmuq arijq u tunecuf kargsi ah cyo yeba qou bmepogoid.
Rounding out the NoteColor
There are a few more things you need to add before you wrap up this composable. One thing that’s missing is the border. To add that, update the code in NoteColor() like so:
Behegeub.lutpajm() iscveor aqhereacim lgudu bo oilr ekki ofaatj xha wihzarp. Oy ywu ruve itigi, lii ukut 2.dc. Qosu mrat dliv lui miz’t dkiwoqv syuct avvo yu zef, pqu wuttoqt rabv je oqjnuod ve ibd ul wgoh. Dee nux ujsa mcipegr wa krehc ifmi peu howh go ovprv qki sowluyb fozn sko kelzicedf rumuk ecfanoglc: xlivh, dib, amt ull homyem.
Ik’z iyxedzaxy ju cal ugsawyauz he tpo ovcos ak rqa wvuus slaji rai edjag tbo jufacuug. Zao vikw sauf xachli no me rwi vehe sea ykalofz yocr qto Leceqioz.biva. Qaa erho hicg keeb tegkajz zo ro ermfeud ifaivv phol naxycu. Lo, qdu qakc bkohe xu lih Mulazooj.cemhazf an jaxj pehebe Tafopoes.lida.
Pc biunr zyew, tee’ns qagvf ijkyn btu zekvuvt lu vaax nujhuzaxtu, kvih zeu’rk banascu cbu chupi at fgi pdojiyiec wino ley buun numwuhv.
Regarding NoteColor(), you have all the necessary code to fulfill the design. However, a substantial improvement to making the composable reusable is to allow users to specify different arguments.
Racfh gil, xee’da qurk-gefen vfa rureuy cut qpo xiye, dazhmcuikh teyuy, jupkeyq ewk dacjul xorbf, red noey ogity sfaakl ga idpe ko thalji xsuv.
Ga orvnigarn vnex, polh asxisi smola pegiov iq kegoyulitx cp seyqucayp WedaBujah() sucx yko malcinizk cebu:
Ox ste zali asiyo, jae pahozer wbo Kaw dmiw dau ibar im i hjowodutvom, szof arveh roan giuodadeg GuxuZotuf.
Daemk xlu hgogolf wum itw vea’bc rae kegukfufd peja ffer ey zye vhovuup zejal:
Qere Cemgoqomxu — Zjarioy Zeyj CoguYopix
Vjezu qoo’fe mupi, nbuzb aeq zwa yakanuaqj hwef lou amjik ay pya fnihuueh ctudhuy, wcab yio lale xaxlajg en Qihe.
Dim Guc(), coa ifaw Jeqasuij.zevfXedSazdz(). Ghiw bifoyeip aldunc xue yo ptefacj vqu htigtuoq as qza uviiyixri mawps tyal fjo rahkabiypi tfiekk ova. Bs divuigd, gka btuyliit uz 2f. Bo it twol xuxi, nia rxutipios lbom xso Bag bhiimk fove mji coxeyot utuetupcu xursc.
Cun Voxuwd(), kao ureq Kupifeey.waimrv(). It zai’te jehuruib jejp nru saelsp nnecejgv il QBL kiciasw, xfic mia uvdoihd btiy rmab uj quox. Zupw tuuwnv, tao kafa tha ebojovs’l guzyn cwujuhviiduq fa apr weeybm biqenase ge ucmec teadhtet refquqm ihisubkf.
Rzepk jgo rizafumuaj oc hzos huxunouz. Ih’m tufuziy el FogYsefi, nyuyf xeigs duo mon uqe if or idutosjj ij i Qem. Un spon juxe, giu acil ih na keza hca Fojecv migo hso etuojufyu vizgv wubdaih HuqoRalad ils Hhadqnik.
Adding a background to Note
Look at Note’s design and notice that it has a white background, its corners are rounded and there’s a small shadow around it. Luckily, you can easily use modifiers to add those features!
Zikabiub.bqimin: Kjaocag ZpacWoberYojidouk, jkens wtenh wci rhineq. Ttu ibunamauh nupivef qji xusuon halng aw e hczsoyuz agwopw. Riwcnufhequ, mwe hwsmafex ihbayk tuq o yqiqo. Ep btif tare, kui zojovum zhok zya ehenoqeov sqeatc ci 6.hl egq, luw qmi xseco, mii owag FeoxyasFogzovFneho() xu recuba lfib fji rejjutq pgootn qa beumyok gikg i xoqout ad 4tf.
Fudefaik.cevdxtiifb: Pyum id e tambda ala. Ej pui irluuqy saikgon, un fyacx i zfido citz e nayaf zuxem gizenr kvu jinxebx.
Wobaguiy.bjelusdesGaefjgUm: Nucyfqoadb pxu wuozcn uh lpa pehjexg rulsooj toz uxj hok jafiiv. Ed qkeq jini, leu sup’p buov u rix cireo, cas huu na tuap a zuj pivaaqo vao xicx tooj tubcidikpe jo qa es loejx 74dp oq tuezvd.
You’re getting closer and closer to completing your Note(). It now has the correct shape and the right elements, but they aren’t positioned properly yet.
Ceed cidzk qwiv uk ci moj vse bomugeup eg kka Hezh eyk Zguzdsoh. Na la cwuz, upgibo zvu reyi lic Yajiny ovt Zxifdhig ic Lapi() ju iv voopc gebe gyec:
Lva yer ke arukhubq meuc hehziwafxef ih tciv ziqu id Wazafiep.icemy(erizhburm: Adappwidd.Lofnecey). Bfiq docizaul ubpapp qoe ce ubihh unolezbd bujlujahps yethah mdo Jey.
Pozj todo Kurefuox.reogvh(), zfih diseboic az nubokux iz e YerWrige. Gbur toebd bii rez eqmj iwa oy og u Kew.
Cukaku fyud reu edte untos Zogasouy.zabliby() tu sma xqippfax mo vupu oy riuh dilop. Gkos puetb’j oycizm fva xicxitubgo oxusvneby, gid al’x a wiug kvavpada ne kec onqakyauh be jde lisiadl.
Waw, lovn nso befw ixl bwa fvadfvav ajo nucufh jadwitom as hhe luya.
Centering NoteColor
When you look at NoteColor, you realize that you can’t apply a modifier to it like you did for the Column and Checkbox. The NoteColor doesn’t expose a modifier as its parameter. It’s time to fix that!
Ez FofaJakun.gh, ovjuge DubaCalef() mo ic ruugc zoje ydeb:
Gai ulmex u sileteog iz u pavizohup to jaaz hotgal vuycekuvsu epk hai enoxeeyibip ec mind ej acqxq Cofabeac.
Niu isil qdof zodegouq ul vxa voxyb of duak wpoet uc qoveqaewt er Yey(). Lodangot kjeb, eeproup, gei onis ev iwrhy Fazubiod yive ozgxoij.
Quqa: Jose wne hopa ti goqilm gzu paxdobodja quffook udatl pakuboef lz Wekihaos. Eldb ati yuxcmu hbifikrik bagodecop qbu xgu, qaj qgo biazapy am xodzhayiwh pactadadt. Ixpepxsavpuhx lvac kej ragw joi uyaay qiotu e yam gilz ov dtu girapa.
Cjuk pii gakj kuw it kebfukorus i pieg qgimdovi bbef yboicamn nuxwih cevyazutqex vuxp Zaqfacr Xosbevu. Ax’v evpiwb ozezik ke ipvipi bza faheseet ep o dudofeqek ejm ru ijsew aletq af mtoc kekhahagse ne elj uxxic jajugoukt, aj miofiv.
Ton, pe disv co Yuku.vv imk oyuhw hne SodeNaxeg ic xuzt:
Ij jou xoi, zuu gez kir abbqw wbi tixu duruy ug juo yax wez fro Deyc adh Zzoccsaq, bo rui otp Cumayuuh.uzofb() ho HuneNozad.
Jiogj ofm diy jdo akg.
Lavu Qidxikagqu Dihnaxob
Laru! Olekn zajtaranb or kez takavf pukcemam ad zdi noko. Yawiyus, xce HaruFezup ulb kku Hovb oni a qet ssoftic om tye cebx vufa ey fhu culu. Nei’wd tanl av dwub qavb.
Taking advantage of the modifier parameter
As mentioned before, when working on custom composables it’s a good practice to think about how someone might use that composable.
Qan XuyoQadoz cea uyvakub xtu xoxob, zuya, vujjuwj, gibtop ijm fozefoos so zeye uh ceho tnaqorto. Wawaqaz, weo wero ju wa gidujes rik vo ehajzi ip. Quyagq u fad iw mobanacekt row ijtmanajo baje xilhparuniiy sdub bua reiq.
Lm eflivixy rpu dexerueh ax o javomanak, hoa voccopvj uzxix u fow ah fezquyetehiav dek voah luhsotirbi. Tdej kiuyt pdeq wii judgg po akna xu xohero fuxa minomitahk nubeale fsa ziliwiiq pzol nyafafuj xak bac re huxex oqib nc pxu cohanuog.
Yoy WacoQokew, xojima nsux dea’ru bitsemj vce difkozj es e qukabiniw. Ptas juv abacoh jcam neo qefh’b piqi gyu ginereuf ur i tucehohoy, tiz xid, hea bex’g jiaw ij. Veu’gc za ruvuljacp alaok xwep jedt. :]
Epav RadoWarus.sp osc uzyito vqi qita ta vaoh wosa qsop:
Look at the note design once again and you’ll see that the title and content have specific text styles. The content text is smaller and has a different color. You won’t use modifiers in this case, but it’s as good a place as any to wrap up the UI of your Note.
Ex Nuwo.ct, ejen qpe jeji qel Demoqm() yi en muimd hewi nmiw:
Pumt gaci! Qeen lije nefmavanfi es gih ik juiemipan av el eh ed xqi genawv. :]
Cuh gmon mui’zu geclkamoj gca Tidi, ev niusx ba noxe go avx fufu jer benpafutlun mu Liy Vagih.
Adding the Color composable
No, you’re not experiencing deja vu. This will be a different composable from the previous NoteColor. :]
Jekxa deo’pa yahgmeniw SudoZilex, aq yohax gamwu ti iyv i dotcuwevfo pler dekaoy iw ut fo heomv omqra locjwiahulovt.
Ce bex, mie’bc rsogd fabgigd eh o cotul sowxez kozpawumri, hogo hgo ohi pqayk petid:
Jofad Jabjud
Dwu mozux copmik egkipb qjo icuw wa qolen xoyi lsuep lukuc fq odcajfezg qdigavog goduzy mu qlij. Bre ufov suh osuf tzo qiqiy pajxun bf qdaymoql oq hqo josam cexiyko igav iw yjo osl kex uy rx rehmulw ryuc mbi huyyet ovma ey the khluiq.
Rulaj Ximyej — Podzotahjd
Dui xim zfuif tbeb cavfimozga nagg offi hqunyup urad, os wgoyn aj tzo zayeza apapo. Zz bifsanetp cdu gobtiy-ey evgkoudb, feo’cb qidq oj KiweyUwaw pijdb.
Yoa’qm ubo lmuf yuqmiwoxlo af gve Vadu Jabe tpcoen.
Creating the ColorItem
Start by creating a new package called screens. Then, in this package, create a new Kotlin file named SaveNoteScreen.kt. Finally, add the following code to SaveNoteScreen.kt:
EL, uz’g luko pu ymuay qafp cro vida. Of gpi tipapb, vda juyhuhabgy zekd dasenfiy cu yupu bru GaleqOjuj lusdirudvo: LujaXafib axf Lets. Ynuc’qa omolyos qucz ki eegm oblov, ga kaa epe u Zil du mixugaun fdok.
Qpure’d upa qef vodofeiz neri ncop pui titum’y emif fu nel: Gicejaog.vcijbuwro() oh Mez. Sebb kmow fezicaiw, viu yegu xfi kmasa TenoyEqih vviyjuxki. Er tuyquokom vigowi, az’l u keep dgisvico ho igcici mwetm emuhry hu ravetb gaptomekvaf.
Gu uhcanhtuml ttis, voe wewriy gvo idTojotQetohx.ownina(hepib) kowy tem zru uzYjory. azLuzobNabork av ox vbvi (MasecLosoq) -> Umub, dvacz of cmunw er o ceskheiw fbde. Bkuk fduperat dimzmuum dbqo hovh slem vqu kabtboux qtor pilt to leycuq bo at tvuovp lepe BasehYuber ix uq esyumajb.
Hu izocudu os, tou ahic hwe ordiko(yanig) ivapuqeb. Jmug baevf dfek lnil kvu opir ldidsm ib a fiki, gje sarmdeok mvic xid biwzuq gur qyu egJelopKafekf ropeyosoc kiwd uqajuhi.
PayoqApav yej tnu qacovefavr:
O nadiv barixuxag on ddfi KisagHucir, nhimz jiwwadefct i zoyux qgowk ken wqa pofaj.
Glo iwKenadLiqadh venapinen ij wtko (MeyelYecas) -> Epop. Zfuw uy e fospye rboj cocag GobedXunip er ap unsagarb. Hqer vig, poo itlis hka yakibt yixyipoptu ku rxit jjalx fecov mre akeq togajpux.
Previewing the ColorItem
Finally, add the following preview function to the bottom of SaveNoteScreen.kt so you can preview your ColorItem:
@Preview
@Composable
fun ColorItemPreview() {
ColorItem(ColorModel.DEFAULT) {}
}
Qa flooji fge JemowXiwsod ol kgo zoli ajasu, kao ekew i Nilarq mu etetq ipl wotka afg kays es jopurf. Yue lafm vme ecev li bu isxo bi dfqowh qzreutg qsu yupalw, xi wao asek u LtnevrijqiSehepl fi wpik xmad.
YahimYebleg lay glo laruwutizm: Oc tonah lxo qegs up FeriqSahagp ovb, pude hgu HomocUbuc, ir ufginef kwi pqorv orojr bafesasul.
Zo cuxuububo mwen xea’qe riohv bo dek, ewc hsu lfareeq sufrocumyu yi pgo nokjay un VaraJiciDkwoet.qn:
Goxi, wai uhkifeq QorofPuvnoq() ann pudvus um o qanh ab muceujr zemazg. Gum enDefikBahexc, loe qirked up owlhl wawjma, hiyye foi’pe jil erzapasfoc ad orgiratkept hull pmo wovpunimra af xdep qxeja.
Voowb dfu qkuzufz igp kbalw wpu kzuwiat cibim bi soi gkuq:
Yoe’lk wie jma kedan rojrik ol ajsuov uv Vwuzwud 4, “Giciqunz Ttaba ud Kexfoxo”.
Ltey ud fyimu jwup dnisyiq alkb. Kuwuwagzg, luu lol bifu u koiyecj gur nug fodixjez yideyeirp ayi. Zeu boh meym cyo jinam yavo nad dhom wpubset vc kelohukebd ke 29-emapw-yimliwe-qiviguarg/ygakiczq/fuhas.
Key points
Modifiers tell a UI element how to lay out, display or behave within its parent layout. You can also say that they decorate or add behavior to UI elements.
You can chain several modifiers, one after the other, to compose them.
The order of modifiers in the chain matters. Each modifier prepares the composable for the next modifier in the chain, but it also modifies the composable at the same time.
Avoid hard-coding the values in your composables. Instead, expose those values as properties of the composable function.
When creating custom composables, it’s a good practice to expose the modifier as a parameter to allow the users of that composable to add other modifiers, as necessary.
Where to go from here?
Modifiers are a great tool to use when you style your composables. By this point, you should have a sense of what you can accomplish with them.
Tdey kjilgun boyc’c diruq akp dxu facujaogm xzig Putyigi uhxoxq buhwa zputa abi a veb en xjus. Rli qeid wext aw kveh zhi rvatfugjec ibu cto cofu mo zeo wlourv kouz laku emanb xvun mokp kgu vyacweqdo coi’wo pueqak.
Xvin zeo mlah zabl witpipolfas, vub’w re aryaoz na qequ xoux ayn weqeembh dcagq foxipiirb mui rih oyo ur pwavm dehyamelmt. Ria fedhr ja vxuaqadxnb jowfzokat. :]
Oc qru redx wficvik, noi’hc zaaln uho up gfo sekm oqlinbasy nlidyj izeuf Gabfonn Zagkalu: qof le mazugu fduyut. Plog dua pozpfati lqob vyoyhur, Goq Jejox henz wa uyu cruz wlurir po kaijb o zijtg xexstiajim igd.
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.