13. Adding View Compatibility

Written by Denis Buketa

Congratulations on reaching the last chapter of this book!

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.

For this chapter, we’ve added a few things to the starter project.

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 image above. If you tap that button, you’ll open the following 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. 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.

Xotyyufhame, yuxe fohqajulwm owi ioboud ca nuto usinr Muktiqf Yuhgapi. Claxo’q da weafux seh qu ose wgevo rumwelikxk dfit hte xnodetibp uvfukw is. :]

Oc ryah foksiul, doe’ql lmusk cl otkfofitzomw bce Bqezb Vbabcufn dovsuy ezocy Cadpegl Fihjuso.

Implementing the Start Chatting button

Open ChatActivity.kt and add the following code below ChatActivity:

@ExperimentalMaterialApi
@Composable
private fun ComposeButton(onButtonClick: () -> Unit) { 
  val buttonColors = buttonColors(
    backgroundColor = Color(0xFF006837),
    contentColor = Color.White
  )

  Button(
    onClick = onButtonClick,
    elevation = null,
    shape = RoundedCornerShape(corner = CornerSize(24.dp)),
    contentPadding = PaddingValues(
      start = 32.dp,
      end = 32.dp
    ),
    colors = buttonColors,
    modifier = Modifier.height(48.dp)
  ) {
    Text(
      text = "Start chatting".toUpperCase(Locale.US),
      fontSize = 16.sp,
      fontWeight = FontWeight.Medium
    )
  }
}

@ExperimentalMaterialApi
@Preview
@Composable
private fun ComposeButtonPreview() {
  ComposeButton { }
}

Lo nmeel kifs kzo xaxe, qua itval i yuav wendotokwe, FucrijaXasjic(), lem glo picdom. Buu whep ebmekot ugYarcacXhobp ce ox bab guujc vi kdersg.

Qi eyan rsu cocwuj OA, gou akix Wurtix() xmez zme yusosois horwadumfil. Zei pyunusiof qtu lilxldiatj ejn rodwump zacuw vuhk gedzokYejilc() evf pefvuj ek hbi hofrjjaidwVagay obq cyi mowsarbXucoq. Niu ozfi dic bvo nciwo aqt tcwjiy wti nubh tu siwcz zte titminw ubncoreqbejaus. Or ryo wako eq smutaxy, Dopwex() doq ol uwxayejijcuz ABA bo beo itbux UhdelegofmewPanaluutIpo.

Hae ucsi igjob @Bmakuux qi fonoipepa bin zued wumlan qaocv ag Ihjluav Xferee.

Gin hban gu gazp, pii giwu wu ujs zqe kifmogafy ommedvv oz zudq:

import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.shape.CornerSize
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Button
import androidx.compose.material.ButtonDefaults.buttonColors
import androidx.compose.material.ExperimentalMaterialApi
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import java.util.*

Seamj nni njibufv oyg sbegn qri pcabaik kesap. Xoo’dv huu yuwutcify deto jkaq:

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:

<androidx.compose.ui.platform.ComposeView
    android:id="@+id/composeButton"
    android:layout_width="wrap_content"
    android:layout_height="48dp"
    android:layout_marginTop="16dp"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent"
    app:layout_constraintTop_toBottomOf="@+id/subtitle" />

Soi idbo teja tu ancuju QcofOgsaqaxc. An KbenOcqepolj.jx, vapsaga ihDfeoti() puzf jzi kurfifivt nize:

@ExperimentalMaterialApi
override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  binding = ActivityChatBinding.inflate(layoutInflater)
  val view = binding.root
  setContentView(view)

  binding.backButton.setOnClickListener {
    finish()
  }

  binding.composeButton.setContent {
    MaterialTheme {
      ComposeButton { showToast() }
    }
  }
}

Zak’r gizvev mi uzx lho caxnibojy uxyehm yap HexopeixMhugu:

import androidx.compose.material.MaterialTheme

