10

Building Complex UI in Jetpack Compose Written by Tino Balint

Now that you’ve learned about ConstraintLayout() and its advanced features, you’re ready to build any complex UI, no matter what your requirements are.

In this chapter, you’ll focus on building more screens and features for your JetReddit app. First, you’ll make a home screen with a list of the current posts, which is the main feature of the app. Then, you’ll build a screen where you can see a list of your favorite and recently visited subreddits.

Building the home screen

To understand your task, take a look at the following example from the original Reddit app:

Here, you see a home screen with two posts. The screen consists of a header, content and post actions. There are two types of content, a text and an image. Keep in mind that the user could have more than two posts, so the whole screen is scrollable. As you already did in previous chapters, you’ll implement this screen step-by-step.

Since the content can be an image or a text, you’ll implement two types of posts. The best way to do this is to make all the components be custom composables, so the only thing you need to change between the two types is the content.

To follow along with the code examples, open this chapter’s starter project using Android Studio and select Open an existing project.

Next, navigate to 10-building-complex-ui-in-jetpack-compose/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!

You might already be familiar with the project hierarchy from the previous chapter, but in case you aren’t, check out this image:

There are several packages here, but you’ll only change the code within screens, to implement new features of the app, and components for custom composables — for example, Post(), which those screens need.

The rest of the packages have code already prepared for you to handle navigation, fetching data from the database, dependency injection and theme switching.

Once you’re familiar with the file organization, build and run the app. You’ll see a screen like this:

It’s an empty home screen. It only contains the app drawer from the previous chapter.

You’re ready to go now. You’ll start with the smaller components for the home screen and build up until you’re done. Your first task is to implement the post’s header.

Adding a post header

Each post on the home screen has a header that contains the following information: the subreddit it belongs to, the name of the user who posted it, how old the post is and its title.

Muw doum yoktl lmat, alip Zoyj.vz adkaxo favxaqicms ozn rojvuru Xiowis() dabr dfi wikjomakg uztqiyeclociut:

@Composable
fun Header(post: PostModel) {
   Row(modifier = Modifier.padding(start = 16.dp)) {
     Image(
         ImageBitmap.imageResource(id = R.drawable.subreddit_placeholder),
         contentDescription = stringResource(id = R.string.subreddits),
         Modifier
             .size(40.dp)
             .clip(CircleShape)
     )
     Spacer(modifier = Modifier.width(8.dp))
     Column(modifier = Modifier.weight(1f)) {
       Text(
           text = stringResource(R.string.subreddit_header, post.subreddit),
           fontWeight = FontWeight.Medium,
           color = MaterialTheme.colors.primaryVariant
       )
       Text(
           text = stringResource(R.string.post_header, post.username, post.postedTime),
           color = Color.Gray
       )
     }
     MoreActionsMenu()
   }

   Title(text = post.title)
}

Zigo’c pfox niu guy puln kvol sere:

• Marbj, xao exgak e Cah() tfeto pao kfevut xgo ilaj.
• Kadj, kie objud u Nolapx() ye bevuluem fbi rzi luhsd eye jivey hvu ulmux.
• Af pwi idr op hpe Pul(), guo utxar e FehuOjviexjLuta rifneq, hpafd laj ekfouzf sjujefec qus saa.
• Homimmx, foa hluwed Xajha() iedmule bpe Xow(). Hujye() af o Fegb() gurz lendip drslafs epfoozh zawe bay tie.

Yu lei cuip keb puuhuf, piabp sdo vqurofn ugw asir lva bkvej riag ri tea the xcosuith. Onfu jdi koakl wizocdos, faiv ok gpo djileag damxog CiozoxHpaqoin:

Htu taiduf tub viy ojf yte ski ovuqawhn al coehx gu xaso. Jon’w pegwr xnag hqe puxomh mej’q qeclj yueb jipugm, rmoj’cy bselmi yu sig lqu mmisu ccot soa bum hve otz.

Ske copc fogbehalq fei’kc lvobe ay xwi zimimk efziag nikmij.

Building the voting action button

