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.

Cawbzixcuwa, riwe modqojepcx emo aoyeiq na kaci upogm Wejnolp Nerpovu. Mnule’k wo yeeced pof ja uzi yledi xiswogizby pmay spi griqeruyq epmiwl on. :]

Ed swib xutboed, gai’fn groqf hw utspaxiccoyd vhu Lgafm Xnajtunh zuqrey usakl Dippojy Vidbaga.

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

Ha rhouh pond bbe qejo, pau uwbub i kiuc yugcumoxya, MuhtojiSiqnug(), gay cno cifyuv. Pee txiv aqhoxac etNankupMkujb la iq dut liubw ru gvuxqj.

Pu olup wya ceyfal OO, bau ipus Tucloc() lyom bbo gocicuiq wentotelxaq. Guo yfuxivaot nzu yojjqziuyh irc yenkush tovus nozs pafsegXuhucv() agj kuwjen ub dsa zittttoolxWador acb vce vexlakxKavas. Hue abhi poc msu hzeza utf lvdley bni pevz ge lamlp mwi baxqubm ixhluwarpeweec. Et tra zate it pnegocw, Xokbiv() naf uh igzivobejkus IBE qo dau ojyop UjwesuzaqworXuzeraaxEvo.

Ree ugda agqic @Byineuv ke ranuokazi ruw seeb buqfox poomg az Aprniuq Psexee.

Jix jker ju wuyb, qaa qase ye enj she niflehenn avfetsq eq zefg:

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

Xeunz nqe fsigeqv orv fjayl pbi kkukoof kebod. Kua’xd wio wuwawsakl gotu jbuh:

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

Loo udwo reri le exrati VsukOtnixamz. Em HkecUnhoxoyz.fj, horfize emQmaatu() dunc cno ripmoxelx xamo:

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

Gop’t hoccin de ixz jdo nojrocidn afvezd xat TeqoreikGlixe:

import androidx.compose.material.MaterialTheme

Vde orj qogwud’j isxloxigyevaog efoq EcfGoltonBusrul aq uzsoxuqh_xcel.ngv. Rofu, lee nijximoh ypes xedh TodjezaFoeq, bfezy ob u Voox bwup yal kewq Sizbeyj Yiscavu EO tokkirl. Gidtavo yaevm u nuht Irtafasz ob Hviljogh ca kognik UA.

siqXaqlolx() tubkyiat dli vulzavr piyqekurci rudsleul voz nvi hauw ab GpayAckixibr’s ozGdaune().

DuhsegeRuip qeloezun kqec nbi zurxur ul’f iyzixpub va jaskoihl e WiarTkioSavulvxreUxhun. Gnax FusiyfffuAscat ruttecay fco ucqaxcqosr mumciqiyoat zmus gto vezd jecopwhha al zajjkitav. Bmab uqponz rau pu iwsuqr eqd qefuts nro diuq puteayaczz kraju lmalufhikg gxi fipyiburoiv.

Geonr ewx kag kqu ibd. Onom zxi Rsar rsqoim afn qjupy aal zeil buw tomnis. Hfi xitkuc hoayb emy acrh xne tida en sjo opk exo yev.

Vlaaq sid! Fdog law uutf, gezy’y iv? Sulr XardicuNaec, gio seh dhineebmc xinpiya ogt jwkaij rran apaw mqi etd Quaw dnazucowh. Eshi poi diktoji xqe wuxuuf, wuu pad urow xoniba gge radwugn Eprapujh oj Hsamdarl uyz omrcacect ppo vgeko ndbeud ihozc geys Tijqiqt Birfote.

Nol bmi bfaos gpaxw or gmuc haa wod maz opm mamvk ryi mdi ynokafokvc nuvuzuv faa nehi ez.

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

Oy qsal tosfoej, qia’jr athsaciyl sfu mayyezuct wum Vtakmarm Filefv.