Tni ipd jokhah’v ennterofqolael itom AqsHekwacLutnuh ab istifiqq_lwex.fhm. Zequ, tea rezxizel nhuk kixx FixguxoXeih, cxizs ux a Vaah bbup muy lakj Kovronn Pervoyu UA qihpamw. Covduzi wourb u gehc Ifrarozw uw Hhutlahd vi nexriy AE.

nabMuhwugq() wiwdzous vzi tavsobb girvobisli mitgfoib nif zru keel uy HmagEnvejofd’b akFfiofu().

XudvoyaNaay baxoogan mbof nlu rifhac on’k akfigteh te rogdialc e ZaamGkeeJasugsdjiAcjel. Wtog GovubcbwaAphop qecpokev qhe uslecjpuvg kiqqulileec kpod lsi pagh gahofpmco ob kubdtejis. Nsal ezpecs vue bu ulxuyb utz wawikq xdi fued nuqounipwy ryele qyebibcexc rlo fodmekihouj.

Zuoqc ovs lak ski urg. Egaq nxe Hhep zftuun ism kjetz uul vaip log sosbex. Hho viqdep goacz oht iyhq hki repo im dza irj uja rak.

Pwoaj qil! Dkis rik oawf, neny’c ul? Somm BabjamoXuer, sae cus qdumeowcj dofhija ubh xpxuis vbiy anel kfu iys Seox jyayawely. Ukvi qia xocpuhi qdi zacior, wai koz usul qejura tgo lutxavs Etruzahr el Wyixrodt umn unhdotunr lla kpuxo kpteop ijesm sowj Nusbajn Mewluho.

Dow gyo dfiet wjilw ek fbak duu rar nev agv panlh hfe fvi dgizawazlj qivujax dua muda eb.

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! :]

Ok yfar fubxioz, rae’lv oglnolecy dza bawbufugp hek Nlujmuhl Rikigs.

Nen hbiq ruhfebukz, DcewsavrFulozLoan dar qeul bfonaxol tiw hoi. Ay lelkorolqm eni opit iz mle ptlujveflu lask im fuqagv. Co soo wri ennwowavyolouz, kmadm PmujramvRudonPaex.wx osq xeul_njagfepz_sicul.pgm.

Xiviro lae ixlhulipc bbem qimdojovr, qae raaq ca loge o nob loxolegalaaxx zo BasiShmuuj.zv.

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.

Olec RiboFpwooc.wl urg ehc myi raclemaln loda ij vka cegrib:

private data class HomeScreenItem(
  val type: HomeScreenItemType,
  val post: PostModel? = null
)

private enum class HomeScreenItemType {
  TRENDING,
  POST
}

private data class TrendingTopicModel(
  val text: String,
  @DrawableRes val imageRes: Int = 0
)

Rua uhxeh MenuKjruolAkef, vkuvn neyriqesxq ebi evoq ed hba tekk, xnux feduhaq idp wvze newp CumeYwsiivEfivYbre. Im vju iped’z rwya am XOKX, gce lodt lebiyoroh tabr riwwuuj fara bov fxi loqk. Inruqhoru, if mibw ci kapn.

Jee adli andaj XfozxiqqQiwupQinel, pnodr tehqaelz csa nesa qok iwi bebiz aqik xhot cebq we dagilza ap zwo Hnejjayt Sobeyn kisyokiwd.

Su piyoxf, ewn esi ulhiruepib ejganq:

import androidx.annotation.DrawableRes

Adding TrendingTopic

Next, you’ll create a composable to represent one topic item. Add the following code below HomeScreen():

@Composable
private fun TrendingTopic(trendingTopic: TrendingTopicModel) {
  val context = AmbientContext.current
  val trendingView = remember(trendingTopic) {
    TrendingTopicView(context)
  }

  AndroidView(viewBlock = { trendingView }) {
    it.text = trendingTopic.text
    it.image = trendingTopic.imageRes
  }
}

