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:
- Navigate to
app/src/main/res/raw/. - Place your
.jsonanimation file in this directory. - 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 inres/raw.app:lottie_autoPlay: Set totrueto start the animation as soon as the view is inflated.app:lottie_loop: Set totruefor 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
- Visibility Management: Always pair
playAnimation()withView.VISIBLEandpauseAnimation()orcancelAnimation()withView.GONE. - Resource Cleanup: If an activity is destroyed while an animation is playing, explicitly cancel the animation in the
onDestroy()lifecycle hook. - Consistency: Use the standardized
loadingAnimationID in XML layouts across all authentication screens to ensure uniform behavior when callingshowLoading()andhideLoading(). - Performance: Avoid using excessively large JSON files. Use the LottieFiles optimization tools before adding assets to the
res/rawfolder.