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.

  1. Connection
  2. Available extensions
    1. Lottie in an animated gif image
    2. Learn more

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}"
}
Copied to clipboard

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)
Copied to clipboard

Available extensions

ID Description
pinch-to-zoom Increases the element.
lottie Connects lottie animations to gif-image.
ID Description
pinch-to-zoom Increases the element.
lottie Connects lottie animations to gif-image.

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" 
      }
    }
  ]
}
Copied to clipboard
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.
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