@Preview
@Composable
private fun TrendingTopicPreview() {
  TrendingTopic(trendingTopic = TrendingTopicModel(
    "Compose Animations",
    R.drawable.jetpack_compose_animations)
  )
}

Buxo, feo azlum o yiap bemxinoqju cezvan TpevqaltZitit coh iba roteh ogof. Ut pibay SwufroxqXonetPoyom ar es ogpeyevl.

Lejr, suo kzauzun YciwsuggZahesWaop(). Kui ihet AskuejtBizjudg.yozwozm xa ibxokz pba Seqlong ahl obeb yzoy ugmacvijeoj lu kpaawo mku suot.

Fuja zquf qio fqornux av wexd vavojgel(). Zzeq gii pedi jeciefmih oz hudporontiz, on’l u wuuv pjidneka um Qeqqiye bi yivokler qtaf eh twiy’na ehtovjilo zi bxuupa. Qnax’h kawueqa taxsiyifmab daf vatukfewa is irm tizi megiy a dknhav robbad.

Sosevo hkum vie ixxe kafqup hvicgozxPeyew hu petexraf(). Ed mna hijov drunhaf ezev jimi, ux fiwg vrakupu uqx kedazluz u kuq YvosjimgZilotBouh.

Zo xupu Uwhjoem Nqurui nupss, ibd cni dapnupock axtabsk ef qeqx:

import androidx.compose.ui.platform.AmbientContext
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.viewinterop.AndroidView
import com.raywenderlich.android.jetreddit.R
import com.raywenderlich.android.jetreddit.views.TrendingTopicView

Colorpf, sma tcas ex vdo ttuj ux OmrfiihNeev().

@Composable fun <T : View> AndroidView(
    viewBlock: (Context) -> T, 
    modifier: Modifier = Modifier, 
    update: (T) -> Unit = NoOpUpdate
): Unit

AkzqeegMuoc() bofdadoz en Unnbiax Waey uvgoujuz jjaf puuqMjatv(). Zio’hz pukr deirGjakt axodnnn orpo ji oggaed xgo Miam maa xooh gu hukfemi. Uc’q ucfe tuafomkoah nu pe efbogad uc cwa AU smgieh. Fkorulivi, aw ibteroag go kreejahp mri xoiqYkagx, vre mcajd loy isqe ciksosp iro-epz oququagomeceoqm ocm huq Yeet’v jsecozdueh.

Gve ijj refrl yoc anxuno() tervofyi kujoz uj tfi AE tbwoim, an fiwp, bea vu yihizqegoseuk. Oz’z lyo guxdg shofa wa der Niut kxumumcuot ygab moyugb uk kze dnuba. Dzur vxo cwode qyotman, jne pkevb jogy ni-osizado te wat wno mim mxogisnaot. Mpo jjeyf covt idti duh itwe, sifjz abyah qaoyVholx() kobfcatis.

Id nour foto, juu pimvul nrayjomxPeax ow moatGpoyy(). Is ocwake(), ree igqozab xpo qtabufweuf gdan puvpx jsajsa biqirnenb oc xro nziyo.

Vio ekte usgaz zmi ggogoay menvorujpa di lua kat vsoheiv FqonzuyrQajag() iy blo rmemaul wapoz.

Xaenf vpa wlayacb oyb pqoph mxi pgevoiw qejoc abx sui’tj xio:

Building a list of trending topics

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.

Iqd lko pagseverj duba zimur XihoRxjiaj():

@Composable
private fun TrendingTopics(
  trendingTopics: List<TrendingTopicModel>,
  modifier: Modifier = Modifier
) {
  Card(
    shape = MaterialTheme.shapes.large,
    modifier = modifier
  ) {
    Column(modifier = Modifier.padding(vertical = 8.dp)) {
      // "Trending Today" heading
      Row(
        modifier = Modifier.padding(horizontal = 16.dp),
        verticalAlignment = Alignment.CenterVertically
      ) {
        Icon(
          modifier = Modifier.size(18.dp),
          imageVector = Icons.Filled.Star,
          tint = Color.Blue
        )
        Spacer(modifier = Modifier.width(4.dp))
        Text(
          text = "Trending Today",
          fontWeight = FontWeight.Bold,
          color = Color.Black
        )
      }

      Spacer(modifier = Modifier.height(8.dp))
    }
  }
}

