Interoperability with Jetpack Compose

Switching to Composable UI

At the halftime of a game, the teams usually switch sides to keep a fair playing field. Now, you’ll change the playing field as well — and this time, you’ll integrate Android Views into your composables. Within the same Skeeper app, you’ll find ComposeActivity.kt, and it’s written purely in Compose. This UI only has the Home View completed. You’ll complete the visitors section using Android Views.

Set up the Skeeper app to start with ComposeActvity. To do this, open AndroidManifest.xml and uncomment intent-filter of .ComposeActivity. Next, you’ll comment out intent-filter of .MainActivity. The next time you run your application, it will display ComposeActivity.

Your Manifest file will look like this:

...
<!-- Main Activity -->
    <activity
        android:name="com.yourcompany.skeeper.MainActivity"
        android:exported="true"
        android:theme="@style/SplashTheme">
      //1
      <!--
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      -->
    </activity>

    <!-- Compose Activity -->
    <activity
        android:name="com.yourcompany.skeeper.ComposeActivity"
        android:exported="true"
        android:theme="@style/AppTheme.NoActionBar" >
      //2
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>

1. By commenting out intent-filter, the main activity will no longer be launched when the application starts.
2. By uncommenting intent-filter, the Compose activity will be launched when the application starts.

Build and run your application to see that ComposeActivity is launched when the application is started.

Your application will look like this, and you’ll only be able to change the home team’s score.

Starting Screen for the Skeeper Application

Composing Android Views

Two APIs give you the ability to add Android Views into Compose Views:

1. AndroidView
2. AndroidViewBinding

You’ll implement AndroidViewBinding — but before you do that, here’s an overview of AndroidView.

Reviewing AndroidView

In the same way that you would add a Button or Text composable to your user interface, you can add AndroidView composable. This is a special type of composable that has three things: a modifier, factory and update. Here’s an example:

AndroidView(
  modifier = Modifier.fillMaxSize(), 
  //1
  factory = { context ->
    MyView(context).apply {
      // Set listeners here
    }
  },
  //2
  update = { view ->
     //Recomposed when state changes
  }
)

1. The factory block will be executed only once and will run on the UI Thread. Use the factory to perform initializations such as onClickListener.
2. The update block is the set of code that will be recomposed when state changes. Add your UI components there.

If you have an XML layout file containing your Android View, it’s much easier to inflate it within a composable.

Implementing AndroidViewBinding

This API allows you to use view binding and simply inflate an existing XML layout file.

Wouldn’t you know it, the Skeeper app conveniently has visitor_team_xml_view.xml. This layout file uses Android Views and contains the visitors view. Take a glance at it and see that it has a couple of TextViews and Buttons.

Now, open ComposeActivity.kt and add a composable function called VisitorTeamXmlView.

@Composable
fun VisitorTeamXmlView(visitorScore: Int, decreaseScore:  () -> Unit, increaseScore:  () -> Unit){
  //1
  AndroidViewBinding(VisitorTeamXmlViewBinding::inflate){
    //2
    visitorScoreText.text = visitorScore.toString()
    decrementVisitorButton.setOnClickListener { decreaseScore() }
    incrementVisitorButton.setOnClickListener { increaseScore() }
  }
}

1. VisitorTeamXmlView will use AndroidViewBinding API to inflate your layout file.
2. You can set clickListeners and any other attributes you need inside AndroidViewBinding declaration.

The last thing left to do is call VisitorTeamXmlView composable function to display your layout.

In ComposeActivity, find setContent() where HomeTeamComposeView and Divider composables are being called.

Call the VisitorTeamXmlView function:

override fun onCreate(savedInstanceState: Bundle?) {
  super.onCreate(savedInstanceState)
  setContent {
    ...
    VisitorTeamXmlView(visitorScore = visitorScore.value,
                decreaseScore = { visitorScore.value-- },
                increaseScore = { visitorScore.value++ })
  }
}

Build and run the application to see visitor_team_xml_view.xml get inflated and rendered alongside your composables.

Added Visitor View to Skeeper App

Score one more for the good guys!

Where to Go From Here?

Download the completed project files by clicking the Download Materials button at the top or bottom of the tutorial.

In this tutorial, you learned how to:

• Identify a recomposition strategy
• Add composables to Android Views
• Add Android Views to composables

Interoperability with Jetpack Compose gives you a lot of flexibility with your user interface. If you want to learn more about Jetpack Compose, check out Jetpack Compose Tutorial for Android: Getting Started or Jetpack Compose by Tutorials.

We hope you enjoyed this tutorial. If you have any questions or comments, please join the forum discussion below!