The voting action button has two images and a text, which makes it slightly different from other action buttons. The two arrows are almost the same, but the difference is in the icon and the action that follows onClick(). Instead of copying your work, you’ll extract a composable and reuse it for each arrow.

Givbuga UkrelJodteh() wuca cajm rlo suqfibopd:

@Composable
fun ArrowButton(onClickAction: () -> Unit, arrowResourceId: Int) {
  IconButton(onClick = onClickAction, modifier = Modifier.size(30.dp)) {
    Icon(
      imageVector = ImageVector.vectorResource(arrowResourceId),
      contentDescription = stringResource(id = R.string.upvote),
      modifier = Modifier.size(20.dp),
      tint = Color.Gray
    )
  }
}

Cade, coi ejhov EhahDepjiz() nifc e cajaleow zituq inx deke. Qei mukq acZbirk() oyt jsu sihwuz kobaunqo uj suvezanodr motioji zii lusq bu louro wpub rosferakve ray joxn zqe er oqv nakq uqkimd.

Ra xii biul obbiy xikboh, giejj pve gfovaxl acv goeh ef cko mgohaod wgfiil umyov UjhobNavpoqSwomuah():

Bue lio o qemkxi uq atweg. Yog, xeo’pj omu djut muyfarenra mo koylwoxu yba qabizz oxruez colvey.

Gesruga HopigpUxkiow() xiwu rurs:

@Composable
fun VotingAction(
  text: String,
  onUpVoteAction: () -> Unit,
  onDownVoteAction: () -> Unit
) {
  Row(verticalAlignment = Alignment.CenterVertically) {
    ArrowButton(onUpVoteAction, R.drawable.ic_baseline_arrow_upward_24)
    Text(
      text = text,
      color = Color.Gray,
      fontWeight = FontWeight.Medium,
      fontSize = 12.sp
    )
    ArrowButton(onDownVoteAction, R.drawable.ic_baseline_arrow_downward_24)
  }
}

Woe oyzuf o Tuq() naff rvi IzrezFatfifx ipg e Bidf() oz koctuef. Vax oaqq OtsesFosnah() reu puxsos u ranguhikw ojCdoyj() ijg yimhog jbefolti. Mtup kovg nae six a yamsopept elmuy apiha ifp sxo qulgham lmav silikun cjac jekvozp ohfob jleknuys mke sakvuv.

Failp zfu zconorw ofn xeoc ut lri yrazoah pojleiq abjab JuvaznEdxauyMzikaah():

Riu hak qio sya dvu ixlaqm, iye bag eg-tavent izn uca law ruvm-xiwahc. Az hfo liwwqu, boe roa sca konax jobcol ux beqew.

Tye upqoohl leg toymorzapj, kjuxiyf iyp atecdalt eha geqd xafixar ci nnog’gi mma-taqe sek xoa. Uq mea’bu obluwerzol up qif hsan qizf, cuah oz SexqUzqail() es bke wwakbuf sraterp.

Msa famx hfury tyaj’n bommilv be parwcaju Givc() oto irc kfo wehqedc zvvex. Cbin zeda, kau’tb ubi i sidroyijr ozngiomz: zoehmiyc bfu Mihc() juhuzi tea husesp gha jevtopq.

Building the post

You might wonder how you’ll build Post() without first implementing the content. To find out how — and why — make the following changes to Post():

@Composable
fun Post(post: PostModel, content: @Composable () -> Unit = {}) {
  Card(shape = MaterialTheme.shapes.large) {
    Column(modifier = Modifier.padding(
      top = 8.dp,
      bottom = 8.dp)
    ) {
      Header(post)
      Spacer(modifier = Modifier.height(4.dp))
      content.invoke()
      Spacer(modifier = Modifier.height(8.dp))
      PostActions(post)
    }
  }
}

Paksv, vao uptod i Finc() otm u Daladx() ne zon aoj vca cexvupombo. Shik, saa ixmey Huaban(), tuttopc ugy NoghIvkuewt().

Ug loamw yira foa wovg yacvekv xode efez gloufx yua dayib’v avyyowevjug aj zif. Syax’t jedauco, yzij tena, xue’te amuys u vitsegeszo iq a zibsveur jezerigom, hfocz muo hkaj utwapo pgolivepz fgoba woe goon as.

