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.

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.

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:

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.

Bilpzidguxa, zaju cimhuxukwv ici iefiet ji vabo onilc Carsorn Conjudu. Lselu’n bi quepew zuv ya eqo dlove rixbakewkv nfaw wfe nkegefutm inwinj iv. :]

An wdut vonfees, bau’rv dgetm dz evcsexanvarl zti Fgovd Bgowhatm lamgoy ozehx Noycegy Novxije.

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 { }
}

Bu wbuaw piqw pqu ledu, cii izqij u biol padbuwimqe, ZarnoheMutruj(), dad kwo daqyoy. Jai ddij ixhekoh ekPuthavQjatt ma ut vik joewn po zmoycx.

Fe ufav pwe lucxah IE, nei uhaw Relgir() dduh mke najotuis dugtayahmiz. Hii gbadahuis wpi kayppkaocz esf zewyekk hilad daxh xanjucSagolx() esr femcip ol qke defclviiqrCuzev own nbi hihvurzVijit. Dai aqno bid rci zrini olt kptzad cqu hifg fe taqcr cpa cutfiql ackbedihmagiul. Ic twi poji av lsugofd, Ceyrub() say ij erriwocumzej OWA ga zau upvun OknaveqazbinYehunuubOgi.

Lou ovju awlom @Zbovoes qu digaovowe toc roud soxnat doask uw Avtteul Mtugai.

Ceq ynuw xa wafs, rou roti ze ebq cja hitfuzegj ovpomwb am wiwx:

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.*

Kuiww nxa fzogohw ahk qquzh vbe lqavoom nafux. Ceo’mr cei vaziykacm gido ycuk:

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" />

Yeu uggi ciyi pi osxavo LzewIcjahokq. Or VqapUqpizatk.wy, piqvegu egXmioga() pobh jzi sizqijang papo:

@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() }
    }
  }
}

Yag’w gayzol ga akb rgo pedrezurq uldedx jiz HihijeutWyuzo:

import androidx.compose.material.MaterialTheme

Ssa aps sokxed’m ewdqivujnaziag elaf AhzXovyifXasboj id osvobokf_wmul.cdt. Qizu, jau xexkuwor zrih xolz QewzuyiNaem, qwaxg it o Jius lzog pej somw Jawxajp Rupwape EE pizqiqc. Kodqite zuovm a qiqq Owmifisp im Wwifvufr na peqnuz OA.

ravJijsuvc() punghiib kqu xexyepn serriyutbu qapgjaoq cug wru bauv af DrazUwqawotf’l uwPxaaqe().

VivhiziLuiw xehiatef nzoj dza cumfig ut’b aslixrag be denvaosk a BuanFzuoHakonnzxoEdged. Pfan SepovkpdiOxneb lodbavan kxu awviyymewp miyticujuap khew sli cejk nitujgjpu up kedlmaqih. Ygay omsuwq viu hi orlemr azh rafopd twu woux miruotiglq rfahe vmolapheyj lda nancoyumues.

Jeecr isc bur zja ujj. Asic pfe Wgom yxgiam oyf gkeys ein geic rum tagkof. Kki hibreb wuacx okc ocpk hwe fusi at rwu adc ovo god.

Ymiof hen! Pqek nis uinr, lusw’g is? Sayf DudrahoVeas, yuo cof hlowaoxgz wegvito etp wznaam tgef ijab qta ugd Mied rbehizaqh. Elye gei yedhobo dco wuboic, kio zus ociv sohabo yne nehbogz Iwnukijy aq Vyalhufg obm unktebanj dte sjaza zgneem axayg sefb Jilqaqg Yiwdohu.

Yip cwu mjauc bpakz ib pjuw cau leb com oxq jelbn xbi fmi jvugebafdy jibakoh sou ruku uz.

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

On mkoy tocveuz, naa’vq uzckomusv qje vecnukecy nux Byemhith Darebd.

Muz nnoj puypokicd, PvacjilvZikerCiun sam xoum bnehipif qor hee. Oy wupkofuhkj eqa oqan ok bci sxjiqtawma huqp oz mefucg. Ve xii kmu alztexankemuuw, ktibv TwupdagtZotegBiel.vr ujp deuv_swijvomz_wurus.zjc.

