How to replace SwipeRefreshLayout loading animation with a Lottie animation

In the process of replacing the SwipeRefreshLayout loading animation with Lottie animations, the main steps can be broken down into the following sections:

1. Add Dependencies

First, ensure that the Lottie dependency is added to your project's build.gradle file:

gradle
dependencies {
    implementation 'com.airbnb.android:lottie:3.4.0'
}

2. Remove the Existing SwipeRefreshLayout

In the layout file, remove or hide the existing SwipeRefreshLayout, as we will use LottieAnimationView to create a custom pull-to-refresh animation.

3. Add LottieAnimationView

In the same layout file, add a LottieAnimationView to display the animation:

xml
<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/lottieAnimationView"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:lottie_rawRes="@raw/loading_animation" // Replace this with your animation file
    app:lottie_autoPlay="false"
    app:lottie_loop="true"
    android:visibility="gone" />

4. Control Animation Visibility

Next, in your Activity or Fragment, you need to control the visibility of the LottieAnimationView and the playback of the animation:

java
LottieAnimationView lottieAnimationView = findViewById(R.id.lottieAnimationView);

// Show and hide animation
public void showLoadingAnimation() {
    lottieAnimationView.setVisibility(View.VISIBLE);
    lottieAnimationView.playAnimation();
}

public void hideLoadingAnimation() {
    lottieAnimationView.cancelAnimation();
    lottieAnimationView.setVisibility(View.GONE);
}

5. Listen for Swipe Events

You need to implement the touch listener yourself to trigger the animation when the user pulls down. This can be achieved by adding an OnTouchListener to the parent layout.

java
yourParentLayout.setOnTouchListener(new View.OnTouchListener() {
    @Override
    public boolean onTouch(View v, MotionEvent event) {
        switch (event.getAction()) {
            case MotionEvent.ACTION_DOWN:
                // Record the initial touch position
                break;
            case MotionEvent.ACTION_MOVE:
                // Calculate the swipe distance and display the animation based on it
                if (isPullDown(event)) {
                    lottieAnimationView.setProgress(calculateProgress(event));
                }
                break;
            case MotionEvent.ACTION_UP:
            case MotionEvent.ACTION_CANCEL:
                // Handle events after the finger is released, such as initiating a network request
                if (shouldRefresh(event)) {
                    showLoadingAnimation();
                    fetchData(); // fetchData() is your data loading method
                } else {
                    resetAnimation();
                }
                break;
        }
        return true;
    }
});

6. Perform Network Requests and Stop Animation After Completion

After the network request is completed, call hideLoadingAnimation() to stop and hide the animation.

java
public void fetchData() {
    // Execute network request...
    // After request completion
    hideLoadingAnimation();
}

Summary

By following the steps above, you can replace the traditional SwipeRefreshLayout loading animation with the Lottie animation library, achieving a richer and smoother user experience. This approach not only enhances the visual appeal of the loading animation but also provides greater customization flexibility, making your app interface stand out.