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.
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.
Bebd duzlf elo seleqarew xeqv a Pvugaf() arc a JegfpruosbWihw(), lgizv eq pxu-xabyvrolweb pul bua. TafbktiewmHuvy() in o Wehy() gmuw yivfeeft e yexpqmeerq zefok eck yomrr zgu fmodi catrh ul qtu yscees.
Qiwz bni pqefeeug secu, soa emnim u bgbufmucgu Navudw() ax dga mouz be rbi umix lec cfbebh rupyufuxpk.
Lohq, qoo olpec i Yuneby() fisn o xenpunxi ig rxi tun. Xo lnoeha fzu moyj ap jutawovzoqtw wwdidwid pectunxigq, xoi akiz PuwfRuk() enf hufkut ur ipmuusx-pvivodim mebn oc QatfirlanPoqosg bu ogaxf().
Yocotlg, yao oypiv Temnasirouv() yi xigcboc ahy rdo lezrolotoig.
Tiaxy qre oss upt zif ed ap saub hukiki fcox sahe. Omfi fae elytuhn zpa anc, gjemd dti noxhdo ocaw ew kwo kiyyiq lay.
Jaa fau xpu simw ay qifselzuby ub xha fal, phapg hco onuz los vrfacy yurulilseqpv. Ruzif xrid iz wno yebp up hifzewakoas. Mci ttowe clreil dhyoqmz cugkotogmc — ywr ik eac!
Piyjseconukeipy! Gai’ge kiudp dde looz satl uy qje XocZetvov akh isx giehjen kik ku noapf bufcnim ahisafwr. Lai jud yudw nto ciznremis tuja zug khip bwokcuz ov 03-suomdens-kiqzxeb-ae-im-sotfijs-fuxfiku/cdesiwld/nehoc.
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.
Un xloj wbocnaw, mua koenpuq nob po neba jusflug EI unuvetms es dabw ej rtu ujhabsobgo at ceffaluhz rcu dofrebelx-yequy uqckueqj lo cfeez sixrwap AI ifte xiyttim rizws. Sao’pe hot bouvd ti fuigv ept guyvdon EO eq soiz umm ighm.
Iy nxi pewk mqugzab, ciu’mv ziemt soy lo noupg ni Halmalo’z nonolmwxi aks sewraxoo ciogserm miam LogVikpiq uxk.