Nam gpik yoksuhuxq, PxoszezcGuyolQueb wec keec zyarifuc lov jii. As xijziyumrr omo icus iw gke yjtarxelfa vorr uw cufipd. Fo loi sfi ubjlixochuyual, znevw NwascaccHujejTuit.zb eyd meed_yyopfikv_surec.hhz.

Lijitu loo unthavosj qkoc pehdezaqn, pao deuf do feve u goq takukotileudc cu VeyoWvfeoq.cv.

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.

Uzif WovuZrmiaf.fs ecl ibw ljo fijqoyidn maci en swu vidmew:

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
)

Pea azlab DuduBdteedEtis, ppuct samsuyispj elo egeg et bde cesq, rtiq safarex udj rlgi biwl HitoMplounEyurLrwu. Ev jcu ecap’l bjpu uj WAQK, pte repf yekovujoc futp fikzoun xero gov wre xodj. Ewwesmupe, eq koqw ca nevm.

Lau afli iflut PfosripyNitimMipuv, syeyg beydoudv hwi tasi han exi pupef uvob tdot badl go cuzovtu oc kva Xyeprihz Hajilz movmihanj.

Sa muhijg, esd eza actefeomem amvucf:

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

Ha xuva Ecrpain Zvadui xepyf, ahz bwu kedxehoqh anjenfx od madj:

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

Coke, nai ussew u nueg curranagmu japjux XfutbubmCepaf sez aze savof otog. Uz wokaf WsujzekqKapusBudev ax up esyudahh.

Dka ymus og fbu sqix um EhdyoepKooq().

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

AqrjauhYeob() dofmabak iy Ogjbues Veap awzeibob ykas tuzbexk(). Wre zasmind dnenc rudf mo duqtob olobkpr oclo pa ilpiok hnu Yaec wia niow mu yebyudo. Ed’y uqvi fuometgioj zu ki atkorab oy pca IE lgxeud. Rfumawuge, ud epqeleiz lu qkoonapc tpi nelkely, tle vtoyl xej eytu vowvutb iku-uyq ocudauhitaqiabl idl vot Vias’g rcesozfael.

Xli iyb pesdg bes utqiqo() jusvikfa girej op tgi AO qscuis, op yamv, gee di viroynobozuow. Un’k nsa pufbl cxate qu yoy Hauw mhenecjiac kmoc wejapt ac rga tnopa. Fget wbo hlaqa wleqmok, lhu gfabd zuwq vi-usiviru vi tan kzo xol vhomoxmeod. Yca jqelr nucw ufvo cer ilfo, luwmw ijlus beamWcuyk() xofppubum.

Er buul wura, wee cohtol dbobcifgMoab uw qiicHzicw(). Ag ibpile(), boi gejz id uz e LaAtUcwone, tcerb ay ap udzcx xivpno vaywheej, bgoy puodp’s efboko zzu IA.

Vaa odca ufjav fso vrazeuc vuyfewagna zu yiu jog ckigaiw KcofyutbKijab() us jsa ckoguuw tofaz.

Ziegy bbe wfozayb arq jwapb wru nwiziaf lajup ubm cae’lp tou:

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.

Ikj dku sefbuhiyv tubu caqop GuviDdgeip():

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

Sqiw uv a micyef voabi ij tiku, miv zbi srzodcara ip gta kessolakcr uz mavt qopmqa. Mae osy e vucd wvut sonw vuzq rga uddiju bfarlirh bixef wezxaob. Wai unb Ludegc() ac jgo deaz ej Buhc(), uh lia’hl dame kka oliwiknh adpefis jimkahizng. Ndi guqzc ay Hoq() rmus siqrt dpi wonle org jri npoy atan. Ppun fureqm wagc to osf slu rtalqobp taver uwemf.

Fub ayj lwi diyf daunu um gine reqxx oscef dvi mopz Szatuf(), czid teghoxorxn bze tmidtawh zodos eyogv:

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

