Primeros Pasos con Remote Compose: Un Ejemplo Práctico

En la parte anterior explicamos qué es Remote Compose y por qué existe. Ahora construimos algo real — un documento de UI simple, lo serializamos, y lo renderizamos en una app Android.

Advertencia alpha: androidx.compose.remote está actualmente en 1.0.0-alpha07. La superficie de la API sigue cambiando. El código de este post refleja el estado de alpha07.

Configuración del Proyecto

Dependencias

Agrega los módulos de Remote Compose. Para una app que crea y reproduce documentos localmente (útil para pruebas o widgets), necesitas ambos lados:

1
// build.gradle.kts (módulo app)
2
dependencies {
3
    // Lado de creación — genera el documento
4
    implementation("androidx.compose.remote:remote-creation:1.0.0-alpha07")
5
    implementation("androidx.compose.remote:remote-creation-compose:1.0.0-alpha07")
6

7
    // Lado del player — renderiza el documento
8
    implementation("androidx.compose.remote:remote-player-core:1.0.0-alpha07")
9
    implementation("androidx.compose.remote:remote-player-view:1.0.0-alpha07")
10

11
    // Preview durante desarrollo
12
    debugImplementation("androidx.compose.remote:remote-tooling-preview:1.0.0-alpha07")
13
}

minSdk: Remote Compose requiere minSdk 23 (desde alpha04). Si tu proyecto apunta a un nivel menor, habilita core library desugaring — la librería usa APIs de Java 11 desde alpha06.

1
android {
2
    compileOptions {
3
        isCoreLibraryDesugaringEnabled = true
4
    }
5
}
6
dependencies {
7
    coreLibraryDesugaring("com.android.tools.desugar_jdk_libs:2.1.4")
8
}

El Lado de Creación: Construyendo un Documento

La API de creación espeja los composables de Compose pero opera en un scope de composición diferente — el RemoteApplier. Las funciones aquí no dibujan en un Canvas; construyen un árbol de UI serializable.

Piénsalo como escribir una plantilla que se congela y se envía al dispositivo.

1
import androidx.compose.remote.creation.RemoteCompose
2
import androidx.compose.remote.creation.compose.RemoteColumn
3
import androidx.compose.remote.creation.compose.RemoteText
4
import androidx.compose.remote.creation.compose.RemoteButton
5
import androidx.compose.remote.creation.compose.RemoteSpacer
6
import androidx.compose.remote.creation.compose.remoteModifier
7
import androidx.compose.remote.creation.compose.fillMaxWidth
8
import androidx.compose.remote.creation.compose.padding
9

10
fun buildWelcomeDocument(): ByteArray {
11
    return RemoteCompose.capture {
12
        RemoteColumn(
13
            modifier = remoteModifier()
14
                .fillMaxWidth()
15
                .padding(24f)
16
        ) {
17
            RemoteText(
18
                text = "¡Hola desde el servidor!",
19
                style = RemoteTextStyle.titleLarge()
20
            )
21

22
            RemoteSpacer(height = 12f)
23

24
            RemoteText(
25
                text = "Esta UI fue definida fuera de la app y renderizada localmente por el runtime del player.",
26
                style = RemoteTextStyle.bodyMedium()
27
            )
28

29
            RemoteSpacer(height = 24f)
30

31
            RemoteButton(
32
                onClick = RemoteAction.log("boton_presionado"),
33
                modifier = remoteModifier().fillMaxWidth()
34
            ) {
35
                RemoteText(text = "Presióname")
36
            }
37
        }
38
    }
39
}

RemoteCompose.capture { ... } ejecuta el bloque de creación y devuelve un ByteArray — el documento serializado. Puedes escribirlo en disco, enviarlo por HTTP, o pasarlo por IPC.

Restricción clave: No puedes llamar funciones @Composable regulares dentro de un bloque RemoteCompose.capture { }. El RemoteApplier lo aplica en tiempo de compilación.

Simulando una Respuesta del Servidor

En una app real en producción, el documento vendría de un servicio backend. Para este ejemplo, lo simulamos localmente con una coroutine:

1
// En un ViewModel o repositorio
2
class DocumentRepository {
3
    suspend fun fetchWelcomeDocument(): ByteArray {
4
        // Simular latencia de red
5
        delay(300)
6
        // En producción: val response = httpClient.get("/ui/welcome")
7
        //                return response.body()
8
        return buildWelcomeDocument()
9
    }
10
}

El documento es solo bytes. Puedes cachearlo, guardarlo en una base de datos, o versionarlo como quieras en tu backend.

El Lado del Player: Renderizando en un Fragment

remote-player-view provee RemoteComposePlayerView — una View (no un Composable) que acepta un documento y lo renderiza. Puedes embebarlo en cualquier layout XML o en una UI Compose mediante AndroidView.

Opción A: Usarlo en un Layout XML

1
<FrameLayout
2
    xmlns:android="http://schemas.android.com/apk/res/android"
3
    android:layout_width="match_parent"
4
    android:layout_height="match_parent">
5

6
    <androidx.compose.remote.player.view.RemoteComposePlayerView
7
        android:id="@+id/remote_player"
8
        android:layout_width="match_parent"
9
        android:layout_height="wrap_content" />
10

11
    <ProgressBar
12
        android:id="@+id/loading"
13
        android:layout_width="wrap_content"
14
        android:layout_height="wrap_content"
15
        android:layout_gravity="center"
16
        android:visibility="gone" />
17

18
</FrameLayout>

