Jetpack Compose: Kotlinx serialization encode to string

Introduction

This example demonstrates how to use Kotlin's powerful Jetpack Compose UI toolkit alongside the Kotlinx Serialization library to encode data objects into JSON strings. Kotlinx Serialization provides an efficient way to convert complex data structures to JSON format, enabling easy data storage and transfer. This guide will walk through a simple Android app that displays serialized data on the screen using Jetpack Compose, giving developers a clear view of how to integrate data serialization seamlessly with Compose's declarative UI framework.

In the following breakdown, we’ll cover how each part of the code functions, from setting up the activity to configuring serialization and displaying the JSON string within the UI. By the end of this guide, you'll understand how to encode a Kotlin data object to JSON using Kotlinx Serialization and display it in a Jetpack Compose interface.

Main Activity Setup

The app starts in MainActivity, which inherits from ComponentActivity, a foundational class for activities in Jetpack Compose. The onCreate function overrides the default activity setup and sets the content view using setContent {}. Here, we define our theme by wrapping the content in ComposeNetworkTheme, which applies the custom theme styles across the app. Inside the theme, we use a Scaffold, a convenient layout element in Compose that provides default components like the top bar, bottom navigation, or floating action buttons. In this case, the TopAppBar is populated with a simple title: "Kotlinx Serialization Encode To String".

MainActivity serves as the entry point, setting up the UI structure by calling the MainContent composable function, which handles the display of serialized JSON data on the screen.

The MainContent Composable

MainContent is the primary composable function that performs the serialization and displays the JSON data. Inside this function, we initialize a JSON formatter using Kotlinx Serialization's Json class. The prettyPrint option is set to true, which ensures the JSON string is formatted for readability. This setting can be useful when displaying JSON in a UI, as it visually breaks down the structure, making the data easier for users to understand.

The Employee data object is then created with specific attributes, including firstName, lastName, dept, salary, and age. Using Kotlinx Serialization’s encodeToString() function, we encode this Employee instance into a JSON string, which is then stored in the employeeString variable. This step is the core of data serialization in the code, converting the Kotlin object into a JSON format.

Displaying the Serialized Data

To display the JSON string on the screen, MainContent uses a Column composable, which serves as a container for vertically arranged components. The Modifier.fillMaxSize().padding(24.dp) ensures the column fills the available space and adds padding around the content for improved aesthetics. Inside the column, a Text composable renders the employeeString in JSON format, styled using MaterialTheme.typography.h5 for readability. This Text composable is straightforward, displaying the formatted JSON string generated from the Employee data object.

The Employee Data Class

The Employee data class is annotated with @Serializable, a key aspect for enabling Kotlinx Serialization. This annotation makes the class serializable, allowing the encodeToString() function to convert it into a JSON string. The class contains five properties, all of which are simple data types. By annotating this class as @Serializable, we instruct Kotlinx Serialization to automatically generate the code needed to serialize and deserialize Employee instances to and from JSON format.

Summary

This example code demonstrates how to combine Jetpack Compose with Kotlinx Serialization to encode data objects into JSON format and display them within an Android app. The integration of these tools highlights Kotlin’s capabilities in building user-friendly, efficient, and modern Android applications. By using @Serializable data classes and the encodeToString() function, Kotlinx Serialization simplifies the process of converting data into JSON, making it an excellent choice for handling data transfer and storage needs in Android development.

For developers, this approach offers a concise and effective way to manage JSON encoding in Compose applications. The resulting app is minimal but functional, showcasing the basics of serialization and declarative UI, two important skills for modern Android development.

MainActivity.kt


package com.cfsuman.composenetwork

import android.os.Bundle
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.compose.foundation.layout.*
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.cfsuman.composenetwork.ui.theme.ComposeNetworkTheme
import kotlinx.serialization.Serializable
import kotlinx.serialization.encodeToString
import kotlinx.serialization.json.Json


class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            ComposeNetworkTheme {
                Scaffold(
                    topBar = {
                        TopAppBar(
                            title = {
                                Text("Kotlinx Serialization Encode To String")
                            }
                        )
                    },
                    content = { MainContent()}
                )
            }
        }
    }
}


@Composable
fun MainContent() {
    val format = Json{
        prettyPrint = true
    }

    val employee = Employee(
        firstName = "Jenny",
        lastName = "Jones",
        dept = "Accounting",
        salary = 1200,
        age = 28
    )
    val employeeString = format.encodeToString(employee)

    Column(Modifier.fillMaxSize().padding(24.dp)) {
        Text(
            text = employeeString,
            style = MaterialTheme.typography.h5
        )
    }
}


@Serializable
data class Employee(
    val firstName: String,
    val lastName: String,
    val dept: String,
    val salary: Int,
    val age: Int
)