Lottie animation freezed while screen design in Android

Question

I am using lottie to show some animation while screen design. But while designing lottie is freezed. I am using the following code for get lottie image.

@NonNull
    public static LottieDrawable getLottieFromInputStream(@NonNull InputStream inputStream) {
        LottieComposition composition = LottieCompositionFactory.fromJsonInputStreamSync(inputStream, null).getValue();
        LottieDrawable mLottieDrawable = new LottieDrawable();
        mLottieDrawable.enableMergePathsForKitKatAndAbove(true);
        mLottieDrawable.setComposition(composition);
        mLottieDrawable.playAnimation();
        return mLottieDrawable;
    }

And set the layout background like:

Drawable drawableImage = getLottieFromInputStream(pContext.getAssets().open(pImageName));
layout.setBackground(drawableImage);

It is animation when background request is happaning. But when after received response we designing the screen. When screen designing in background the lottie is freezed. Is there any way to run the lottie in worker thread?

Answer 1

here's code that avoid freezing lottie animation:

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.constraintlayout.widget.ConstraintLayout;
import com.airbnb.lottie.LottieComposition;
import com.airbnb.lottie.LottieCompositionFactory;
import com.airbnb.lottie.LottieDrawable;
import java.io.IOException;
import java.io.InputStream;

public class LottieLoaderTask extends AsyncTask<Void, Void, LottieDrawable> {
    private Context context;
    private String imageName;
    private ConstraintLayout layout;
    
    public LottieLoaderTask(Context context, String imageName, ConstraintLayout layout) {
        this.context = context;
        this.imageName = imageName;
        this.layout = layout;
    }

    @Override
    protected LottieDrawable doInBackground(Void... voids) {
        try {
            InputStream inputStream = context.getAssets().open(imageName);
            LottieComposition composition = LottieCompositionFactory.fromJsonInputStreamSync(inputStream, null).getValue();
            LottieDrawable lottieDrawable = new LottieDrawable();
            lottieDrawable.enableMergePathsForKitKatAndAbove(true);
            lottieDrawable.setComposition(composition);
            return lottieDrawable;
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }

    @Override
    protected void onPostExecute(LottieDrawable lottieDrawable) {
        if (lottieDrawable != null) {
            layout.setBackground((Drawable) lottieDrawable);
            lottieDrawable.playAnimation();
        }
    }
}

and here's an example of how you call the function:

// Call this method where you want to load the Lottie animation
public void loadLottieAnimation(Context context, String imageName, ConstraintLayout layout) {
    new LottieLoaderTask(context, imageName, layout).execute();
}

Answer 2

you can use a separate thread for playing the animation. Here's an updated approach:

import android.content.Context;
import android.graphics.drawable.Drawable;
import android.os.AsyncTask;
import android.view.View;
import androidx.annotation.NonNull;
import androidx.constraintlayout.widget.ConstraintLayout;
import com.airbnb.lottie.LottieComposition;
import com.airbnb.lottie.LottieCompositionFactory;
import com.airbnb.lottie.LottieDrawable;
import java.io.IOException;
import java.io.InputStream;

public class LottieLoaderTask extends AsyncTask<Void, Void, LottieComposition> {
    private Context context;
    private String imageName;
    private ConstraintLayout layout;
    
    public LottieLoaderTask(Context context, String imageName, ConstraintLayout layout) {
        this.context = context;
        this.imageName = imageName;
        this.layout = layout;
    }

    @Override
    protected LottieComposition doInBackground(Void... voids) {
        try {
            InputStream inputStream = context.getAssets().open(imageName);
            return LottieCompositionFactory.fromJsonInputStreamSync(inputStream, null).getValue();
        } catch (IOException e) {
            e.printStackTrace();
            return null;
        }
    }

    @Override
    protected void onPostExecute(LottieComposition composition) {
        if (composition != null) {
            LottieDrawable lottieDrawable = new LottieDrawable();
            lottieDrawable.enableMergePathsForKitKatAndAbove(true);
            lottieDrawable.setComposition(composition);
            layout.setBackground((Drawable) lottieDrawable);
            new LottiePlayerTask(lottieDrawable).execute();
        }
    }
}

class LottiePlayerTask extends AsyncTask<Void, Void, Void> {
    private LottieDrawable lottieDrawable;

    public LottiePlayerTask(LottieDrawable lottieDrawable) {
        this.lottieDrawable = lottieDrawable;
    }

    @Override
    protected Void doInBackground(Void... voids) {
        lottieDrawable.playAnimation();
        return null;
    }
}

if this helped you?