> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appdna.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# Android Rich Media & Animations

> Lottie, Rive, video, haptics, and particle effects across all SDK modules

<Info>
  **Supported on:** Android SDK `1.0.33+`
</Info>

The AppDNA Android SDK supports rich media content across onboarding flows, paywalls, in-app messages, and surveys. All rich media is configured in the AppDNA Console -- no code changes are needed to add animations, videos, or effects to your flows.

## Supported Formats

### Lottie Animations

Lottie animations are rendered natively using [Lottie Compose](https://airbnb.io/lottie/), which is bundled with the SDK.

* **Remote URL** -- provide a URL to a `.json` Lottie file
* **Inline JSON** -- embed the animation JSON directly in the config
* **Controls** -- autoplay, loop, speed

Lottie is supported in onboarding content blocks, paywall sections, in-app message hero areas, and survey thank-you screens.

### Rive Animations

[Rive](https://rive.app) animations are rendered natively using the Rive Android runtime, bundled with the SDK.

* **Remote URL** -- provide a URL to a `.riv` file
* **Artboard selection** -- choose which artboard to display
* **State machine** -- drive interactive animations with state machine inputs
* **Trigger on completion** -- fire a state machine trigger when the step or flow completes

Rive is supported in onboarding content blocks and paywall sections.

### Video

Inline video playback with ExoPlayer:

* **Remote URL** -- provide a URL to an MP4 or HLS video
* **Thumbnail** -- optional poster image shown before playback
* **Controls** -- autoplay, loop, muted, show/hide controls
* **Sizing** -- configurable height and corner radius

Video is supported in onboarding content blocks, paywall sections, and in-app message hero areas.

## Visual Effects

### Haptic Feedback

Haptic feedback uses the Android `HapticFeedbackConstants` and `VibrationEffect` APIs. Supported haptic types:

| Type        | Description               |
| ----------- | ------------------------- |
| `light`     | Subtle vibration          |
| `medium`    | Medium vibration          |
| `heavy`     | Strong vibration          |
| `selection` | Selection change feedback |
| `success`   | Success pattern           |
| `warning`   | Warning pattern           |
| `error`     | Error pattern             |

Haptic triggers can be configured for:

* Step advances (onboarding)
* Button taps
* Plan selection (paywalls)
* Option selection (surveys, forms)
* Toggle changes
* Form submission
* Error and success states

### Particle Effects

Particle effects overlay the current screen using Jetpack Compose Canvas. Supported effect types:

| Type        | Description               |
| ----------- | ------------------------- |
| `confetti`  | Colorful falling confetti |
| `sparkle`   | Sparkling particles       |
| `fireworks` | Burst effect              |
| `snow`      | Falling snowflakes        |
| `hearts`    | Floating hearts           |

Each effect has a trigger (`on_appear`, `on_step_complete`, `on_purchase`, `on_flow_complete`), duration, intensity (`light`, `medium`, `heavy`), and optional custom colors.

### Blur / Glassmorphism

Blur backdrops use `RenderEffect.createBlurEffect()` (API 31+) with graceful fallback on older devices:

* **Radius** -- blur intensity
* **Tint** -- overlay color tint
* **Saturation** -- color saturation adjustment

Blur is supported as a backdrop for in-app message modals and fullscreen overlays.

## Icons

The SDK supports structured icon references across all modules. Icons are resolved to platform-appropriate rendering:

| Library      | Description                                                                                   | Example                             |
| ------------ | --------------------------------------------------------------------------------------------- | ----------------------------------- |
| `material`   | Native Material Icons (vector); falls back to emoji only when the name is unmapped            | `"favorite"` -> vector heart icon   |
| `lucide`     | Mapped to the closest Material Icon (vector); emoji fallback when unmapped                    | `"heart"` -> vector heart icon      |
| `sf-symbols` | iOS-canonical name mapped to the closest Material Icon (vector); emoji fallback when unmapped | `"heart.fill"` -> vector heart icon |
| `emoji`      | Unicode emoji characters                                                                      | `"fire"` -> 🔥                      |

Icons are used in onboarding content blocks, paywall feature lists, in-app message CTA buttons, and survey question options.

## Content Blocks

Onboarding steps support rich content blocks that are rendered in order using Jetpack Compose. Each block has a type and optional styling:

| Block Type | Description                                  |
| ---------- | -------------------------------------------- |
| `heading`  | Styled heading (level 1-6)                   |
| `text`     | Body text with styling                       |
| `image`    | Remote image with corner radius and sizing   |
| `button`   | Action button (next, skip, link, permission) |
| `spacer`   | Vertical spacing                             |
| `list`     | Bullet, numbered, or checklist               |
| `divider`  | Horizontal separator                         |
| `badge`    | Colored badge label                          |
| `icon`     | Icon with emoji or icon reference            |
| `toggle`   | Switch with label and description            |
| `video`    | Inline video player                          |
| `lottie`   | Lottie animation                             |
| `rive`     | Rive animation                               |

## Styling

All visual elements support fine-grained styling through the Console:

* **Text styles** -- font family, size, weight, color, alignment, line height, letter spacing, opacity
* **Backgrounds** -- solid color, linear/radial gradient, or remote image with overlay
* **Borders** -- width, color, style, and per-corner radius
* **Shadows** -- offset, blur, spread, and color
* **Spacing** -- per-side padding and margin
* **Animations** -- entry animations (slide, fade, scale), section stagger, CTA pulse/glow/bounce, dismiss animations

<Info>
  The SDK uses platform-native fonts only. Custom web fonts are not supported. Specify system font families in the Console, and the SDK will render them using the device's default typeface.
</Info>

## Dynamic Content Templates

Rich media content supports template interpolation using `{{variable}}` syntax. Available namespaces:

| Namespace         | Example                      | Source                                      |
| ----------------- | ---------------------------- | ------------------------------------------- |
| `user.*`          | `{{user.userId}}`            | Identified user traits                      |
| `session.*`       | `{{session.selected_plan}}`  | App-defined session data                    |
| `onboarding.*`    | `{{onboarding.step1.name}}`  | Onboarding form responses                   |
| `computed.*`      | `{{computed.custom_value}}`  | Data from async hooks                       |
| `device.*`        | `{{device.platform}}`        | Device info (platform, OS, locale, country) |
| `remote_config.*` | `{{remote_config.app_name}}` | Remote config values                        |

Use the pipe syntax for fallback values: `{{user.name | there}}` renders as "there" if the user name is not set.

## No Code Required

All rich media features are configured in the AppDNA Console. The SDK renders them automatically based on the config bundle. You do not need to write any code to use Lottie, Rive, video, haptics, particles, blur, icons, or content blocks.