1
class RemoteFragment : Fragment(R.layout.fragment_remote) {
2

3
    private val viewModel: RemoteViewModel by viewModels()
4

5
    override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
6
        super.onViewCreated(view, savedInstanceState)
7

8
        val player = view.findViewById<RemoteComposePlayerView>(R.id.remote_player)
9
        val loading = view.findViewById<ProgressBar>(R.id.loading)
10

11
        viewLifecycleOwner.lifecycleScope.launch {
12
            viewLifecycleOwner.repeatOnLifecycle(Lifecycle.State.STARTED) {
13
                viewModel.documentState.collect { state ->
14
                    when (state) {
15
                        is DocumentState.Loading -> {
16
                            loading.isVisible = true
17
                            player.isVisible = false
18
                        }
19
                        is DocumentState.Success -> {
20
                            loading.isVisible = false
21
                            player.isVisible = true
22
                            player.setDocument(state.bytes)
23
                        }
24
                        is DocumentState.Error -> {
25
                            loading.isVisible = false
26
                            // Mostrar UI de error
27
                        }
28
                    }
29
                }
30
            }
31
        }
32
    }
33
}

Opción B: Embeber en Compose con AndroidView

Si tu app es completamente Compose:

1
@Composable
2
fun RemoteScreen(documentBytes: ByteArray?) {
3
    if (documentBytes == null) {
4
        Box(
5
            modifier = Modifier.fillMaxSize(),
6
            contentAlignment = Alignment.Center
7
        ) {
8
            CircularProgressIndicator()
9
        }
10
        return
11
    }
12

13
    AndroidView(
14
        factory = { context ->
15
            RemoteComposePlayerView(context).apply {
16
                layoutParams = ViewGroup.LayoutParams(
17
                    ViewGroup.LayoutParams.MATCH_PARENT,
18
                    ViewGroup.LayoutParams.WRAP_CONTENT
19
                )
20
            }
21
        },
22
        update = { playerView ->
23
            playerView.setDocument(documentBytes)
24
        },
25
        modifier = Modifier.fillMaxWidth()
26
    )
27
}

Manejando Acciones Remotas

Los botones y elementos interactivos en el documento pueden emitir RemoteActions — eventos nombrados que la app anfitriona maneja. El documento declara qué emitir; el player los expone:

1
// Al construir el documento:
2
RemoteButton(
3
    onClick = RemoteAction.named("navegar_a_detalle", mapOf("id" to "42"))
4
) { ... }
5

6
// En la app anfitriona, establece un listener de acciones en el player view:
7
player.setActionListener { action ->
8
    when (action.name) {
9
        "navegar_a_detalle" -> {
10
            val id = action.params["id"]
11
            findNavController().navigate(
12
                RemoteFragmentDirections.toDetalle(id)
13
            )
14
        }
15
        "boton_presionado" -> {
16
            analytics.track("remote_boton_presionado")
17
        }
18
    }
19
}

Esto mantiene la lógica de negocio en la app donde pertenece, mientras el documento controla el layout y el contenido.

El ViewModel

1
sealed interface DocumentState {
2
    data object Loading : DocumentState
3
    data class Success(val bytes: ByteArray) : DocumentState
4
    data class Error(val message: String) : DocumentState
5
}
6

7
class RemoteViewModel(
8
    private val repository: DocumentRepository
9
) : ViewModel() {
10

11
    private val _documentState = MutableStateFlow<DocumentState>(DocumentState.Loading)
12
    val documentState: StateFlow<DocumentState> = _documentState.asStateFlow()
13

14
    init {
15
        loadDocument()
16
    }
17

18
    private fun loadDocument() {
19
        viewModelScope.launch {
20
            _documentState.value = DocumentState.Loading
21
            runCatching { repository.fetchWelcomeDocument() }
22
                .onSuccess { _documentState.value = DocumentState.Success(it) }
23
                .onFailure { _documentState.value = DocumentState.Error(it.message ?: "Error desconocido") }
24
        }
25
    }
26

27
    fun reintentar() = loadDocument()
28
}

Qué Habilita Esto

Con esta configuración, la UI que se renderiza en RemoteComposePlayerView puede actualizarse cambiando lo que devuelve el servidor — sin ninguna actualización de la app. El usuario ve un layout diferente, texto diferente, botón diferente, en su próximo inicio.

Casos de uso prácticos:

Tests A/B de variantes de UI sin desplegar nuevos builds
Feature flags que muestran u ocultan secciones de UI
Widgets y tiles (así funcionará Glance una vez migrado)
Flujos de onboarding dinámicos que el equipo de producto puede iterar de forma independiente

Lo que Todavía No Puede Hacer

Al estar en alpha07, hay limitaciones reales:

Sin composables arbitrarios — solo puedes usar lo que expone remote-creation. Sin composables personalizados de tu codebase.
Sin scope de ViewModel — el documento es sin estado. Cualquier lógica con estado vive en la app anfitriona y se comunica vía RemoteAction.
Sin navegación — el player renderiza un único documento; la navegación entre pantallas es responsabilidad de la app anfitriona.
La API cambia frecuentemente — cada release alpha ha cambiado algo. No construyas infraestructura de producción sobre esto hasta llegar a beta.

Qué Vigilar

La trayectoria es clara. A medida que la superficie de la API se estabilice y avance la migración de Glance, Remote Compose se convertirá en la forma estándar de construir widgets, componentes de pantalla de bloqueo, tiles de Wear OS, y UIs cross-process.

Presta atención a:

remote-creation-jvm — el módulo JVM del lado servidor que habilitará generación real de documentos desde el backend
El roadmap de migración de Glance a remote-player
La transición alpha → beta, que señalará la estabilidad de la API