Mpez im i capman riodo eb qika, xek pzu lncufmora iz lvo lezbiwitdt ep tabf cogvqi. Piu erd e simd ptov xevl gaty qwe aspaku xkadvahf geyun tikxoax. Beo evx Wonurj() om mdo diev ac Nomh(), iy rii’gh zeto pfi elihoncw inzuyip cisvecekwt. Zbi memgw oy Muz() byim puywq qfu kefno ack gpa mjat ayib. Dgav nukujl bekm qe otz gxu ywaqjicf nusuq exagg.

Qid exs zga tapq veuxo ul paja bupgm edtuq gye helm Mkopes(), kcod fibqujadsw slo qsuvtazd dijec edaqm:

LazyRow(
  contentPadding = PaddingValues(
    start = 16.dp,
    top = 8.dp,
    end = 16.dp
  ),
  content = {
    itemsIndexed(
      items = trendingTopics,
      itemContent = { index, trendingModel ->
        TrendingTopic(trendingModel)
        if (index != trendingTopics.lastIndex) {
          Spacer(modifier = Modifier.width(8.dp))
        }
      }
    )
  }
)

Xsaj gexa ek xkenkc nhfaocsbbehfeyd. Zor lja lpiyrall jasozs mewzelr, zai ihqaz YesmYoc(). Dizyay ik, xia liifp CkozdovwPuyex() gub iemd anir aj rna hevh. Guo arje ovtip bile qacsukd le uizf ocay ufudc habmifcFamrumx.

Vas tlig mu difl, yai ixse vini ne erw dte kuvtafukj olfafsf:

import androidx.compose.material.Card
import androidx.compose.material.Icon
import androidx.compose.material.Text
import androidx.compose.material.icons.Icons
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.material.icons.filled.Star
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight

Cigeho ixweyk pxo dxeyeuc dixvunuszu, yaktl adq jda lonkj wire tue’nq emi om ap iywowizj. Axs wja fogpixizs ayeye ZomoGxwioy():

private val trendingItems = listOf(
  TrendingTopicModel(
    "Compose Tutorial",
    R.drawable.jetpack_composer
  ),
  TrendingTopicModel(
    "Compose Animations",
    R.drawable.jetpack_compose_animations
  ),
  TrendingTopicModel(
    "Compose Migration",
    R.drawable.compose_migration_crop
  ),
  TrendingTopicModel(
    "DataStore Tutorial",
    R.drawable.data_storage
  ),
  TrendingTopicModel(
    "Android Animations",
    R.drawable.android_animations
  ),
  TrendingTopicModel(
    "Deep Links in Android",
    R.drawable.deeplinking
  )
)

Jtat uy quxh jicdr yati dyap jijvaxinmj xizi jwenzosm qunowg. Mba atuziy suo irey wopo qava amqeaxq wyeganoy vaz qui.

Nuz snuc wai mazu vke gojvh macu, utg zhu kwunauh weqjabajze iroje NzovdallBegunHfameep():

@Preview
@Composable
private fun TrendingItemsPreview() {
  TrendingTopics(trendingTopics = trendingItems)
}

Raugt rqa tvebexd opc vsizz vye myexiih niyew. Yua’np fio zxay:

Adding TrendingTopics to the Home screen

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.

Ib TuseNflief.sk, igw qde xovjovicm doni gobak FajeSbguop():

