Shimmer placeholder for images
The shimmer extension shows an animated placeholder with a moving gradient in place of the image while the image is loading. On Android, the extension works with the div-image and gif-image elements; on iOS, only with div-image. The extension isn't supported on Web.
Example
{
"type": "image",
"image_url": "https://example.com/image.png",
"width": {
"type": "fixed",
"value": 200
},
"height": {
"type": "fixed",
"value": 120
},
"extensions": [
{
"id": "shimmer",
"params": {
"colors": [
"#FFE9E9E9",
"#FFFBFBFB",
"#FFE9E9E9"
],
"locations": [
0,
0.5,
1
],
"angle": 0,
"duration": 1.5,
"corner_radius": {
"top-left": 16,
"top-right": 16,
"bottom-left": 16,
"bottom-right": 16
}
}
}
]
}
Parameters
All parameters are optional and support expressions.
|
Parameters |
Description |
|
|
Extension ID. |
|
|
Array of gradient colors. |
|
|
Positions of the colors in the gradient: numbers from |
|
|
Gradient angle in degrees. Default: |
|
|
Duration of one animation pass in seconds. The value must be greater than zero. |
|
|
Corner radii of the placeholder. An object with the optional |
Specify colors and locations together and with the same number of values. The default colors, color positions, and duration differ on Android and iOS. For the placeholder to look the same, specify these parameters explicitly.
Connection
build.gradle
dependencies {
implementation "com.yandex.div:div-shimmer:${versions.divkit}"
}
In the code:
val divConfiguration = DivConfiguration.Builder(imageLoader)
.extension(DivShimmerExtensionHandler())
.build()
DivKitComponents(
...
extensionHandlers: [
ShimmerImagePreviewExtension()
]
)
Learn more
You can discuss topics of interest in the DivKit user community in Telegram: https://t.me/divkit_community_en.