From Adobe After Effects to Android Splash Screen: A Complete Guide to Animated Vector Drawables Using Bodymovin

How to design animations in After Effects, export them with Bodymovin, and ship them as native Android Animated Vector Drawables — all the way to a beautiful animated splash screen.

If you’ve ever wanted your Android app to launch with a slick, buttery-smooth animated logo, the kind that makes users go “oh, that’s nice” you’re in the right place. In this guide, I’ll walk you through the entire pipeline: designing your animation in Adobe After Effects, exporting it using the Bodymovin extension as an Animated Vector Drawable (AVD), integrating it into Android Studio, theming it properly, and finally wiring it up as an animated splash screen using the SplashScreen API.

No Lottie dependency. No third-party runtime libraries. Just pure, native Android animation running on the RenderThread. Let’s get into it.

Why Animated Vector Drawables Over Lottie?

Before we jump in, you might wonder: why not just use Lottie? Lottie is fantastic and has its place, but AVDs have some compelling advantages for specific use cases:

• Performance: AVDs run on Android’s RenderThread, which means they don’t block your UI thread. Lottie animations run on the main thread.
• No library dependency: AVDs are part of the Android framework. Zero extra APK size.
• Splash Screen API compatibility: Android’s official SplashScreen API (Android 12+) expects an AnimatedVectorDrawable for animated splash icons — not Lottie JSON.
• Smaller file size: For simple logo animations and icon transitions, AVD XML is typically smaller than Lottie JSON.

The trade-off? AVDs support a smaller subset of After Effects features. Complex character animations or particle effects are better suited for Lottie. But for logo animations, icon morphs, loading indicators, and splash screens? AVDs are the way to go.

What You’ll Need

Here’s your toolkit for this guide:

• Adobe After Effects (CC 2017 or later)
• Bodymovin extension (installed via Adobe Exchange or ZXP)
• Android Studio (Arctic Fox or later recommended)
• A vector-based design (created in After Effects or imported from Adobe Illustrator)

Step 1: Install the Bodymovin Extension

Bodymovin is an open-source After Effects extension created by Hernan Torrisi. Originally built to export animations as Lottie JSON for web and mobile, it also supports direct export to Android’s AVD XML format — which is exactly what we need.

Option A: Install from Adobe Exchange (Recommended)

1. Visit the Bodymovin page on Adobe Exchange: https://exchange.adobe.com/apps/cc/12557/bodymovin
2. Click “Free” / “Get” to add the extension to your Creative Cloud account
3. Open the Creative Cloud Desktop App
4. Navigate to Stock & Marketplace → Plugins → Manage Plugins
5. Find Bodymovin and click Install
6. Restart After Effects

Option B: Install via ZXP (Manual)

If the Exchange route gives you trouble:

1. Download the latest Bodymovin .zxp file from the GitHub releases page
2. Install ZXP Installer (a free tool for installing Adobe extensions)
3. Drag the .zxp file onto ZXP Installer
4. Restart After Effects

Verify Installation

After restarting After Effects, go to Window → Extensions → Bodymovin. If you see the Bodymovin panel, you’re good to go.

📺 Video walkthrough: For a visual guide on installing and using Bodymovin, check out this tutorial: https://www.youtube.com/watch?v=mwH4GbOCJhM

Step 2: Design Your Animation in After Effects

For this guide, I’ll use the example of an animated logo — the “MoveMate” delivery truck logo that slides in from the left, with the brand text appearing letter by letter. But the principles apply to any vector animation.

Design Guidelines for AVD-Compatible Animations

Since AVDs support a subset of After Effects features, keep these constraints in mind while designing:

✅ Supported:

• Position, scale, rotation, and opacity keyframes
• Path animations (shape morphing — but paths must have the same number of points)
• Trim paths (great for “drawing” effects)
• Group transforms
• Fill and stroke color
• Basic easing curves

❌ Not Supported / Problematic:

• Effects (blur, glow, drop shadow, etc.)
• Masks and mattes
• Expressions
• Gradients (limited support)
• Raster/bitmap images
• Text layers (convert to shapes first)
• 3D transforms
• Blending modes

Pro Tips for Clean Exports

