Server-Driven UI in Android with Compose

Part 1 By Ali Baha

Have you ever wondered how we can change the UI of our program without a new release? Or navigate the user in the direction we like? Or can we change the actions that are defined upward, when users click on the buttons? If yes, then you need Server Driven UI.

https://unsplash.com/photos/qWwpHwip31M

First of all, What is Server Driven UI?

In normal apps, data is driven by the backend, and the UI is driven by each client (web, iOS, and Android) but what if both data and UI are driven from the backend? That’s the time that miracles happen! You can change the design of your app without updating the client. LOOKS AMAZING, YEAH?

Advantages of Server-Driven UI

The advantages of SD UI come into play when we want to make changes. (Read More: Judo)

• Developers write code to make the desired UI changes.
• The UI changes are reviewed by testers.
• A new version of the app is submitted to the App/Play Store.
• Apple/Google reviews and approves it.
• Users update to the new version.
• A/B testing.

Different ways to implement Server driven UI?

There is some library that we can use to implement in our applications Such as:

• Epoxy from Airbnb
• Litho from Facebook
• Proteus from Flipkart
• Graywater from Tumblr
• Groupie

Or we can implement SD-UI with Compose (and that's what we focus on in this article).

How to get data and UI from the server?

As you see, we need to get both data and UI from the server. but how?
see the below JSON response:

{
  "data": [
    {
      "type": "SCAFFOLD",
      "top_bar": [
        {
          "type": "APP_BAR",
          "children": [
            {
              "type": "TEXT",
              "value": "Server Driven Ui"
            }
          ]
        }
      ],
      "children": [
        {
          "type": "VERTICAL_LIST",
          "children": [
            {
              "type": "ROW",
              "children": [
                {
                  "type": "TEXT",
                  "value": "Hi 1"
                },
                {
                  "type": "IMAGE",
                  "value": "https://8pic.ir/uploads/flowers.png"
                }
              ]
            },
            {
              "type": "ROW",
              "children": [
                {
                  "type": "TEXT",
                  "value": "Hi 2"
                },
                {
                  "type": "IMAGE",
                  "value": "https://8pic.ir/uploads/tree.png"
                }
              ]
            },
            {
              "type": "ROW",
              "children": [
                {
                  "type": "TEXT",
                  "value": "Hi 3"
                },
                {
                  "type": "IMAGE",
                  "value": "https://8pic.ir/uploads/cactus.png"
                }
              ]
            }
          ]
        }
      ]
    }
  ]
}

Not only data but also the UI is coming from the server. we should define our important views such as image, text, card, row, column, and other views and the values we need for them. For example, we need a string for our text view or an image link for our image view. UI kit helps us to have the best experience in using SD-UI.

Android Model

Now, that’s the time we need to create a model in our project for the response we get from the server.
All of our views have type data. Some of our views have more data as you see before, so we should define them.
For example, we need to add value for a text type that contains a string.
Here is the model I have made:

class RemoteModel {
    @SerializedName("data")
    val data: ArrayList<Data> = ArrayList()
}

data class Data(
    @SerializedName("children") val children: ArrayList<Data> = ArrayList(),
    @SerializedName("top_bar") val topBar: ArrayList<Data> = ArrayList(),
    @SerializedName("type") var type: Type = Type.UNKNOWN,
    @SerializedName("value") var value: String = "",
    @SerializedName("size") val size: Int = 0,
)

enum class Type {
    SCAFFOLD,
    TEXT,
    APP_BAR,
    IMAGE,
    VERTICAL_LIST,
    HORIZONTAL_LIST,
    ROW,
    COLUMN,
    UNKNOWN
}

Parse Model to Compose View

There is an easy way to parse the data we get from server to a view. just see the below code:

@Composable
private fun setView(data: ArrayList<Data>) {
    data?.forEach { value ->
        checkUiType(value)
    }
}

@Composable
private fun checkUiType(value: Data) {
    when (value.type) {
        Type.SCAFFOLD -> showScaffold(value = value)
        Type.TEXT -> showText(value = value)
        Type.APP_BAR -> showAppBar(value = value)
        Type.IMAGE -> ImageView(value = value)
        Type.VERTICAL_LIST -> verticalList(value = value)
        Type.HORIZONTAL_LIST -> verticalList(value = value)
        Type.ROW -> rowView(value = value)
        Type.COLUMN -> columnView(value = value)
        Type.UNKNOWN -> Spacer(modifier=Modifier.requiredSize(0.dp))
    }
}

and for example, you can show a text view by below function:

@Composable
private fun showText(value: Data) {
    Text(
        text = "${value.value}",
    )
}

But what if there is a view inside another view? then you should make a loop to reach the last view and here is how you should do it:

@Composable
private fun verticalList(value: Data) {
    LazyColumn(
        modifier = Modifier.fillMaxSize()
    ) {
        item {
            setView(data = value.children)
        }
    }
}

Result

The best part is here, Just enjoy it.

My SD-UI Repository In Github

GitHub - alibahaaa/ServerDrivenUi

Next Part

In the next parts, we’ll see how to use input views such as EditText, how to call a function on click as actions on views, and how to navigate to other screens ASAP.

What do you think?

Do you prefer to use SD-UI to update clients or want to stick publishing new versions in markets?