View/Compose Interoperability: Mixing Old and New UI

#android #kotlin #compose #tutorial

Many apps need to mix traditional Android Views with Jetpack Compose. Understanding interoperability is crucial for gradual migration.

Embedding Compose in Views with ComposeView

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

        val composeView = findViewById<ComposeView>(R.id.compose_container)
        composeView.setContent {
            MyComposeContent()
        }
    }
}

Embedding Views in Compose with AndroidView

@Composable
fun MixedScreen() {
    Column {
        Text("Compose Content", style = MaterialTheme.typography.headlineSmall)

        AndroidView(
            factory = { context ->
                TextView(context).apply {
                    text = "This is a traditional View"
                    textSize = 18f
                }
            },
            modifier = Modifier.padding(16.dp)
        )

        Text("More Compose Content")
    }
}

Fragment with Compose

class ComposeFragment : Fragment() {
    override fun onCreateView(
        inflater: LayoutInflater,
        container: ViewGroup?,
        savedInstanceState: Bundle?
    ): View = ComposeView(requireContext()).apply {
        setContent {
            MyComposeScreen()
        }
    }
}

Passing Data Between Views and Compose

@Composable
fun InteropScreen(viewModel: SharedViewModel) {
    val data by viewModel.data.collectAsState()

    Column {
        AndroidView(
            factory = { context ->
                CustomLegacyView(context).apply {
                    onDataChanged = { newData ->
                        viewModel.updateData(newData)
                    }
                }
            }
        )

        Text("Current data: $data")
    }
}