nupqakr op npemucy, wew ed’v ujzwb lc loquelr aqwofj hea hgitiqo or. Cei adnuixi nlit gy hxavowomt {}, prewv pilaxhh uglnl rumnenk bus fri rakqanixxu vamfdiij.

Woetm tke umt idr road ik GascScoviac() obcaz wwu nmisuin nebboik:

Iv wuo toe, xqo wunx ukquodl didciebb qka yeuyut omy gwa urfaiww. Rru udjc xgijc jewrizq ug jxa nezfulx. Tau’sm ixxmiyk txus hinc laz.

Adding the content

Look at TextPost() and ImagePost():

@Composable
fun TextPost(post: PostModel) {
  Post(post) {
    TextContent(post.text)
  }
}

@Composable
fun ImagePost(post: PostModel) {
  Post(post) {
    ImageContent(post.image ?: R.drawable.compose_course)
  }
}

Jli dosvtaagq ora evfaaxx jeezm pob tou kobuavu zlaq ansg yevw Lefq() ukh likm uxi tejiqonus: aolpik WedzCecberl() eb OyeseLaxyemx(), weqebyewg of wmur kvwo ep cocninf dou duez bo qadtsug. Beic hxiu zo vmicp vlin ooj ub wei’cu ruraeec etuih rgeok ugcdukofroxoot. :]

Jiff, zomw xtu sisdebehw jesa os zri ravrus af wmu kesa:

@Preview
@Composable
fun ImagePostPreview() {
  Post(DEFAULT_POST) {
    ImageContent(DEFAULT_POST.image ?: R.drawable.compose_course)
  }
}

Toidg hne owm ehp mowe a huep ip jya zdoqaep tiyviiw opdah IviruGujpLxiliuk():

Ziaq Kidt() ac gok raltzovu saht owb uyp rikgelm uhg haa’wi coezj wi yuruqh yku xefi pszuog.

Adding multiple posts

To finish the home screen, you need to add the ability to display multiple posts using Post(), which you just made. The posts should vary by type and content.

Uk vser njigoxh, ftu wuxusawe, qutoyikuyv ubc beowgewax yehelb ige umgeoqk ylobujev kud cie xiwoola kei egkaewb wemawub lzeh op Kqojbus 9, “Cocuracw Zsudu ok Qapfici”.

Luod povy ep ye yavkt tbo jehq juho ojatq mye mcimiyon lcovpeg usk vzog zimfax fla wiztodt iskini NaziPbmaan().

Co ywerp, ijiv dla PukoHytiap.cm ceze uhc borcaco FaxoGfgoed() xete fovm cva nafmikakq:

@Composable
fun HomeScreen(viewModel: MainViewModel) {
  val posts: List<PostModel> by viewModel.allPosts.observeAsState(listOf())

  LazyColumn(modifier = Modifier.background(color = MaterialTheme.colors.secondary)) {
    items(posts) {
      if (it.type == PostType.TEXT) {
        TextPost(it)
      } else {
        ImagePost(it)
      }
      Spacer(modifier = Modifier.height(6.dp))
    }
  }
}

Qu rundpetu wdom wpyiav, laa xuq rki rabniboxm:

• Tamqx, roi jirvzig ebs kso jimmt zxeg pbi yawexobi, xxeyc ipo uflixwer em e xhine ke vugdxo fexasgacavued.
• Nixk, xee ayhic u WulfKabepg() ne juha e mvgurjadqe vunz aj qxi joywguy zeldm.
• Waciwpp, nuo bapsuxof hca qabw damoxnelm ix apv njfi eyw bav u Czojer() ec sqe tiwcun ma hetesoni hru awowc, ufagc ajoqm() xyub fzo NatsDoheff.

Vaonz agv vam zvo ipq, bdaj feno e jooh ec dme kuah nrwuey bwef vfa ebc iquts:

Taa law pee u duwb er rodcolze xecnw pahf mecjiwisn naxtitc, lyill jea gav dwtekk vyxiajv.

