Widget styling and customization

The best way to style and customize the widget is using StorifyMe Widget Editor, which is a visual tool available inside StorifyMe platform.

SDK specific styling

Loading animation

You can display a loading animation while the story widget fetches and renders content.

info

The loading animation is disabled by default. You must explicitly enable it with setWidgetLoadingAnimationStyle.

Default animation

Enable the built-in skeleton loading animation with an optional custom color:

main.kt

// Default skeleton animation
storiesView.setWidgetLoadingAnimationStyle(WidgetLoadingAnimationStyle.Default())

// Custom tint color
storiesView.setWidgetLoadingAnimationStyle(WidgetLoadingAnimationStyle.Default(color = Color.BLUE))

Custom animation

Pass any View to fully replace the built-in skeleton. The view is centered inside the widget while content loads and removed automatically once loading completes.

main.kt

val loadingView = MyLoadingAnimationView(context)
storiesView.setWidgetLoadingAnimationStyle(WidgetLoadingAnimationStyle.Custom(loadingView))

Below is an example of a dot-wave loading animation — 12 dots arranged in a circle with a staggered pulse effect.

Click to view DotWaveLoadingView example

import android.content.Context
import android.graphics.Canvas
import android.graphics.Color
import android.graphics.Paint
import android.os.SystemClock
import android.util.AttributeSet
import android.view.View
import android.view.ViewGroup
import kotlin.math.PI
import kotlin.math.cos
import kotlin.math.sin

class DotWaveLoadingView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null,
) : View(context, attrs) {

    private val dotCount = 12
    private val animDurationMs = 1200L
    private val delayPerDotMs = 100L

    private val dotPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        style = Paint.Style.FILL
        color = Color.DKGRAY
    }

    fun setColor(color: Int) {
        dotPaint.color = color
        invalidate()
    }

    override fun onDraw(canvas: Canvas) {
        val cx = width / 2f
        val cy = height / 2f
        val circleRadius = minOf(cx, cy) * 0.75f
        val dotRadius = minOf(cx, cy) * 0.11f
        val now = SystemClock.elapsedRealtime()

        for (i in 0 until dotCount) {
            val angleRad = (-90.0 + i * 30.0) * PI / 180.0
            val dotX = cx + (circleRadius * cos(angleRad)).toFloat()
            val dotY = cy + (circleRadius * sin(angleRad)).toFloat()

            val delay = i * delayPerDotMs
            val elapsed = ((now - delay) % animDurationMs + animDurationMs) % animDurationMs
            val t = elapsed.toFloat() / animDurationMs

            val pulse = (1f - cos(2.0 * PI * t).toFloat()) / 2f

            dotPaint.alpha = ((0.3f + pulse * 0.7f) * 255).toInt()
            canvas.drawCircle(dotX, dotY, dotRadius * (1f + pulse * 0.5f), dotPaint)
        }

        if (isAttachedToWindow && visibility == VISIBLE) {
            postInvalidateOnAnimation()
        }
    }

    override fun onAttachedToWindow() {
        super.onAttachedToWindow()
        if (visibility == VISIBLE) postInvalidateOnAnimation()
    }
}

Use it with the widget:

main.kt

val dotWave = DotWaveLoadingView(context).apply {
    setColor(Color.DKGRAY)
}

storiesView.setWidgetLoadingAnimationStyle(WidgetLoadingAnimationStyle.Custom(dotWave))

Disable animation

main.kt

storiesView.setWidgetLoadingAnimationStyle(WidgetLoadingAnimationStyle.Default(), enabled = false)

Custom font

Download the font, it should be in .ttf format, maybe some others will do. Place it in the assets/font folder of your project.

main.kt

StorifyMe.instance.supportedFonts = listOf(
            CustomFont("Aclonica", "aclonica.ttf"),
            CustomFont("Courier", "courier.ttf"),
            CustomFont("Aladin", "aladin.ttf")
        )

Opening story animation

Stories presenting can be customized.

If for some reason you want to disable the animations, just set enabledStoryItemPulseAnimation to false.

Flags can be customized, the default behaviour is listed below.

main.kt

storiesView.setStoryViewerOptions(
                flags = Intent.FLAG_ACTIVITY_EXCLUDE_FROM_RECENTS or Intent.FLAG_ACTIVITY_NO_HISTORY,
                enabledStoryItemPulseAnimation = true
            )

Grid Collection View Behavior

StorifyMeGridCollectionViewBehavior which offers flexible options for customizing the behavior of grid collection views. This includes the capability to adjust the height of the first story using the setGridCollectionViewBehavior(:) method.

main.kt

storifyMeWidget.setGridCollectionViewBehavior(
    StorifyMeGridCollectionViewBehavior.AdjustFirstStoryHeight(
        0.75f
    )
)