Exploring Android Compose with SDUI: A Practical Guide with Examples

  

Jetpack Compose and Server-Driven UI (SDUI)

User interface (UI) development in Android has evolved dramatically in recent years. With the introduction of Jetpack Compose, building UIs has become more intuitive, declarative, and powerful. Meanwhile, the concept of Server-Driven UI (SDUI) has gained traction, enabling interfaces to be dynamically defined and updated by the backend. In this article, we’ll explore how to combine Android Compose with SDUI, provide practical examples

What is SDUI?

Before diving into the code, let’s clarify what SDUI is. Server-Driven UI means that the server, rather than the client app, dictates the structure, layout, and even behavior of the user interface. This is typically achieved through an API that sends data (often JSON) describing the UI components. The client app then interprets this data and renders the corresponding screen.

Benefits of SDUI

• Flexibility: Update the UI without releasing a new app version.
• Consistency: Share the same UI logic across platforms (Android, iOS, web).
• Agility: Backend teams can tweak the user experience in real-time.

Now, let’s see how Jetpack Compose, with its declarative nature, pairs seamlessly with this approach.

Why Use Jetpack Compose with SDUI?

Jetpack Compose is a modern toolkit for building Android UIs declaratively. Unlike the traditional View system, which relied heavily on XML and imperative code, Compose allows for dynamic interfaces with less boilerplate. This makes it an ideal match for SDUI, as we can map server-provided data directly to visual components in a smooth and efficient way.

Let’s get to the good stuff: practical examples!

Example 1: Rendering a Dynamic Button

{
  "type": "button",
  "text": "Click Here",
  "action": "open_screen",
  "color": "#FF6200EE"
}

On the Android side, we can create a data model and a Compose function to interpret this JSON.

Kotlin Code

import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.graphics.Color
import com.google.gson.Gson

// Data model
data class UiComponent(
    val type: String,
    val text: String?,
    val action: String?,
    val color: String?
)

// Function to parse JSON
fun parseUiComponent(json: String): UiComponent {
    return Gson().fromJson(json, UiComponent::class.java)
}

// Compose component
@Composable
fun RenderComponent(component: UiComponent) {
    when (component.type) {
        "button" -> {
            Button(
                onClick = { /* Action logic */ },
                colors = androidx.compose.material.ButtonDefaults.buttonColors(
                    backgroundColor = component.color?.let { Color(android.graphics.Color.parseColor(it)) } ?: Color.Gray
                )
            ) {
                Text(text = component.text ?: "Button")
            }
        }
    }
}

// Usage
@Composable
fun DynamicScreen(json: String) {
    val component = parseUiComponent(json)
    RenderComponent(component)
}

Explanation

1. Data Model: UiComponent represents the data from the server.
2. Parsing: We use Gson to convert JSON into a Kotlin object.
3. Rendering: The RenderComponent function checks the component type and renders a button with the specified text and color.

Example 2: Dynamic List of Items

Now, let’s tackle a more complex scenario: the server sends a list of components to build a screen with multiple elements.

Example JSON

{
  "components": [
    {
      "type": "text",
      "content": "Welcome to SDUI!",
      "size": 24
    },
    {
      "type": "button",
      "text": "Get Started",
      "action": "start",
      "color": "#FF3700B3"
    }
  ]}

Kotlin Code

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import com.google.gson.Gson

// Data models
data class ScreenData(val components: List<UiComponent>)
data class UiComponent(
    val type: String,
    val content: String?,
    val text: String?,
    val size: Int?,
    val action: String?,
    val color: String?
)

// Parsing
fun parseScreenData(json: String): ScreenData {
    return Gson().fromJson(json, ScreenData::class.java)
}

// Rendering
@Composable
fun RenderComponent(component: UiComponent) {
    when (component.type) {
        "text" -> {
            Text(
                text = component.content ?: "",
                fontSize = component.size?.sp ?: 16.sp,
                modifier = Modifier.padding(8.dp)
            )
        }
        "button" -> {
            Button(
                onClick = { /* Action logic */ },
                colors = androidx.compose.material.ButtonDefaults.buttonColors(
                    backgroundColor = component.color?.let { Color(android.graphics.Color.parseColor(it)) } ?: Color.Gray
                ),
                modifier = Modifier.padding(8.dp)
            ) {
                Text(text = component.text ?: "Button")
            }
        }
    }
}

@Composable
fun DynamicScreen(json: String) {
    val screenData = parseScreenData(json)
    Column {
        screenData.components.forEach { component ->
            RenderComponent(component)
        }
    }
}

Explanation

• Structure: The JSON contains a list of components, mapped to a Column in Compose.
• Flexibility: Each component is rendered based on its type (text or button), and new types can be easily added to the when block.

Challenges and Considerations

While Compose and SDUI make a powerful duo, there are a few things to keep in mind:

1. Performance: Parsing JSON and rendering many components can affect performance on complex screens. Consider optimizing with lazy loading (e.g., LazyColumn).
2. Security: Validate server data to prevent unexpected behavior.
3. Maintenance: Keep clear documentation of the contract between backend and frontend.

Conclusion

Jetpack Compose and SDUI are a match made in heaven for building modern, dynamic Android apps. With Compose, you can translate server data into interfaces elegantly and efficiently, while SDUI provides the flexibility to update the user experience without touching the app’s code. The examples above are just the beginning — try adding more component types, like images or forms, and see how this approach can transform your development workflow.

What do you think? Have you used SDUI in a project before? Drop your thoughts in the comments and let’s keep the conversation going!

---

Exploring Android Compose with SDUI: A Practical Guide with Examples was originally published in ProAndroidDev on Medium, where people are continuing the conversation by highlighting and responding to this story.