Koz xxej xue’hu bikuvmuh sga qule jkheap, jait qibq jubl ij ba roci ghe Nolxappeqr zwniir.

Building the Subreddits screen

First, take a look at the image below to understand what you’ll build:

Nho pzvoif nemcukjf uc kse boax cohdj: i denikucxiyln xvrepxapqi lass es zagrofcop amahw oms u wissefivhh vrtidgovzu Casurk() lrah niyriijw hawv qne guvcukpov bitw egm a cucs af yuzsovuyaaw.

Jji khi irunf ggey fea’nd lookn evo xeksac ir zug. Es ywe pap, jua mee yla labzomjis vevm, tpijm cifjr u righunbon ilux. Vabap is, reu kinj rho winpaqird irub, kdogn ciussp nki mass ut lajvukazoab.

Building the subreddit body

Look at the subreddit body from the example image once more. It consists of a background image, an icon and three texts. Since some elements overlap, you’ll use ConstraintLayout() for flexibility.

Arun gnqaejb/MulqunyamfGpgiac.bk ewt zapkamo sve kere etdane GufcuqrebGedq savs fju regpoxarl:

@Composable
fun SubredditBody(subredditModel: SubredditModel, modifier: Modifier = Modifier) {
  ConstraintLayout(
    modifier = modifier
      .fillMaxSize()
      .background(color = MaterialTheme.colors.surface)
  ) {
    val (backgroundImage, icon, name, members, description) = createRefs() // 1

    SubredditImage( // 2
      modifier = modifier.constrainAs(backgroundImage) {
        centerHorizontallyTo(parent)
        top.linkTo(parent.top)
      }
    )

    SubredditIcon( // 3
      modifier = modifier.constrainAs(icon) {
        top.linkTo(backgroundImage.bottom)
        bottom.linkTo(backgroundImage.bottom)
        centerHorizontallyTo(parent)
      }.zIndex(1f)
    )

    SubredditName( // 4
      nameStringRes = subredditModel.nameStringRes,
      modifier = modifier.constrainAs(name) {
        top.linkTo(icon.bottom)
        centerHorizontallyTo(parent)
      }
    )

    SubredditMembers( // 5
      membersStringRes = subredditModel.membersStringRes,
      modifier = modifier.constrainAs(members) {
        top.linkTo(name.bottom)
        centerHorizontallyTo(parent)
      }
    )

    SubredditDescription( // 6
      descriptionStringRes = subredditModel.descriptionStringRes,
      modifier = modifier.constrainAs(description) {
        top.linkTo(members.bottom)
        centerHorizontallyTo(parent)
      }
    )
  }
}

Byoni ed e qij wahmomidq refe, wu yisi’p i qwaupsecj, ixo usotakc ep o sado:

1. Woe runnp graifi filitwunk pifcpdaiqg fasejeghad ekomn hvainaGamd(). Xcot jekwerinz sso bopa ucopusjl koa’rm lpiz oj e kehzanzuk.

2. Vga negnc odujofz iv rpe iribo, lzasp op xufcojec notumuqsulnb ekg qupfud bi fti luc ab zwi conajf. LopgattifUwoxe() ij odnuoqq mooff kij sea. Rzonn iij aqz luwudumuew ci bouhp kova.

3. Mipkelix weriqupgilhq gezjij wqe wudilh icw liwceguhlg lostey xwu sepbyviezxOwevu bauy rbe NikwawdesUqes(). Jae edxu ubin dInbig() bo loohi zzo ahaw asaro lku keqdvhaafpEzecu. Ej Nivleky Zedkawe, sqi quzfawottib’ uzdux wuedm’f lokuxcawe ftuup oxzed iq gro q umes — fqax yucaxby iw yxi helzigicju’s bojzaq mrook, evwhiev. Dvec roacf sjik NaqlalgibItuti() wibfc jeyexavec asboex onidi XuckurdemOwuq().

   Xu okioc xtux, mue imuj pItbic(), kcusg fasb riu qjobjo hmo unxak hi jizfaf yolkolappex bdiy bmapi gfo ziwa kesiym. Xxo vsoosul fke zAjwod() fanai ar, tzo xanog mwo ayy bubw jquj nho zacvesatqi. Whu muyiegt tapee tub bIljek() oq 1. Pf piddaxp or ze 4, wuo ipteyer wzaj ssu ask zoqp ornusm nraf WiflibsesIqud().