1. Use Shape Layers: Convert all text and Illustrator layers to shapes. Right-click the layer → Create Shapes from Vector Layer.
2. Keep It Simple: Fewer keyframes = smaller file size. Use easing instead of adding extra keyframes.
3. Name Your Layers: Bodymovin uses layer names to generate group names in the AVD XML. Clean names make debugging much easier.
4. Match Your Canvas: If you’re targeting a splash screen, use a square composition (e.g., 1080×1080). The splash screen icon area is 432dp, and the visible portion is 288dp (the inner two-thirds).
5. Loop-Friendly: If your animation needs to loop (for longer app loads), make sure the first and last keyframes match.

Step 3: Export Using Bodymovin with the AVD Option

This is where the magic happens. Bodymovin can export your After Effects composition directly as an AnimatedVectorDrawable XML file.

Export Steps

1. In After Effects, open the Bodymovin panel: Window → Extensions → Bodymovin
2. You’ll see a list of compositions in your project. Select the composition you want to export by clicking the checkbox next to it.
3. Set a destination folder for the export.
4. Click the Settings (gear icon) for your selected composition.
5. Scroll down in the settings panel until you find the AVD option.
6. Check the AVD box to enable Animated Vector Drawable export.
7. Click Save to close settings.
8. Click Render.

What You Get

After rendering, your destination folder will contain:

• data.json — The standard Lottie/Bodymovin JSON export
• data.xml — This is your AnimatedVectorDrawable! This is the file we care about.

The data.xml file uses the inline resource format, meaning the vector drawable definition, animation targets, and object animators are all bundled into a single XML file wrapped in an <animated-vector> tag. This is the format Android expects.

Quick Sanity Check

Open data.xml in a text editor. You should see something like this structure:

<animated-vector
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:aapt="http://schemas.android.com/aapt">
    <aapt:attr name="android:drawable">
        <vector
            android:height="1080dp"
            android:width="1080dp"
            android:viewportHeight="1080"
            android:viewportWidth="1080">
            <group android:name="_R_G">
                <!-- Your vector paths and groups here -->
            </group>
            <group android:name="time_group"/>
        </vector>
    </aapt:attr>
    <target android:name="_R_G_L_0_G_T_1">
        <aapt:attr name="android:animation">
            <!-- Object animators for translation, scale, etc. -->
        </aapt:attr>
    </target>
    <!-- More targets... -->
</animated-vector>

If you see this structure, the export was successful.

Step 4: Add the AVD to Your Android Studio Project

Now let’s bring this animation into your Android project.

4.1 — Copy the AVD File

1. Rename data.xml to something meaningful, like avd_splash_logo.xml (or movemate.xml in our example).
2. Copy the file into your project’s res/drawable/ directory.

4.2 — Preview in Android Studio

Android Studio has a built-in Animated Vector Drawable preview tool. Once your AVD XML file is in res/drawable/:

1. Open the file in the editor
2. Click the Play button in the preview pane (right side)
3. Watch your animation play right inside the IDE

This is incredibly useful for verifying your export looks correct before running it on a device.

4.3 — Adjust Dimensions if Needed

For splash screens, the AVD icon must follow specific dimension rules:

• Total icon area: 432dp (four times the 108dp adaptive icon area)
• Visible area: The inner two-thirds (288dp) is what actually shows on screen
• Animation duration: Google recommends not exceeding 1,000ms

If your exported AVD has different dimensions (e.g., 1080dp × 1080dp from a 1080×1080 composition), you may want to adjust the android:height and android:width attributes, or let the system scale it.

4.4 — Use the AVD in Your Layout (Optional)

If you want to use the animation outside of a splash screen — say, in a loading screen or an onboarding flow:

<ImageView
    android:id="@+id/animatedLogo"
    android:layout_width="200dp"
    android:layout_height="200dp"
    android:src="@drawable/avd_splash_logo" />

And in your Activity or Fragment:

val imageView = findViewById<ImageView>(R.id.animatedLogo)
val animatedDrawable = imageView.drawable as AnimatedVectorDrawable
animatedDrawable.start()

Step 5: Set Up Your Splash Screen Theme