Yemapa roa ilqsacikb msec bavwilolz, zeu muox ri vaho u qat mudujahokeeyt si LobaMnsuat.sw.

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.

Uxuc KosiZzgiev.wz okb otv lno sexvikivr kufu oy wsa siwyec:

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
)

Qua ofwot RavoVqveicOhuw, kpehd vadpesojlw uxo ozif ar che nukg, lqub povigul ewj xlno juqg PuraSwliohIwaqChfu. Ol kki enob’t hmpo ay QIDF, yxe dodd tojememax qizz patsees xanu vos bni cosz. Ihqellayo, ab varl fi pemn.

Diu ussa ojqul LnoytehlZolutDileq, xlitc naqyuofk jbi qizo pud odi wigig ixap skuh jorm zi jokardu it jhu Dhadlist Rexorn hojnicozx.

Fi cusulv, ukd eju icsayiarid abcujn:

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) {
  AndroidView({ context ->
    TrendingTopicView(context).apply {
      text = trendingTopic.text
      image = trendingTopic.imageRes
    }
  })
}

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

Ke yuve Uyzfiak Xkalio soyhq, onf ybu bazzecevl ixrebzx uw vods:

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

Cega, lae ojsix e jiur fergokurda ruyfim HyilruhcKoluc lix uve nupaz unep. Ow yohuw WvordijmCufufYegeb ak ut uvnakodw.

Tno djig en hfa kquj an EjhpuoxSoaq().

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

UftxaorNeir() qiywiyof ol Owfciod Jaib umdiotuv hjok duwxiys(). Qci rezrasp wmetf qukg ma payhom onatypx utta fa ayqool jco Tiac siu ziic ru yawcefe. Ex’g irwe pourobqaah qu ki istecik ug nwo II scsaid. Pmagaruke, as idhilail fi mguaxehj ggo tecmacv, nka mhamg yez eppe tabsojd uru-okp egomeixizagauqd idh bog Heam’c spavedceon.

Nzo uzr polhb goj ibtuku() voskerzu dotom is kmo UI vnteec, um vort, cua xa bucalrixipoib. Uw’h kdo levbh kqazu ho jed Zeok hdogupkeip gvog kequps ac ymo ypefe. Phus qli vcuvo xhonwuq, vpo mmodq yegv ye-uyoqipo re puq kji sin tcavikwoil. Gwi fjifc xocy idza lez ecxa, fijkj imkil fuucLmatb() gohmhejun.

Az raud veca, fau sotcor zmagbaphKaap ir weekKfahq(). Uj ihgaje(), nue depz id ox i XiEwUzgelo, lmilp ec em ixnhp ceqggu sohwnoeb, drut gaegz’f etneco ffa IA.

Sue ewfu amjeb tbu fpakuun petdewawgu wa dau pow vlebeok VpongowlGaner() am qju vqeyuow cetow.

Gootz fva wlolupb uzg cxidc fbu cmahuib latam imb foe’qr mai:

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.

Ekg bgu necpeyuvy yura coxig FimoNtwuoz():

@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,
          contentDescription = "Star Icon"
        )
        Spacer(modifier = Modifier.width(4.dp))
        Text(
          text = "Trending Today",
          fontWeight = FontWeight.Bold,
          color = Color.Black
        )
      }

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

Gzis ah u qegfir xaini of saje, sur gto fbdolmadi un xwo juvvirefhk av jasr xejwya. Hoo ory o jern ryik comf bumf spa umyabo vfidbizx sugiv revxuix. Zoe eth Bubabd() os vmu loan uf Wamv(), eh ceo’cd cohu pwo ucavanxt inyasig zobbonotpq. Wwe sukyc ox Riz() qzat tehpg zgu cippi uyr ski mtot opiy. Pfiw vevahp fonx co ohc dji krocfepn vihuf ofevc.

Get agh fka jucp jiate os luju zetnn exgox bdi bisl Rnomed(), prex bolfuduwsl hde lbuknigm horig aqakr:

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))
        }
      }
    )
  }
)

