AXrLottie

AXrLottie (Android) Renders animations and vectors exported in the bodymovin JSON format. (Using rLottie)

screen--1-

Installation

AXrLottie is available in the JCenter, so you just need to add it as a dependency (Module gradle)

Gradle

implementation 'com.aghajari.rlottie:AXrLottie:1.0.0'
Gradle

Maven

<dependency>
  <groupId>com.aghajari.rlottie</groupId>
  <artifactId>AXrLottie</artifactId>
  <version>1.0.0</version>
  <type>pom</type>
</dependency>
XML

Usage

First you should know what is lottie?

Lottie loads and renders animations and vectors exported in the bodymovin JSON format. Bodymovin JSON can be created and exported from After Effects with bodymovin, Sketch with Lottie Sketch Export, and from Haiku.

For the first time, designers can create and ship beautiful animations without an engineer painstakingly recreating it by hand. Since the animation is backed by > JSON they are extremely small in size but can be large in complexity!

Let's START! :smiley:

Install AXrLottie

First step, you should install AXrLottie

AXrLottie.init(this);
Java

Basic Usage

Create an AXrLottieImageView in your layout.

<com.aghajari.rlottie.AXrLottieImageView
        android:id="@+id/lottie_view"
        android:layout_width="180dp"
        android:layout_height="180dp"
        android:layout_gravity="center"/>
XML

Now you just need to load your lottie Animation

lottieView.setLottieDrawable(AXrLottieDrawable.fromAssets(this,fileName)
                .setSize(width,height)
                .build());
lottieView.playAnimation();
Java

you can load lottie file from following sources :

  • File
  • Json (String)
  • Url
  • Assets
  • Resource
  • InputStram

lottie will cache animations and files
you can disable cache in AXrLottieDrawable Builder

Output

simple

LayerProperty

lottieView.setLayerProperty("layer_name.**", AXrLottieProperty.colorProperty(color));
Java

Properties :

  • Color
  • FillOpacity
  • StrokeOpacity
  • StrokeWidth
  • TrAnchor
  • TrOpacity
  • TrPosition
  • TrRotation
  • TrScale

Output

layer

AnimationLayers

for (AXrLottieLayerInfo layerInfo : lottieDrawable.getLayers()) {
    Log.i("AXrLottie", "layerName: " + layerInfo.getName());
}
Java

Lottie2Gif

you can export lottie animations as a GIF!
thanks to gif-h

AXrLottie2Gif.create(lottieDrawable)
                .setListener(new AXrLottie2Gif.Lottie2GifListener() {
                    long start;

                    @Override
                    public void onStarted() {
                        start = System.currentTimeMillis();
                    }

                    @Override
                    public void onProgress(int frame, int totalFrame) {
                        log("progress : " + frame + "/" + totalFrame);
                    }

                    @Override
                    public void onFinished() {
                        log("GIF created (" + (System.currentTimeMillis() - start) + "ms)\r\n" +
                                "Resolution : " + gifSize + "x" + gifSize + "\r\n" +
                                "Path : " + file.getAbsolutePath() + "\r\n" +
                                "File Size : " + (file.length() / 1024) + "kb");
                    }
                })
                .setBackgroundColor(Color.WHITE)
                .setOutputPath(file)
                .setSize(gifSize, gifSize)
                .setBackgroundTask(true)
                .setDithering(false)
                .setDestroyable(true)
                .build();
Java

Output

gif

Listeners

OnFrameChangedListener:

void onFrameChanged(AXrLottieDrawable drawable, int frame);
Java

OnFrameRenderListener:

void onUpdate(AXrLottieDrawable drawable, int frame, long timeDiff, boolean force);
Bitmap renderFrame(AXrLottieDrawable drawable, Bitmap bitmap, int frame);
Java

AnimatedSticker - AXEmojiView

you can create AXrLottieImageView in AXEmojiView/StickerView using this code :

AXEmojiManager.setStickerViewCreatorListener(new StickerViewCreatorListener() {
    @Override
    public View onCreateStickerView(@NonNull Context context, @Nullable StickerCategory category, boolean isRecent) {
        return new AXrLottieImageView(context);
    }
    
    @Override
    public View onCreateCategoryView(@NonNull Context context) {
        return new AXrLottieImageView(context);
    }
});
Java

add this just after AXEmojiManager.install

and you can load your animations in StickerProvider

  @Override
    public StickerLoader getLoader() {
        return new StickerLoader() {
            @Override
            public void onLoadSticker(View view, Sticker sticker) {
                if (view instanceof AXrLottieImageView && sticker instanceof AnimatedSticker) {
                    AXrLottieImageView lottieImageView = (AXrLottieImageView) view;
                    AnimatedSticker animatedSticker = (AnimatedSticker) sticker;
                    if (animatedSticker.drawable==null){
                        animatedSticker.drawable = Utils.createFromSticker(view.getContext(),animatedSticker,100);
                    }
                    lottieImageView.setLottieDrawable(animatedSticker.drawable);
                    lottieImageView.playAnimation();
                }
            }

            @Override
            public void onLoadStickerCategory(View view, StickerCategory stickerCategory, boolean selected) {
                if (view instanceof AXrLottieImageView) {
                    AXrLottieImageView lottieImageView = (AXrLottieImageView) view;
                    AnimatedSticker animatedSticker = (AnimatedSticker) stickerCategory.getCategoryData();
                    if (animatedSticker.drawable==null){
                        animatedSticker.drawable = Utils.createFromSticker(view.getContext(),animatedSticker,50);
                    }
                    lottieImageView.setLottieDrawable(animatedSticker.drawable);
                    //lottieImageView.playAnimation();
                }
            }
        };
    }
Java

Output

screen-1

Author

  • Amir Hossein Aghajari

GitHub