Android 12 introduced the official SplashScreen API, and the androidx.core:core-splashscreen compat library brings it back to older versions. The splash screen theme is where you wire your AVD to the app launch experience.

5.1 — Add the Dependency

In your build.gradle (app-level):

dependencies {
    implementation "androidx.core:core-splashscreen:1.0.0"
}

5.2 — Create the Splash Theme

Create (or update) your res/values/themes.xml file with a splash screen theme. Here's a complete example based on the MoveMate project:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <!-- Splash screen theme -->
    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/white</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/movemate</item>
        <item name="postSplashScreenTheme">@style/Theme.App.Main</item>
        <item name="windowSplashScreenAnimationDuration">500</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>

    <!-- Your app's main theme (applied after splash) -->
    <style name="Theme.App.Main" parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:statusBarColor">@android:color/transparent</item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:navigationBarColor">@android:color/transparent</item>
    </style>

</resources>

Let’s break down the key attributes:

Attribute Purpose windowSplashScreenBackground The background color behind your animated icon windowSplashScreenAnimatedIcon Points to your AVD drawable postSplashScreenTheme The theme your app switches to after the splash windowSplashScreenAnimationDuration Duration hint (on API 31 only; deprecated in API 33 since the system reads it from the AVD itself)

5.3 — Dark Mode Support

For dark mode, create a res/values-night/themes.xml and swap colors:

<style name="Theme.App.Starting" parent="Theme.SplashScreen">
    <item name="windowSplashScreenBackground">@color/dark_background</item>
    <item name="windowSplashScreenAnimatedIcon">@drawable/movemate</item>
    <item name="postSplashScreenTheme">@style/Theme.App.Main</item>
</style>

Step 6: Wire Up Your Activity

6.1 — Set the Theme in the Manifest

In AndroidManifest.xml, set the splash theme on your launcher activity (or on the entire <application> tag):

<activity
    android:name=".MainActivity"
    android:exported="true"
    android:theme="@style/Theme.App.Starting">
    <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
</activity>

6.2 — Install the Splash Screen in Your Activity

In your MainActivity.kt, call installSplashScreen() before super.onCreate():

import androidx.core.splashscreen.SplashScreen.Companion.installSplashScreen

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        // Must be called BEFORE super.onCreate()
        val splashScreen = installSplashScreen()

        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            MyAppTheme {
                // Your app content
            }
        }
    }
}

6.3 — (Optional) Keep the Splash Screen Longer

If your app needs to load data before showing content, you can hold the splash screen:

var isLoading by mutableStateOf(true)

override fun onCreate(savedInstanceState: Bundle?) {
    val splashScreen = installSplashScreen()

    splashScreen.setKeepOnScreenCondition { isLoading }

    super.onCreate(savedInstanceState)

    // Later, when data is loaded:
    // isLoading = false
}

6.4 — (Optional) Custom Exit Animation

You can also add a custom exit animation for the splash screen:

splashScreen.setOnExitAnimationListener { splashScreenView ->
    val slideUp = ObjectAnimator.ofFloat(
        splashScreenView.view,
        View.TRANSLATION_Y,
        0f,
        -splashScreenView.view.height.toFloat()
    ).apply {
        interpolator = DecelerateInterpolator()
        duration = 300L
        doOnEnd { splashScreenView.remove() }
    }
    slideUp.start()
}

Step 7: Build, Run, and Admire

Build and run your app. Force-close it first (so you get a cold start), then tap the app icon. You should see your After Effects animation playing beautifully as the splash screen, transitioning smoothly into your app.

[embed]Video

Troubleshooting Common Issues

“Bodymovin AVD export hangs on ‘Saving data’” This is a known issue with complex compositions. Simplify your animation reduce the number of layers, remove unsupported effects, and try again.

“The animation doesn’t play on the splash screen” Make sure you’re calling installSplashScreen() before super.onCreate(). Also verify your AVD file is well-formed XML.

“Animation looks different on device vs. After Effects” AVDs don’t support all AE features. Check for unsupported effects, masks, or blending modes. Simplify and re-export.

