Launching Jetpack Compose Dialogs in an XML Activity

If your project isn’t being built entirely from scratch using Compose, you’re probably navigating the challenge of integrating your existing XML layouts with new Composables, which will gradually take their place.

Recently, I set out to migrate all our error dialogs to Compose. Confident in my approach, I jumped into a solution that I believed would work. However, I soon realised the need to step back and revisit the fundamentals to refine my approach. This article explores the basic implementation that helped me develop a more robust solution.

Let’s Start

Below is a very basic example of an Activity using an XML layout. The layout includes a button which we will use to trigger the dialog.

class MainActivity : AppCompatActivity() {
  override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContentView(R.layout.activity_main)

    findViewById<Button>(R.id.button).setOnClickListener {
      // do something
    }
  }
}

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
  xmlns:app="http://schemas.android.com/apk/res-auto"
  xmlns:tools="http://schemas.android.com/tools"
  android:id="@+id/main"
  android:layout_width="match_parent"
  android:layout_height="match_parent"
  tools:context=".MainActivity">

  <Button
    android:id="@+id/button"…