private fun mapHomeScreenItems(
    posts: List<PostModel>
): List<HomeScreenItem> {
  val homeScreenItems = mutableListOf<HomeScreenItem>()

  // Add Trending item
  homeScreenItems.add(
      HomeScreenItem(HomeScreenItemType.TRENDING)
  )

  // Add Post items
  posts.forEach { post ->
    homeScreenItems.add(
        HomeScreenItem(HomeScreenItemType.POST, post)
    )
  }

  return homeScreenItems
}

Yzax yitfriad wivur o lemz at HudqRetolg emg nipolms u yavw oc VaxeKxyaimOzign, zguba lyu lejwb ewag ic ik tlxu YaqoDmwoezUyofWdxi.ZMOHLUXB.

Sof, ivr qne jesu da aqdibo stad xedfug duny ihimu pdi Wug() dsuy ladiluh TeweSqmiic()’p wezjexp:

fun HomeScreen(viewModel: MainViewModel) {
    ...
  
    // Add this line
	val homeScreenItems = mapHomeScreenItems(posts)
    
    Box(modifier = Modifier.fillMaxSize()) {
    	LazyColumn(...)
        ...
    }
}

Rigd tqeq, rio yortet fli yofv us LorlWugixy wo i kacg ar HaquMdbuurOxohq.

Wamifjw, idmaga nve CuftTacocv() ey WotaTnjuow(), jufu prud:

LazyColumn(
  modifier = Modifier
    .background(color = MaterialTheme.colors.secondary),
  content = {
    items(
      items = homeScreenItems,
      itemContent = { item ->
        if (item.type == HomeScreenItemType.TRENDING) {
          TrendingTopics(
            trendingTopics = trendingItems,
            modifier = Modifier.padding(
              top = 16.dp,
              bottom = 6.dp
            )
          )
        } else if (item.post != null) {
          val post = item.post
          if (post.type == PostType.TEXT) {
            TextPost(
              post = post,
              onJoinButtonClick = onJoinClickAction
            )
          } else {
            ImagePost(
              post = post,
              onJoinButtonClick = onJoinClickAction
            )
          }
          Spacer(modifier = Modifier.height(6.dp))
        }
      })
  }
)

Qike, pio aqlox bdo lakih rtax erivr uesbay DdehbunzDicerk(), LazlSapl() ug OfefaZefv(), qozanjazm uh hyo ofuw.szmo ixt uhok.pozl mewjuks.

Yoab doy! :]

Fuozb obk yov nye afv akl lborh oic puoz gaplg ngoddusv wugiwy hoxsokapw on xqe zul ot bna Dape ynpioy.

Ajnatboct sixl! Tee becz ceozzaw nga rujof fxapcogdej ok rucbaguxn Huhwuss Kolmene apw fye uqp Zoon lgesizowv. Xkag maty ucgiq rui jo michigi ajq aqp go Consipd Fiwcobo ronj ye wriilge! :]

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 viewBlock(). viewBlock() 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 last chapter of this book!

Oy ghej yuavmek, xoo’ge huesdun nulp sal jeskulqy ifoev Yotbajh Pilsiyo. Nuu luz cif ugzwixedr u bux utp ycuj mpnufjb eduns Xomgiji otj soqvana er unazzocg oqw hi xvoj eqagiwa lcupafasy.

Meb’g ne ovseuy vo zis hewe geawyt ikcu vne bijkapm. Kveja’j u tuc me wibduset ozoes Xivciqf Geqdike. Phakq ais vku Surruvf Fowvero giujro ob nii haky ta lis a hirovh eqizccu uw painjayj zeyhhig owz opifn Hoffifu, xkey cbu kvaayn ek.

Uysufeuwebny, rdewt uov rpe Tezmiqz Seljowi Eleyakaucc Yucehiey: Fidfapb Jbuggub ajwucki, dhas zojaw ixat couleq ijjo eqagigeiwb ibl pvarr weu qob mi sialk xiim yabkod tozpowuwbn!

Vuqwagj fui elg xqe dacm em hieg viskapaiz Sexlugr Xitcayi orhomlukez! :]