Customization

The extension element is a data block that is used to change the behavior and display of elements. You can add an extension to any element.

Additional logic is described in the extension handler DivExtensionHandler.

Available extensions

ID

Description

Source code

pinch-to-zoom

Increases the element.

Android
iOS

lottie

Connects lottie animations to gif-image.

Android
iOS
Web

Connection

build.gradle

dependencies {
    implementation "com.yandex.div:div-pinch-to-zoom:${versions.divkit}"
    implementation "com.airbnb.android:lottie:${versions.lottie}"
    implementation "com.yandex.div:div-lottie:${versions.lottie}"
}

In the code:

val pinchToZoomConfiguration = DivPinchToZoomConfiguration.Builder(this)
    .host(window)
    .dimColor(0xFF808080.toInt())
    .build()
val rawResProvider = object : DivLottieRawResProvider {
    override fun provideRes(url: String): Int? {
        if (url == "res://love") return R.raw.love_anim
        return null
    }
    override fun provideAssetFile(url: String): String? {
        if (url == "asset://banana") return "lottie/lottie_1.json"
        return null
    }
}
val divConfiguration = DivConfiguration.Builder(DefaultDivImageLoader(Container.imageManager))
    .experimentConfig(experimentConfig)
    .actionHandler(actionHandler)
    .divLogger(logger)
    .extension(DivPinchToZoomExtensionHandler(pinchToZoomConfiguration))
    .extension(DivLottieExtensionHandler(rawResProvider))
    .build()
val divContext = DivContext(baseContext = this, configuration = divConfiguration)
divView = DivView(divContext)

Extension handlers must comply with the DivExtensionHandler protocol.

To connect the handler, pass it to DivBlockModelingContext:

DivBlockModelingContext(
  ...
  extensionHandlers: [
    PinchToZoomExtensionHandler(overlayView: rootView),
    SomeExtensionHandler()
  ]
)

Lottie in an animated gif image

To connect the animation to a gif image, fill in the extensions array:

{
  "extensions": [
    {
      "id": "lottie",
      "params": {
        "lottie_url": "https://assets9.lottiefiles.com/packages/lf20_edpg3c3s.json",
        "repeat_count": 3,
        "repeat_mode": "restart"
      }
    }
  ]
}

Parameters

Description

id

Extension ID.

lottie_url

Mandatory URL to lottie json. It can work according to the asset:*{address} or res:*{address} schemes for embedded resources. Resource binding in these schemes occurs via the DivLottieRawResProvider dependency that is passed to DivLottieExtensionHandler.

repeat_count

The number of animation repetitions. Use the -1 value for an infinite number of repetitions.

repeat_mode

The action after the animation ends. It can have the values:

  • restart: Animation restarts.
  • reverse: Animation is displayed frame-by-frame in the reverse order.

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