Si tienes una app con una IU basada en objetos View, es posible que no quieras volver a escribir toda su IU de una sola vez. Esta página te ayudará a agregar elementos de Compose nuevos a tu IU existente.
Jetpack Compose se diseñó con la interoperabilidad de View desde el principio. Esta funcionalidad significa que puedes migrar tu app basada en objetos View a Compose sin dejar de compilar funciones nuevas. Para migrar a Compose, recomendamos una migración incremental en la que Compose y View coexistan en la base de código hasta que la app esté completamente en Compose.

Para migrar tu app a Compose, sigue estos pasos:
- Compila funciones nuevas con Compose.
- A medida que compiles funciones, identifica elementos reutilizables y comienza a crear una biblioteca de componentes comunes de la IU.
- Reemplaza las funciones existentes de a una pantalla por vez.
Cómo compilar funciones nuevas con Compose
Usar Compose para compilar funciones nuevas es la mejor manera de impulsar tu adopción de Compose. Con esta estrategia, puedes agregar funciones y aprovechar los beneficios de Compose sin dejar de satisfacer las necesidades comerciales de tu empresa.
Nuevas pantallas

Cuando usas Compose para compilar funciones nuevas en tu app existente, sigues trabajando bajo las restricciones de la arquitectura de la app. Si usas Fragments y el componente de Navigation, y la función que estás compilando abarca una pantalla completa, tendrás que crear un nuevo fragmento, pero su contenido estará en Compose.
Para usar Compose en un fragmento, muestra un elemento ComposeView
en el método del ciclo de vida onCreateView()
de tu fragmento. ComposeView
tiene un método setContent()
en el que puedes proporcionar una función de componibilidad.
class NewFeatureFragment : Fragment() { override fun onCreateView( inflater: LayoutInflater, container: ViewGroup?, savedInstanceState: Bundle? ): View { return ComposeView(requireContext()).apply { setViewCompositionStrategy(ViewCompositionStrategy.DisposeOnViewTreeLifecycleDestroyed) setContent { NewFeatureScreen() } } } }
Consulta ComposeView en fragmentos para obtener más información.
Pantallas existentes

Si tu nueva función va a ser parte de una pantalla existente, puedes agregar ComposeView
a la jerarquía de la IU, como lo harías con cualquier otra vista.
Por ejemplo, supongamos que deseas agregar una vista secundaria a un LinearLayout
. Puedes hacerlo en XML de la siguiente manera:
<LinearLayout ...>
<Button ... />
<TextView ... />
<androidx.compose.ui.platform.ComposeView
android:id="@+id/compose_view" ... />
</LinearLayout>
Una vez que la vista haya aumentado, puedes hacer referencia al elemento ComposeView
en la jerarquía y llamar a setContent()
.
Para obtener más información sobre ComposeView
, consulta las APIs de interoperabilidad.
Cómo compilar una biblioteca de componentes comunes de la IU
A medida que compiles funciones con Compose, te darás cuenta rápidamente de que terminarás compilando una biblioteca de componentes. Crear una biblioteca de componentes comunes de la IU te permite tener una sola fuente de información para estos componentes en la app y promover la reutilización. Las funciones que compiles pueden depender de esta biblioteca. Esta técnica es especialmente útil si compilas un sistema de diseño personalizado en Compose.
Según el tamaño de tu app, esta biblioteca puede ser un paquete, un módulo o un módulo de biblioteca independientes. Si deseas obtener más información para organizar módulos en tu app, consulta la Guía sobre la modularización de apps para Android.
Cómo reemplazar funciones existentes con Compose
Además de usar Compose para compilar funciones nuevas, te recomendamos que migres de forma gradual las funciones existentes de tu app a fin de aprovechar Compose.
Si tu app es solo para Compose, puedes acelerar el desarrollo y reducir el tamaño del APK y los tiempos de compilación. Consulta Ergonomía de los desarrolladores en Compose para obtener más información.
Pantallas simples
Los primeros lugares que debes observar cuando migras funciones existentes a Compose son las pantallas simples. Estas pueden ser una pantalla de bienvenida, de confirmación o de configuración en la que los datos que se muestran en la IU son relativamente estáticos.
Toma el siguiente archivo XML:
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:orientation="vertical"
android:layout_width="match_parent"
android:layout_height="match_parent">
<TextView
android:id="@+id/title_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/title"
android:textAppearance="?attr/textAppearanceHeadline2" />
<TextView
android:id="@+id/subtitle_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="@string/subtitle"
android:textAppearance="?attr/textAppearanceHeadline6" />
<TextView
android:id="@+id/body_text"
android:layout_width="wrap_content"
android:layout_height="0dp"
android:layout_weight="1"
android:text="@string/body"
android:textAppearance="?attr/textAppearanceBody1" />
<Button
android:id="@+id/confirm_button"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="@string/confirm"/>
</LinearLayout>
El archivo en formato XML se puede reescribir en Compose con algunas líneas:
@Composable fun SimpleScreen() { Column(Modifier.fillMaxSize()) { Text( text = stringResource(R.string.title), style = MaterialTheme.typography.headlineMedium ) Text( text = stringResource(R.string.subtitle), style = MaterialTheme.typography.headlineSmall ) Text( text = stringResource(R.string.body), style = MaterialTheme.typography.bodyMedium ) Spacer(modifier = Modifier.weight(1f)) Button(onClick = { /* Handle click */ }, Modifier.fillMaxWidth()) { Text(text = stringResource(R.string.confirm)) } } }
Pantallas combinadas de objetos View y Compose
Una pantalla que ya contiene un poco de código de Compose es otra buena opción para migrar por completo a Compose. Según la complejidad de la pantalla, puedes migrarla por completo a Compose o hacerlo parte por parte. Si la pantalla comenzó con Compose en un subárbol de la jerarquía de la IU, continuarás migrando elementos de la IU hasta que toda la pantalla esté en Compose. Este enfoque también se denomina enfoque ascendente.

Cómo quitar fragmentos y el componente Navigation
Una vez que toda la IU de tu app esté en Compose, no será muy beneficioso usar fragmentos en ella. Cuando llegues a ese punto, podrás quitar los fragmentos por completo y, en su lugar, reemplazarlos por elementos que admiten composición de nivel de pantalla controlados por Navigation Compose.
Consulta Cómo navegar con Compose para obtener más información.
Próximos pasos
Si deseas obtener información detallada para agregar Compose a tu app, consulta Cómo agregar Jetpack Compose a tu app. También puedes consultar los siguientes recursos:
- Codelab
- Cómo migrar a Jetpack Compose: En este codelab, aprenderás a migrar partes de la app de ejemplo de Sunflower.
- Ejemplo
- Sunflower: Obtén información detallada sobre el código de la app de ejemplo de Sunflower, una app que contiene el código de View y Compose.
- Entrada de blog
- Interoperabilidad de Jetpack Compose: cómo usar Compose en RecyclerView: Obtén información para usar Compose de manera eficiente en un
RecyclerView
.
- Interoperabilidad de Jetpack Compose: cómo usar Compose en RecyclerView: Obtén información para usar Compose de manera eficiente en un