Instructions for Android

Configuring the library and rendering the first DivView

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'

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

Their dependencies must be added separately:

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

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 news 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.

Learn more

Follow DivKit news in the Telegram channel: http://t.me/divkit_news

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

DivKit Repository