JarCastingRive-Android -- Rive's Android runtime
Create and ship interactive animations to any platform
Rive is a real-time interactive design and animation tool. Use our collaborative editor to create motion graphics that respond to different states and user inputs. Then load your animations into apps, games, and websites with our lightweight open-source runtimes.
Beta Release
This is the Android runtime for Rive, currently in beta. The api is subject to change as we continue to improve it. Please file issues and PRs for anything busted, missing, or just wrong.
We are not currently available on Maven, so to use your own .aar
Installing
-
Clone the repo
git clone --recurse-submodules [email protected]:rive-app/rive-android.git -
Open the directory as an Android Studio project
-
Build the
.aar, with the Android Studio project open, in the menu selectBuild>Make Module 'kotlin'.Android Studio will put the
.aarlibrary file inkotlin/build/outputs/aar. -
The documentation lists all the steps to add the library to your own projects.
RiveAnimationView
The simplest way to get a rive animation into your application is to include it as part of a layout. The following will include the rive file loaded from the raw resources location, and auto play its first animation.
<app.rive.runtime.kotlin.RiveAnimationView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:riveResource="@raw/off_road_car_blog" />
Layout
The animation view can be further customized as part of specifying layout attributes.
fit can be specified to determine how the animation should be resized to fit its container. The available choices are FILL , CONTAIN , COVER , FIT_WIDTH , FIT_HEIGHT , NONE , SCALE_DOWN
alignment informs how it should be aligned within the container. The available choices are TOP_LEFT , TOP_CENTER , TOP_RIGHT , CENTER_LEFT , CENTER , CENTER_RIGHT , BOTTOM_LEFT , BOTTOM_CENTER , BOTTOM_RIGHT .
<app.rive.runtime.kotlin.RiveAnimationView
android:layout_width="match_parent"
android:layout_height="match_parent"
app:riveResource="@raw/off_road_car_blog"
app:riveAlignment="CENTER"
app:riveFit="CONTAIN"
/>
Or
animationView.fit = Fit.FILL
animationView.alignment = Alignment.CENTER
Playback controls
Animations can be controlled in many ways, by default loading a RiveAnimationView with a resource file will autoplay the first animation on the first artboard. The artboard and animation can be specified.
<app.rive.runtime.kotlin.RiveAnimationView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:adjustViewBounds="true"
app:riveAutoPlay="true"
app:riveArtboard="Square"
app:riveAnimation="rollaround"
app:riveResource="@raw/artboard_animations" />
Or
animationView.setRiveResource(
R.raw.artboard_animations,
artboardName = "Square",
animationName = "rollaround",
autoplay = true
)
furthermore animations can be controlled later too:
To play an animation named rollaround.
animationView.play("rollaround")
multiple animations can play at the same time, and additional animations can be added at any time
animationView.play(listOf("bouncing", "windshield_wipers"))
When playing animations, the Loop Mode and direction of the animations can also be set per animation.
animationView.play(listOf("bouncing", "windshield_wipers"), Loop.ONE_SHOT, Direction.Backwards)
Similarly animations can be paused, or stopped, either all at the same time, or one by one.
animationView.stop()
animationView.stop("bouncing")
animationView.stop(listOf("bouncing", "windshield_wipers"))
animationView.pause()
animationView.pause("bouncing")
animationView.pause(listOf("bouncing", "windshield_wipers"))
Mixing
Mixing goes further than just playing multiple animations at the same time, animations can use a mix factor between 0 and 1, to allow multiple animations effects to blend together. The high level views do not expose this currently. but you can wrap your own render loop around the core libraries. The advance function is where you can specify a mix factor
Events
The rive android runtimes allow listener registration, take a look at the events section in the rive player for an example of how this works.
findViewById<RiveAnimationView>(R.id.android_player_view)
val listener = object : Listener {
override fun notifyPlay(animation: LinearAnimationInstance) {
// Do something
}
override fun notifyPause(animation: LinearAnimationInstance) {
// Do something
}
override fun notifyStop(animation: LinearAnimationInstance) {
// Do something
}
override fun notifyLoop(animation: LinearAnimationInstance) {
// Do something
}
}
animationView.registerListener(listener)
Project Layout
/kotlin
This is the main module of the android library, you can find a useful RiveAnimationView or RiveDrawable in the app.rive.runtime.kotlin namespace. The underlying c++ runtimes is mapped to objects in the app.rive.runtime.kotlin.core namespace. This can be used to allow for more fine grained control for more complex animation loops. Our high level views are simply built on top of this.
/app
Multiple sample activities can be found here, this can be a useful reference for getting started with using the runtimes.
/cpp && /submodules
The runtimes are built on top of our c++ runtimes. these are included as a submodule in /submodules. The /cpp folder contains the c++ side of our bindings into android.
Build the cpp runtimes
If you have changed the cpp submodule, or if you have made changes to the cpp bindings, you will need to rebuild the cpp runtimes to generate the new .so files.
cd cpp
./build.rive.for.sh -c -a x86
./build.rive.for.sh -c -a x86_64
./build.rive.for.sh -c -a arm64-v8a
./build.rive.for.sh -c -a armeabi-v7a