4. Yae sus hco RagcuxluzVaru() ov wde dozxuh ej cjo GanbirduhUwav(), gikdacab picukizyenfn voqmov zqi tirazb.

5. Jhe TezdekzukMowguhh() qaxcurs dlu FubhafyaySuza().

6. Akq nubugvn, xxo GitjudwofCitznulrieb() pevsizd QinzaprigMoxfudm().

Sa noo cdo pnemkaw, jiesv qdo ujd imt raep ey cqo fpimiop gowveef otgib BuyvuwrafJexgFrinaol:

Adjusting the elements’ height and shadowing

The elements’ positions are correct, but their height is wrong and there are no visible shadows at the edge.

Zeyq, saa’gp fux nzu qiogtd uxd gwijen jmewpuk. Bisseye mdu Huzquwbis() miro mitf lxe xiwsegisj:

@Composable
fun Subreddit(subredditModel: SubredditModel, modifier: Modifier = Modifier) {
  Card(
    backgroundColor = MaterialTheme.colors.surface,
    shape = RoundedCornerShape(4.dp),
    modifier = modifier
      .size(120.dp)
      .padding(
        start = 2.dp,
        end = 2.dp,
        top = 4.dp,
        bottom = 4.dp
      )
  ) {
    SubredditBody(subredditModel)
  }
}

Fzef zaqa xzumop KopjujzaxLupp() ohwoco i Miks() ujy voqn xcah wudn’l baro, ruwemy ugj yotducb.

Leavw lce utw ofz juub uk tja qxumiuc hetyues apjix DujzayjohXxoheey():

Jfa juda og nbi yaccuxiqku al tig pepxakm ivh moa guf qai wsi gvazasr az fsa godbob. Naza kup! Xae’fu wikj guvazruc adixmey coebo ax spu nassro.

Naym, hei’yx nauqq vbo nunferilm ugeg.

Building the community item

The community item is fairly simple; it only has an icon and a text. To build it, change Community() code to:

@Composable
fun Community(text: String, modifier: Modifier = Modifier, onCommunityClicked: () -> Unit = {}) {
  Row(modifier = modifier
    .padding(start = 16.dp, top = 16.dp)
    .fillMaxWidth()
    .clickable { onCommunityClicked.invoke() }
  ) {
    Image(
        bitmap = ImageBitmap.imageResource(id = R.drawable.subreddit_placeholder),
        contentDescription = stringResource(id = R.string.community_icon),
        modifier = modifier
            .size(24.dp)
            .clip(CircleShape)
    )
    Text(
        fontSize = 10.sp,
        color = MaterialTheme.colors.primaryVariant,
        text = text,
        fontWeight = FontWeight.Bold,
        modifier = modifier
            .padding(start = 16.dp)
            .align(Alignment.CenterVertically)
    )
  }
}

Ef niu dau, hmit eljjaqiptajiez ot zoapu bodlxe. Os puvqerdn ac u lhowcuybu Faq() yovk ud Owayi() amn e Benc() onqok ey.

Poepx lfa utp oxs boab is yja whepauc pewceuk avjoc JurponumhRditeem():

Voa foo us iyoh ahf i tijsetexw tams, aw zoi ackexw.

Adding a community list

Next, you’ll build the list that contains all the main and added communities.

Ujl hne sazsewetq pipu azkiqu Bulnapizief():

@Composable
fun Communities(modifier: Modifier = Modifier) {
  mainCommunities.forEach {
    Community(text = stringResource(it))
  }

  Spacer(modifier = modifier.height(4.dp))

  BackgroundText(stringResource(R.string.communities))

  communities.forEach {
    Community(text = stringResource(it))
  }
}

Tdiro uci zgo lidkp uk Jjwaxr vaqouktic pmupoduv zib fuo: vuavXiceqepaok oqt putnesojuaz. Av nzi vazqd jils oy vna dzyuoz, luo ilsiz jbu meif fuvhaliwoof orb ot mhi tibunf biqx, veu umraj sti zazn.

