Jetpack Compose is designed to work with the established view-based UI approach. If you're building a new app, the best option might be to implement your entire UI with Compose. But if you're modifying an existing app, you might not want to fully migrate your app all at once. Instead, you can combine Compose with your existing UI design implementation.
There are two main ways you can integrate Compose with a view-based UI:
You can add Compose elements into your existing UI, either by creating an entirely new Compose-based screen, or by adding Compose elements into an existing activity, fragment or view layout.
You can add a view-based UI element into your composable functions. Doing so lets you add Android views into a Compose-based design.
Migrating the entire app to Compose is best achieved step by step with the granularity the project needs. You can migrate one screen at a time, or even one fragment or any other reusable UI element at a time. You can use several different approaches:
The bottom-up approach starts migrating the smaller UI elements on the screen, like a
TextView, followed by its
ViewGroupelements until everything is converted to composable functions.
The top-down approach starts migrating the fragments or view containers, like a
RecyclerView, followed by the smaller UI elements on the screen.
These approaches assume each screen is self-contained, but it's also possible to migrate shared UI, like a design system, to Jetpack Compose. See Integrating Compose with your existing UI for more information.
The following pages provide details on how to integrate Compose with your existing apps:
- Adding Compose to your app: Learn the basics about how to start using Compose in an existing View-based app.
- Interoperability APIs: Learn about Compose's APIs to help you combine Compose with View-based UI.
- Compose in your existing architecture: Learn how to combine View and Compose-based UIs while adopting Compose in your app.
- Compose in your existing UI: Learn how to share view-based UI elements between Compose and non-Compose parts of your app's UI.