Lottie Animation Guide

Overview

RideEase utilizes Lottie animations to provide high-quality, vector-based visual feedback and branding. These animations are primarily used for loading states during asynchronous operations (like Firebase authentication) and for enhancing the user experience on the splash screen.

Asset Management

Lottie animations are stored as JSON files within the project. To add or update an animation:

1. Navigate to app/src/main/res/raw/.
2. Place your .json animation file in this directory.
3. Reference the animation in your layout or code using R.raw.filename.

XML Layout Configuration

To include an animation in a layout, use the LottieAnimationView. Below is a standard implementation used for full-screen loading overlays:

<com.airbnb.lottie.LottieAnimationView
    android:id="@+id/loadingAnimation"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:visibility="gone"
    app:lottie_rawRes="@raw/loading_animation"
    app:lottie_autoPlay="false"
    app:lottie_loop="true" />

Common Attributes

• app:lottie_rawRes: The reference to the JSON file in res/raw.
• app:lottie_autoPlay: Set to true to start the animation as soon as the view is inflated.
• app:lottie_loop: Set to true for continuous animations (ideal for loading screens).

Programmatic Control

In RideEase activities (such as ResetPasswordActivity or UserDetailsActivity), animations are controlled via View Binding.

Handling Loading States

The project follows a standard pattern for showing and hiding loading animations during network requests:

private void showLoading() {
    binding.loadingAnimation.setVisibility(View.VISIBLE);
    binding.loadingAnimation.playAnimation();
}

private void hideLoading() {
    binding.loadingAnimation.setVisibility(View.GONE);
    binding.loadingAnimation.pauseAnimation();
}

Splash Screen Integration

In SplashActivity, animations are used to enhance the onboarding experience. Ensure animations are canceled in onDestroy() to prevent memory leaks:

@Override
protected void onDestroy() {
    super.onDestroy();
    if (binding != null && binding.lottieAnimationView != null) {
        binding.lottieAnimationView.cancelAnimation();
    }
}

Best Practices for RideEase Developers

1. Visibility Management: Always pair playAnimation() with View.VISIBLE and pauseAnimation() or cancelAnimation() with View.GONE.
2. Resource Cleanup: If an activity is destroyed while an animation is playing, explicitly cancel the animation in the onDestroy() lifecycle hook.
3. Consistency: Use the standardized loadingAnimation ID in XML layouts across all authentication screens to ensure uniform behavior when calling showLoading() and hideLoading().
4. Performance: Avoid using excessively large JSON files. Use the LottieFiles optimization tools before adding assets to the res/raw folder.