Instructions for Android

Configuring the library and rendering the first DivView

Configuring the network stack

Starting from this version, DivKit for Android provides a unified network client (DivNetworkClient) for all built-in network requests. This allows you to centrally manage the HTTP stack (OkHttpClient settings, interceptors, cookies) for all DivKit components.

To configure the shared network client, use DivKitConfiguration:

// Configure the shared network client before the first call to DivKit.getInstance()
val hostOkHttpClient = OkHttpClient.Builder()
    .addInterceptor(...) // Configure interceptors, logging, etc.
    .build()

DivKit.configure(
    DivKitConfiguration.Builder()
        .networkClient(OkHttpDivNetworkClient(hostOkHttpClient))
        .build()
)

This client is automatically used for:

• Submitting actions (submit actions)
• Loading SVG images
• Loading default patches
• Lottie, Media3 (video), and Beacon modules (as fallback)

val beaconConfig = SendBeaconConfiguration(
    networkClient = OkHttpDivNetworkClient(hostOkHttpClient),
    cookieStorage = ... // optional
)

Setting up dependencies

Add a DivKit dependency to the project:

    implementation 'com.yandex.div:div:$version'
    implementation 'com.yandex.div:div-core:$version'
    implementation 'com.yandex.div:div-json:$version'
    implementation 'com.yandex.div:div-network-okhttp:$version' // for OkHttpDivNetworkClient

You can find the latest library version on the releases page.

Creating DivConfiguration

Create a DivConfiguration and set it up in the code:

    val imageLoader = PicassoImageLoader(..)
    val configuration = DivConfiguration.Builder(imageLoader).build()

DivConfiguration has only one required parameter: imageLoader: DivImageLoader. You can implement your own loader or use one of our implementations:

• PicassoImageLoader
• GlideImageLoader
• CoilImageLoader

Their dependencies must be added separately:

    implementation 'com.yandex.div:picasso:$version' 
    implementation 'com.yandex.div:glide:$version'
    implementation 'com.yandex.div:coil:$version'

All image loaders support the SVG format. If the main loader doesn't support SVG, the system automatically uses an SVG loader for the corresponding images.

Creating DivData

The layout in DivKit consists of two main blocks: templates and the card itself. They can come either separately or in a single JSON file. Let's consider an example where the layout has the following structure:

{
    "templates": { ... templates ... },
    "card": { ... card ...}
}

The method for handling DivData will look like this:

fun JSONObject.asDiv2DataWithTemplates(): DivData {
    val templates = getJSONObject("templates")
    val card = getJSONObject("card")
    val environment = DivParsingEnvironment(ParsingErrorLogger.LOG)
    environment.parseTemplates(templates)
    return DivData(environment, card)
}

Handling the card and outputting to the screen

Let's output a short piece of text to the screen:

val card = """
{
    "card": {
        "log_id": "text",
        "states": [
            {
                "state_id": 0,
                "div": {
                    "type": "text",
                    "text": "Hello, DivKit!"
                }
            }
        ]
    }
}
""".trimIndent()

Now, let's combine all of the above and add a View to the hierarchy:

    val divData = JSONObject(card).asDiv2DataWithTemplates()
    val div2View = Div2View(Div2Context(context, configuration, lifecyclerOwner))
    yourViewGroup.addView(div2View)
    div2View.setData(divData, DivDataTag("your_unique_tag_here"))

If you've done everything correctly, you'll see "Hello, DivKit!" on the screen.

Handling user actions

To make the interface interactive, add action handling. For example, let's turn a text into an interactive button that will display a tooltip on tap.

JSON modification

DivKit deliberately doesn't have high-level entities, such as "product card" or "button". Any element can be a button. Let's change the "Hello, DivKit!" appearance and add a tap action:

In the example, we changed the element's appearance: we added rounded corners and margins, changed the background and text color, added a tap animation, and changed the text position inside the View. And most importantly, we added a tap action:

    "actions": [
        {
            "log_id": "button_pressed",
            "url": "notification://show-toast?text=Hello%2C%20DivKit%21"
        }
    ]

Support for new actions at the code level on Android

To handle new types of actions, you need to use your own DivActionHandler implementation and add it to DivConfiguration.
Let's start with the DivActionHandler implementation:

class NotificationDivActionHandler(): DivActionHandler() {
    override fun handleAction(action: DivAction, view: DivViewFacade): Boolean {
        if (super.handleAction(action, view)) {
            return true
        }

        val uri = action.url?.evaluate(view.expressionResolver) ?: return false
        if (uri.authority != "show-toast" || uri.scheme != "notification") return false
        val text = uri.getQueryParameter("text") ?: return false
        
        Toast.makeText(view.view.context, text, Toast.LENGTH_LONG).show()
        return true
    }
}

Call the super.handleAction(action, view) method to keep the default actions functional. If the action hasn't yet been handled, we attempt to detect it and show a notification.

Now we need to add NotificationDivActionHandler() to the configuration:

    val configuration = DivConfiguration.Builder(imageLoader)
        .actionHandler(NotificationDivActionHandler())
        .build()

This is the way you can influence not only the state of the card itself, but also the entire app from the JSON layout.

Sample project

A ready-to-run example is available on GitHub: a minimalistic app demonstrating basic DivKit integration with custom fonts, an action handler, and extensions (Rive, Markdown, pinch-to-zoom).

Learn more

You can discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_en.

DivKit Repository