
Creating an onboarding for your app can get slightly tricky when combining Lottie with a ViewPager. What if we could get rid of all the nuances and just import an animation, drop some configuration settings and enjoy life? In our previous "Whole Lottie Love" blog post, Chris Basha showed us how to leverage Lottie to deliver pixel-perfect animations for onboarding screens with some basic setup and minimal coding. Let’s take the next steps to simplicity.
In order to maximise code reuse and deliver high quality onboarding animations, here at Novoda we developed Spritz, an Android library that lets you effortlessly attach a ViewPager
to a LottieAnimationView
. Spritz will do the heavy lifting, automatically triggering animations when the user enters a page and transitioning to the next page as they scroll.
So what do you need to create a beautiful animation for your onboarding?
ViewPager
with the appropriate number of pages setThen do some stirring, and that's it. Really, you don't need anything else.
Let us guide you to show you all the steps to prepare the tastiest Spritz ever.
In order to make a successful Spritz that will make your guests jealous, your animation has to have one "step" for each transition between pages in the ViewPager
.
When the transition to a new page has completed, you can optionally start a new "autoplay" step that will be played once the ViewPager
has settled on the page.
For instance, if you have 3 pages the structure of your animation will be something like:
The duration of each "autoplay" and "swipe" segment is not mandated, and can differ from page to page. Keep track of the duration of each segment, and make sure they appear sequentially in the After Effects comp.
It’s good practice to avoid still frames on “swipe” segments, as the user will see no reaction as they’re sliding across the screen. Since this segment will usually be animated based on the user swipes, it’s a good idea to use a linear interpolation in “swipe” sections, as it will follow the user’s gesture matching its speed more closely.
ViewPager
: as soon as the swipe animation completes, the autoplay starts._Once you have created such a comp in After Effects, you can export it to Lottie as explained in Chris’ blog post.
Add a ViewPager
to your layout, right after your LottieAnimationView
. Remember the ViewPager
has to be on top of the LottieAnimationView
, or touch events will be handled in a weird, unreliable way.
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent">
<com.airbnb.lottie.LottieAnimationView
android:id="@+id/animation_view"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:layout_centerInParent="true"
app:lottie_autoPlay="false"
app:lottie_fileName="my-lottie-animation.json" />
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent" />
</RelativeLayout>
The last step is to tell Spritz
what are the steps that we baked in the Lottie animation.
Let's start by retrieving a Spritz builder by setting the target LottieAnimationView
:
Spritz.Builder builder = Spritz.with(lottieAnimationView);
Let's then use the builder
to set the steps with the appropriate durations of each "autoplay" and "swipe" sub-steps. This is done by calling withSteps()
with our comp’s SpritzStep
s:
Spritz.Builder builder = Spritz.with(lottieAnimationView)
.withSteps(spritzStep1, spritzStep2, spritzStep3);
Creating the steps is easy, too. For example, a step that has an autoplay animation of 1 second and a transition animation of half a second would be built in the following way:
new SpritzStep.Builder()
.withAutoPlayDuration(1, TimeUnit.SECONDS)
.withSwipeDuration(500, TimeUnit.MILLISECONDS)
.build();
The offsets between one step and another (within the full animation) will be automatically calculated by the library, which means that adding one step in between your pre-existing ones, or changing their order, won't introduce a significative diff in your code outside of the withSteps()
method call.
In the end, just call builder.build()
to retrieve your configured Spritz instance.
A full Spritz
configuration will look somewhat similar to:
spritz = Spritz.with(lottieAnimationView)
.withSteps(
new SpritzStep.Builder()
.withAutoPlayDuration(1, TimeUnit.SECONDS)
.withSwipeDuration(500, TimeUnit.MILLISECONDS)
.build(),
new SpritzStep.Builder()
.withAutoPlayDuration(500, TimeUnit.MILLISECONDS)
.withSwipeDuration(500, TimeUnit.MILLISECONDS)
.build(),
new SpritzStep.Builder()
.withAutoPlayDuration(500, TimeUnit.MILLISECONDS)
.build()
)
.build();
Once you have created your Spritz
configuration object, simply attach the ViewPager
in onStart()
:
@Override
protected void onStart() {
super.onStart();
spritz.attachTo(viewPager);
spritz.startPendingAnimations();
}
We are also calling spritz.startPendingAnimations()
to make sure that any autoplay animation in the currently selected page is animated correctly.
Symmetrically, don't forget to detach your ViewPager
from the Spritz
instance in onStop()
:
@Override
protected void onStop() {
spritz.detachFrom(viewPager);
super.onStop();
}
Congratulations, you just made your first onboarding screen using Lottie and writing (almost) no code!
Here's how a simple yet tasty animation looks like in our demo application:
So go ahead, install our demo app, "Taste of Spritz", from the Play Store and try it yourself!
To use the library in your app, simply include the following Gradle dependency:
dependencies {
implementation('com.novoda:spritz:1.0.0')
}
Spritz is a work-in-progress library, meaning the API can change while we improve it, but fear not: as you have noticed, the configuration needed to integrate an animation with a ViewPager
is so minimal that any change would require only a few minutes.
You are encouraged to participate in the development of Spritz by giving out your ideas, opening bugs and — even better — submitting Pull Requests at our novoda/spritz Github repository!
Wait, were you here for an actual Spritz recipe? Alright, that’s easy:
Remember that spritz is an aperitif, just like onboarding is for your app!
We plan, design, and develop the world’s most desirable software products. Our team’s expertise helps brands like Sony, Motorola, Tesco, Channel4, BBC, and News Corp build fully customized Android devices or simply make their mobile experiences the best on the market. Since 2008, our full in-house teams work from London, Liverpool, Berlin, Barcelona, and NYC.
Let’s get in contact