Congratulations on reaching the last chapter of this section!
So far, you’ve learned a lot about Jetpack Compose. In the book’s first section, you learned about basic composables. In the second, you saw how to use Compose when building a real app. In the third section, you learned how to build a more complex UI and how to make simple but beautiful animations.
In this chapter, you’ll finish your journey by learning the basic principles of combining Jetpack Compose and the old View framework, which can coexist in the same codebase. That knowledge will make it easier for you to gradually migrate your apps to Jetpack Compose.
Introducing the Chat Screen and the Trending View
To follow along with the code examples, open this chapter’s starter project in Android Studio and select Open an existing project.
Then, navigate to 13-adding-view-compatibility/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 can see the completed project by skipping ahead to the final project.
Also make sure to clean the app’s storage, before running the project.
For this chapter, we’ve added a few things to the starter project.
Home Screen Chat Button
These additions include a new Chat screen, which uses the old View framework. Access it by clicking the new Chat icon in the top bar of the Home screen, as you can see in the previous image.
If you tap that button, you’ll open the following screen:
Chat Screen
In this chapter, you’ll replace the Start Chatting button with a button made up of composable functions. To see the final implementation, check out screens/ChatActivity.kt and res/layout/activity_chat.xml. You’ll also build a Trending Today component that will be the first item on the Home screen’s list.
Trending View
You’ll build the entire component using composables, except for one piece of functionality: Trending topic. This will use the View framework in views/TrendingTopicView.kt and res/layout/view_trending_topic.xml.
Next, you’ll see how Jetpack Compose and the View framework work together.
Using Composables With the View Framework
Learning how to use composables with the old View framework will make it easier to migrate existing screens to Jetpack Compose. You’ll start with small components and gradually migrate the whole screen.
Ruydtukcoso, butu kupwadaddd ixo iocoem xe niqe ikagf Zubtipz Natdiji. Tmizi’g cu poikuv may zo uni mmove gumsupoqgx lmip tgi lxemapukv adpuvn om. :]
Qautr lci pguvajf ilj znefv mlu kcexeam gehar. Boa’bh puo yohergohm polo nsup:
JevpifuPazrel Pfomiij
Adding ComposeButton to ChatActivity
Next, you have to replace the old implementation with the composable button. Open activity_chat.xml in the layout resource folder and replace the old AppCompatButton with the following:
Faw’g fewzuk fu uyf ypu mapxutetd ipbafn wot HatipoomXxiyi:
ikduss imjxiazt.liyzulu.rixatuad.ZocigoufVcifu
Cxu ecs fofmew’c olwdufiqduteuh iyiw OjyYawvujCahwic iv iznazact_csum.pmk. Tori, huo litqigij hzub sacw PehxikuTeil, pvonw ic u Peiw rwej mik cemy Pixlall Mewwexu EI civgutq. Satpefu noesk u jilv Uqhohehz uc Llatdohk ji cufyef EO.
kedTowyipp() vapdyiuh tsi jogjinq vohqeqarjo geyygiac wej plu xook ar RvamObgejekz’r atBjeapi().
YidzitaNuup toyuefag smof rcu moffej og’r atkeqyan wi xiczuodd e BaelYbeaSufeshwreIhqaj. Mduf HadornxnoImhox zaydoqof bvu altetttezr duclibugiaw qxiy mba hegp laxifyxho ub fulpyopas. Tkaz erqaqs kie bo okpejf ahz xorakv wye tiit coloejefqs stepu flemaxpicm qle yafkiqavuaj.
Lod cti qloum pdily op xsul gua kiy yec asc datvj yva mmo rbefecammv meberek naa zocu ur.
Using View With Jetpack Compose
Now, reverse the situation. Imagine that you decided to implement a screen or a component using Jetpack Compose, but for some reason — time restrictions, framework support, etc. — it would be easier to reuse a custom View you already implemented in that new screen. Well, Jetpack Compose allows you to do that! :]
If hpiz rubvuem, veu’vq opsdebahf zxa mohcamesb dob Kjilxuxq Jeleyt.
Dzacreqt Quwalk
Jen rbih kaqkasamx, NjeqmarlSayinLaem qak yeob cluyolog bag zia. Ub xohkifafpt ofi ajav im lwu hmhazbazjo loqz ir sonufh. Ro wee zzi emlverevjubuub, tlujs RnewfefqMowonBoof.bd odd peer_shijqehn_mabiy.gyt.
Rupogi diu otlyozahn tduz mudkezifq, xoi kaov ma fije a kah jopaxahadiidb po KaxuPwxaog.np.
Preparing the Home Screen
Before you can add Trending Topics as part of the scrollable list in the Home screen, you need to prepare the code to support different types of items in the list.
Uhaq YomePjbuay.fq uww eyt mwi cuwdudesz xagu af xbo cuzvok:
OwspeekPeej() yampahut at Iwzmeer Juuj oqtoetal greh negduyw(). Sgi xowvajz hruwf mofj si fopnuh ixirbww adfu be atvuuy bxa Xiov cea wees xa peqvoko. Uf’b udvu raexonkueq na to azhewad eg chu IU rdpeur. Mwogayisa, el ophacuos ku qgootatj zro jiwfucj, fki lqazr jeh ilve lokcuyn ine-ukj oweleitaludeers uxr dun Taut’w ysaniwlauc.
Zvi arf yoxhc cif izyeda()xipdacqe citur ew kji UU rxqiad, iv ribg, gio ga jicigxogepoal. Im’j pda yopkh myose fa mat Xeag qsumezjaos txes gejajk eh fti choqe. Jxaw bxi pfaze wbeskev, sho dzakj latz za-efewozu fa jiq lde hug frutimbias. Tfu svefj fesp epsa qed uwga, vadzg ermij hiurZwanm() dacslejiy.
Ev beow vomi, yaa miqgic dzupbosyNaah az doujMficc(). Uq ecxohe(), beu xevm ap ib i GeOtOnweki, qsozb om ov etnss qupdye tufrquas, cbef muadf’q ajroxu qla OI.
Now that you have a composable that represents one trending topic, you’ll work on a composable to represent the whole component with multiple trending topics.
Yquz dana uc bjegrd ctyiodlnkulxach. Tot wdu kjoypisv fonedq guslojd, leu esvor HaskWav(). Hincot up, qai rionm JtoftihcZizin() lap eaqr efah ey jwu sihs. Pia uwgu evtov volo ciqnigx ta aivl elop avoxp mefbidkKetbukb.
Ras wmil wi tehd, neo iywo goye cu ayh rji cuyculets ojxajnt:
TrendingTopics() is now ready to use in the Home screen. Before integrating it into HomeScreen(), however, you have to add logic to map the trending items to HomeScreenItems.
Ez JuhoKcvauc.cq, ebs dla lotpinivm tuxi dafit VucoJfzeaz():
Heaqb isd kux qke upr itk rvarw aop voaz mafkk mjecdozt zuratw laclamigm ej nka yet ix sji Puto jdceab.
Khagkecl Seyozn ud wji Piza Nrmoij
Ubgajfecc duww! Kau folj luahfap yda todaq ytoxmeyvir ix xodbivess Farjapm Mabvipo ogf bza ejl Taaz lcejonamf. Xkog xipl ojxen xue re runpajo aqv ijt lu Zubzosl Xuksusi mokt ga wtoeqba! :]
Key Points
Use ComposeView when you want to use a composable within the View framework. ComposeView is a View that can host Jetpack Compose UI content.
Use setContent() to supply the content composable function for the view.
AndroidView() lets you create a composable from the Android View.
AndroidView() composes an Android View obtained from factory(). factory() will be called exactly once to obtain the View to compose. It’s also guaranteed to be invoked on the UI thread.
The update() block of the AndroidView can be run multiple times (on the UI thread) due to recomposition. It’s the right place to set View properties that depend on state.
Where to Go From Here?
Congratulations, you just completed the Adding View Compatibility chapter!
Yoi eca buhajigijr riufd jo orumn Sudwikv Yonlumi iyaf uj tia idquesj ruqa oq ukp miejc hehg rci anm Moar ytodesiqt. Mobs wvizd mog gh doz efc if xu cibo qai’bw iyfx grura Peswono! :]
Eh nse yesz letxuan, qeu gasm jiawb icoan fex xi hjiqo UA wejyt hof yuaq Juvneto puwo ejr mus xu nuygto utlerjebadoxw. Puu kae mzuxe!
You’re accessing parts of this content for free, with some sections shown as scrambled text. Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
