Jetpack Compose: Kotlinx serialization encode defaults

Introduction

In this article, we’ll explore how to utilize Kotlinx serialization with Jetpack Compose to encode data classes while including default values for certain properties. The Kotlinx serialization library provides an efficient way to serialize data objects to JSON, especially useful when working with Android applications built with Kotlin. We’ll demonstrate an example of encoding an employee data class with optional fields and default values, rendered in a Jetpack Compose user interface. The goal is to serialize an object in a readable JSON format and display it on the screen, using both Jetpack Compose’s UI elements and Kotlinx serialization’s features.

This example breaks down the use of the Kotlinx serialization library in a Compose app by configuring the JSON format, defining a data class with default properties, and encoding it to a JSON string. We’ll then display this JSON representation on the screen. By the end of this guide, you should have a clear understanding of how to implement JSON serialization with defaults in Jetpack Compose, along with insight into each section of the code and the reasons behind its design.

Breaking Down the Code

The example begins in MainActivity.kt, where the MainActivity class inherits from ComponentActivity. This activity serves as the entry point for the application. In the onCreate method, setContent is called to set up the app’s UI structure using Jetpack Compose. Here, we wrap the entire UI with a custom theme, ComposeNetworkTheme, which is a part of the app's styling. Within this theme, a Scaffold component is used to structure the main screen layout, which includes a TopAppBar displaying the title, "Kotlinx Serialization Encode Defaults." This bar provides a clear context for the app’s purpose.

The MainContent composable function is the main area where serialization takes place. This function starts by configuring the JSON serialization format with Kotlinx serialization’s Json object. Three main properties are specified for the JSON configuration: isLenient, prettyPrint, and encodeDefaults. Setting isLenient to true enables parsing of non-standard JSON, while prettyPrint ensures the output is formatted for readability. Importantly, encodeDefaults is set to true to ensure that default values in the data class are encoded in the JSON output, even if they aren’t explicitly set when creating an instance of the class.

Next, we define an instance of the Employee data class, providing only the first and last names. The Employee class is annotated with @Serializable, which is crucial for enabling serialization. This class has four properties: firstName, lastName, dept, and salary. The dept property has a default value of "Accounting," and salary is an optional Int with a nullable type. By setting encodeDefaults to true, we ensure that dept is included in the JSON output, even if we don’t manually specify its value when creating an Employee instance.

The employeeString variable holds the serialized JSON string of the employee object, generated by format.encodeToString(employee). This JSON representation includes all fields in the Employee class, with defaults applied as necessary. Finally, we display the serialized JSON string on the screen using a Column composable, which vertically arranges UI elements within it. A Text composable is used to render the employeeString with MaterialTheme.typography.h5 styling, making the output readable and visually distinct.

Summary

In this example, we successfully demonstrated how to use Kotlinx serialization with Jetpack Compose to encode a data class while including default values for optional properties. By configuring the JSON format to include defaults, we enabled automatic inclusion of preset values, enhancing the flexibility of our data representation. This approach can be particularly beneficial in Android applications where structured data needs to be displayed or transmitted in JSON format.

With this code structure, developers can easily adjust and expand upon the example to serialize other complex data models while maintaining a clean UI in Jetpack Compose. This example serves as a foundational guide for integrating serialization into Android applications, offering a straightforward way to handle JSON data in a readable, user-friendly format.


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 Defaults")
                            }
                        )
                    },
                    content = { MainContent()}
                )
            }
        }
    }
}


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

    val employee = Employee(firstName = "Jenny", lastName = "Jones")
    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 = "Accounting",
    val salary: Int? = null
)
More android jetpack compose tutorials