---
metadata:
- name: generator
content: Diplodoc Platform v5.50.3
alternate:
- https://divkit.tech/docs/en/quickstart/android.md
- https://divkit.tech/docs/ru/quickstart/android.md
---
> **Documentation Index:** Fetch the complete configuration index at https://divkit.tech/docs/en/llms.txt
# Instructions for Android
## Configuring the library and rendering the first DivView
### Setting up dependencies
Add a DivKit dependency to the project:
```Gradle translate=no
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](https://github.com/divkit/divkit/releases).
### Creating DivConfiguration
Create a `DivConfiguration` and set it up in the code:
```Kotlin translate=no
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:
```Gradle translate=no
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:
```json translate=no
{
"templates": { ... templates ... },
"card": { ... card ...}
}
```
The method for handling `DivData` will look like this:
```Kotlin translate=no
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:
```Kotlin translate=no
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:
```Kotlin translate=no
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.
{% cut "View an interactive example" %}
{% endcut %}
## Handling user actions
To make the interface interactive, add [action](https://divkit.tech/docs/en/concepts/interaction.md) 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:
{% cut "View an interactive example" %}
{% endcut %}
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:
```json translate=no
"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:
```Kotlin translate=no
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:
```Kotlin translate=no
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](https://github.com/divkit/divkit/tree/main/client/android/sample): a minimalistic app demonstrating basic DivKit integration with custom fonts, an action handler, and extensions (Rive, Markdown, pinch-to-zoom).
## Learn more {#troubleshooting}
You can discuss topics of interest in the DivKit user community in Telegram: [https://t.me/divkit_community_en](https://t.me/divkit_community_en).
[DivKit Repository](https://github.com/divkit/divkit)