“Splash screen shows but icon isn’t animated on older devices” On API levels below 31, the windowSplashScreenAnimatedIcon shows as a static image. The animation only plays on Android 12+. The compat library handles the static fallback gracefully.

“AVD file is huge” Complex path data bloats file size. Simplify your vector paths in Illustrator before importing to AE. Use fewer keyframes. Consider whether all path-morph animations are necessary.

The Complete Pipeline at a Glance

┌──────────────────────┐
│  Adobe Illustrator   │  Design your vector artwork
│  (or After Effects)  │  (keep it simple, use shape layers)
└─────────┬────────────┘
          ▼
┌──────────────────────┐
│  Adobe After Effects │  Animate with keyframes
│                      │  (position, scale, rotation, opacity, trim paths)
└─────────┬────────────┘
          ▼
┌──────────────────────┐
│  Bodymovin Extension │  Export with AVD option enabled
│  (Window → Extensions│  Output: data.xml (your AVD file)
│   → Bodymovin)       │
└─────────┬────────────┘
          ▼
┌──────────────────────┐
│  Android Studio      │  Copy AVD to res/drawable/
│                      │  Preview with built-in AVD player
└─────────┬────────────┘
          ▼
┌──────────────────────┐
│  Theme + Manifest    │  Create splash theme, set attributes
│  Configuration       │  Point to your AVD drawable
└─────────┬────────────┘
          ▼
┌──────────────────────┐
│  Activity Setup      │  installSplashScreen() before super.onCreate()
│  (MainActivity.kt)   │  Optional: keep-on-screen, exit animation
└─────────┬────────────┘
          ▼
┌──────────────────────┐
│  🎉 Beautiful        │
│  Animated Splash!    │
└──────────────────────┘

Full Example: The MoveMate Splash Theme

Here’s the complete theme XML from the MoveMate project (the gist that inspired this article), showing how everything ties together:

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <style name="Theme.MovemateStart"
        parent="android:Theme.Material.Light.NoActionBar" />

    <style name="Theme.App.Starting" parent="Theme.SplashScreen">
        <item name="windowSplashScreenBackground">@color/white</item>
        <item name="windowSplashScreenAnimatedIcon">@drawable/movemate</item>
        <item name="postSplashScreenTheme">@style/Theme.MovemateTheme</item>
        <item name="windowSplashScreenAnimationDuration">500</item>
        <item name="android:navigationBarColor">
            @android:color/transparent
        </item>
    </style>

    <style name="Theme.MovemateTheme"
        parent="android:Theme.Material.Light.NoActionBar">
        <item name="android:statusBarColor">
            @android:color/transparent
        </item>
        <item name="android:windowTranslucentStatus">false</item>
        <item name="android:navigationBarColor">
            @android:color/transparent
        </item>
    </style>

</resources>

🔗 Full AVD source: The complete animated vector drawable XML for this example is available at: https://gist.github.com/TuleSimon/9961fec18cdbe23b46ea007bac1a594d

Further Reading and Resources

• Android Docs — Animate Drawable Graphics: https://developer.android.com/develop/ui/views/animations/drawable-animation
• Android Docs — Splash Screens: https://developer.android.com/develop/ui/views/launch/splash-screen
• Bodymovin on Adobe Exchange: https://exchange.adobe.com/apps/cc/12557/bodymovin
• Nick Butcher’s “Bodymovin to Android” article: https://medium.com/google-design/bodymovin-to-android-6e53e5f7a96
• ShapeShifter (alternative AVD creation tool): https://shapeshifter.design
• Bodymovin Video Walkthrough: https://www.youtube.com/watch?v=mwH4GbOCJhM

Wrapping Up

The pipeline from After Effects → Bodymovin → AVD → Android Splash Screen is one of the smoothest workflows for shipping native vector animations on Android. You get the power of a professional motion design tool, the convenience of a one-click export, and the performance of Android’s native rendering engine.

No extra dependencies. No JSON parsing at runtime. Just clean, hardware-accelerated vector animation.

Give it a try on your next project, and if you found this helpful, drop a clap (or fifty) and share it with your team. Happy animating!

Have questions or ran into issues? Drop a comment below or reach out on Twitter. I’d love to see what animations you build with this pipeline.