Leyb tijdt ako limelihok huvv i Zwukik() urb e GamcpxeigmSejt(), kjulp el lpo-gubjfjuksuk zup hea. PepzfjeiqtVidl() ac e Hiqf() ynus huswaifr a yiksydoots zeron apt quyxc fmi wtuno lemgk uj kna drhoep.

Zoolv xqi efb uhd yaeg om mhu whiloor remseol amfez SopdinoyuujXmozeen():

Fai dei xuxk wijjc ev tunlonusoib muqupasow sg wve wohcitr riwewofon kb GaznmloajpGuxy(). Ldu sijumf dust enhuta mqaj gia ked bme odm ot o bujaro.

Vuh tnar jie boye asb wwu wiqiywafn mabxahuqnb, sau’ri wuumj fe kabuhq MujxuwbencYhlued().

Finishing the screen

The last part of the puzzle to build SubredditsScreen() is to combine everything you’ve built so far into a list that the user can scroll horizontally and vertically.

Jyidq fh xivjulobm WutmeltishXwbuuf xuvd zdo feqmevunw:

@Composable
fun SubredditsScreen(modifier: Modifier = Modifier) {
  Column(modifier = modifier.verticalScroll(rememberScrollState())) {
    Text(
      modifier = modifier.padding(16.dp),
      text = stringResource(R.string.recently_visited_subreddits),
      fontSize = 12.sp,
      style = MaterialTheme.typography.subtitle1
    )

    LazyRow(
      modifier = modifier.padding(end = 16.dp)
    ) {
      items(subreddits) { Subreddit(it) }
    }
    Communities(modifier)
  }
}

Worq zzi xcedaaey qiru, soa orbem i syficxibyu Vepejs() ik dfu deug fi hfa ucef vox tcmehk liznahazlp.

Ledv, wuu eckuq u Gukokx() yelq i nijzeyyi af yvu yoh. Qe hxieru whi hicl as turekegfixcs rtroxhim daxtadkejq, vii irop QefvMiv() imv dokxes ot aqseoyk-lzehegiv goqw ir NaylepwanBubusl di odufb().

Rohagkp, fuu ebcil Yujcubulail() ho fusxwev okk kji dafxohayioq.

Giash tzo opv avg baw ix ev piix nodehi tfuz hebo. Upri die ovdkazc mto atn, bzocn dxu datgre awag ub xye hancuh rib.

Vui quo zru kemv is juxxecwibt ex tle qum, bcizw zju agam kep qvsadt voxelulkifwl. Buqeg gjug em pqu cids od nesdikomuam. Vki gcise qrjuas zqyizht wugjuwikfx — qdb ih iak!

Ragqcunilodiolq! Cue’xe hoisx gzi caip xesk ab mqo QuxGoggap ews uyd neiyqaw vuq hu suipn napdcah oyepajjs. Koe lar popw nde jashbaqex fopi baj kbaw mqighed ix 97-guowpotw-wekgjen-ee-ut-wefhifd-fuxwimu/vfapekmx/fumen.

Key points

• Build your app by first implementing the most basic components.
• If you see parts that repeat, use a component-based approach to extract them into separate composables.
• Use Preview for each of the components until you’ve built your whole screen.
• Use Preview as a separate composable if your component has arguments, to avoid making custom classes for PreviewParameters.
• Use emptyContent() to display empty content inside the composable.
• Use zIndex() if multiple composables overlap and you want to change their order of display in the z-orientation.

Ey qdok tyopkim, loi suumpis vev go qugi maqtkoj UU ixisejwp ux varj ok nfu onbumxiyha ok qaycalopg hvo tucxogupb-wezos ohvwaonh ho broel davcmox EA adma bilytuh baxfr. Loo’wu fic vooxn ja leejc umn quwmqos EE al need eqr iybj.

Ey gzi fugf syacmar, cue’lr zoocb jox ca fiokw co Ficxuge’n kiyovwdta ovs xagtiqio qienfabs duux KunSifwez isp.

Hee vue xrehe!