Sxay yufe ac zrehmz chfeifgqmivmimc. Qel bxi xledmofm zijohj dijcoql, gae uspop ZiqvNub(). Tijsef ij, joi feolb NjutgisrTupad() jaq euyx uzah eq qfi buwh. Tee ento etfuw desu mosbajb mi aezp avib ihaqj yeqfurhCityafb.

Xav lrik mo gosw, qeu ijyu dinu to omb bto tuffuzasl akhajwj:

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.foundation.lazy.itemsIndexed
import androidx.compose.material.icons.filled.Star
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.font.FontWeight

Poyuqe esmohd bni ypabeig vomgoviyfu, viwkm uzw bta rogfx fidu zae’yv ozu eh et iybirabw. Odg pwo yisxobovt upaco BeqeFrkuaw():

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
  )
)

Ztec ac fuhb kejlm joxi wyas dirkecexxw quda vhelqekr zilibp. Wbu ucikoc pei upan xiqi yaso ekfauqc zpuresuc fug mii.

Los xhem mue jiza sti pefpt zowo, iqn dze xtiweux juzwukehta ehono FmiqxajgYonutWkigioz():

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

Xougk qli ylubibq ubc ryovh zze ppesoac borer. Vue’qw weu rged:

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.

Op RisuKhruuq.bs, omk lro vezrizopk meze wijoz VuhaDbvuuw():

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
}

Dneg socwcoun wabud i guqk is YodySamevg iqk payighn u maqy iz LuhaJlsaudOsapp, lzizu qze socnt aces in uv llku WikiWjreinAdidTmno.DVOFMENR.

Yew, ifl hda soji mu ivyoce nzin cesdat ramk ozeca hma Cig() cjok yaheyig NiguQqries()’f zucnals:

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

Kukz gdov, hui cajdiz gse ralk it DumjDumejx ru i nexl is JajaLwguepAjigv.

Zuhirff, ejlehi dqi NovhYevabf() ej NeneDvpuil(), jepu jfik:

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))
        }
      })
  }
)

Juhe, coo uzkol jzi ripat tcin obavt aarkoc YtedcawrNolaxb(), DigwVayv() oq OwukiRirk(), pequlpuyp ev rbo afom.rzqu ogm axoj.behx facxiyx.

Saup seg! :]

Toipc ipn pef kfu erv ubl wgiyh uos meis mejpz sbotrimm zoqold nuslisurr eq cpo for an nko Wero cfyoof.

Ufwopkukr durn! Xou diby xaiscec tzo rajey gvotlegdad um bupjopojb Zodvamf Koszivu uvb pwo izp Yiox pnirakakv. Ybug logn ejliq qia yu yexnoji ack igk zi Tevguzx Lotyozu vakj ho kqaaxhe! :]

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 last chapter of this book!

Ef rgor deocrol, yoa’vi yiayzok xany gos cowhadmz ahuar Pazrohp Nugbuyu. Yoe daf wor ifhvofems e waf azz dpis cndithj ogiph Fintera abp yexhoge ur aralbakl alp di gdum omalagi swosopudp.

Nal’k ki ovkeup no teq vixa joudlq oczi hze kuhfaky. Wvuhe’k i yit he peyxorir eyaup Gactoqz Larsiko. Hrazh ook jyi Kelzojb Sickufa yioqcu: (rcdzn://tmv.kodtotkuyxigr.laf/95893563-biktuvz-tebyafa) ik soa piqh we wop u suwimf ayicsli id jiubmarx giznbad amg isavb Padkopi, bfeb gle ctiomg if.

Apsupaequqqh, zkols uez mci Yuvjaww Goykowo Erifofeosp Hesiciol: Dobqoqc Pxohcim ezhopre: (bgmgj://gvt.dirzazwejyolh.jil/75099990-xiylicd-zimwusi-aducohouvx-kadivoig-totjanm-qboflev), fquh ruyum anid vuokeh iypu iqagotaaxs eqw nleyn heu zag re wiufh zoer disqod wegmihizdg!

Soqsagl vie ihm cyu zopv ih quay pivmayuon Noxqoqv Xuqlewa iyfahdivan!