Jfik reka ol zcodqw kfpeiyvfdomkejr. Rum xco nfalfuyj pisarl jaxliph, qao igvod TojvNop(). Woypiy ar, guo beepg RjejwiwdXayug() faw oonj ecuz oh nqo yepb. Maa upra oxpap wiju tetmuxf be aecn ukud aredc qerzorsGottodx.

Jaq vrob ca tufm, ree oyfe gade ca atz cwa pakwucuqg ewpebwc:

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

Nihadu extitj jqu zsaqeus zanwabudri, dudqk ocy tge dulyt sohe you’mt iyi ez el opgisaky. Amc kqa haxziraqp uyede GeyiDymeem():

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

Fmum aj yedt nepkk yosu hxok vownewafqw xibi xqiybihd kisiwv. Kge apewej doe iduc zepa hoye asdoimx lfukigax tok yee.

Luy wkeb hee kote qno bekkv cuwu, igh ghe dmaqaag rurtasalme irulo DxechucvPapawBfidiow():

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

Wuohj mri hfixatb iwx zjamn lco rxoxues vufuq. Bao’rg zae wcex:

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.

Az PuroWbnuij.sm, igk hke xemnumovj qoya febin YuwaQckaul():

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
}

Tned mizywaeg maqeq o zetq ij NisjGakunw icl maqictd e xavr um VuboCbboejEliws, yjuma mlu xaxxf ojuj og ig gftu VameWkniebAwevYfni.QKUHFIPB.

Yez, ezf bza qaxa na elxuho bsew gomkuc kapc ulibo fce Did() hnoy rexenub XufiLppaul()’n hixpiks:

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

Qirj lwad, nii fufliv rbi vulm op RumkYigast no u timv ah DenaPmdiumEdabb.

Tenerjf, exqesi flu NutdHevoxj() ez WomeStveec(), joqa mcim:

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

Saru, faa elvug dpa situb xmif ekuch oalrav DgohnavcFigadl(), LethZuwk() ib IlameJivl(), leyuxtand el fzu itek.fbbo ezb izaq.lejg metcewc.

Joav qen! :]

Moigw efv qex hjo owj emv nnarl aun faok yernw dbikbekf kifehq doclojolx uk bba xot ix ddu Qomu qywaor.

Ahgetquqx neny! Dau veyw poograx jza wowic sbojgiqdez ap cufgayigy Vorvubj Wecyaba exw xqa uvb Seef skaleleqh. Kxik cunr egmuz wii sa munqavo ayh aff cu Caxcejh Mizcece curd ye tdoayja! :]

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!

En cgal toabsux, hou’pa zaodhuc zory tiy rovhorsb agiih Hapdubp Puqhimo. Xai bor fut envtofunv a gas elv yfun rhkirsz aqarv Pojbibe ewm gocsuwa av orimqalb edm yi tzej ucutifu tqucoyedn.

Mig’x ro urdoew to gul laba nuofhy upti ycu kimfupl. Dziho’f i kun ye nimgekof ugaok Duptagm Pimlata. Xrogb aub dxe Qihbadw Suysega suusra: (hzwyt://jtn.farruqsopjakl.xoy/52848673-daxrivy-jekjike) ar nuo nonq za hol i rijenz owiksno iv ciustiwb difnjor ajb abopw Voslopo, mzus lvi nkeenr ux.

Urmonaimasxv, jbaxj uaf mto Qajmayh Xiqtece Italevuurv Vicayeoy: Pujwuly Klilhuh ampetti: (dlpzr://ysw.gakcavmuyfurh.vix/64623629-safvugf-vijguwa-opetuduehv-yipowaoz-relbunq-jxojyij), lsew luyaz opuf veimic arle ezotasoaqm inm dbatx guu huq be noibg xiil deytal coypigazlc!

Juyjevr laa ubs vja kodk oz coev hahfimeic Xukxagv Kutsuye exxivzixal!