Android开发：Dialog中集成Lottie完成/失败动画图标方案咨询

Hey there! I’ve built exactly this kind of status Dialog with Lottie animations for a few Android projects, so let me break down the implementation step by step with code examples and practical tips.

Step 1: Prep Work #

• Add the Lottie dependency to your app-level build.gradle (or build.gradle.kts):

  dependencies {
      implementation 'com.airbnb.android:lottie:6.4.0' // Use the latest version available
  }
  

• Place your Lottie JSON files (for checked-done and fail states) in the res/raw directory of your project. Let's name them lottie_done.json and lottie_fail.json for this example.

Step 2: Create a Custom Dialog Layout #

Make a layout file (e.g., dialog_status.xml) that includes the Lottie view and optional status text:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:orientation="vertical"
    android:padding="24dp"
    android:background="@drawable/dialog_rounded_bg"
    android:gravity="center">

    <com.airbnb.lottie.LottieAnimationView
        android:id="@+id/lottie_status"
        android:layout_width="120dp"
        android:layout_height="120dp"
        app:lottie_autoPlay="false"
        app:lottie_loop="false"/>

    <TextView
        android:id="@+id/tv_status_message"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:textSize="16sp"
        android:textColor="@color/black"/>

</LinearLayout>

Note: Create a dialog_rounded_bg.xml drawable to give the Dialog a nice rounded corner style, instead of the default sharp edges.

Step 3: Implement the Dialog Logic #

Create a helper method or class to build and show the status Dialog based on success/failure state. Here's an example in an Activity:

fun showStatusDialog(isSuccess: Boolean, message: String) {
    val dialog = Dialog(this, R.style.TransparentDialog)
    dialog.setContentView(R.layout.dialog_status)
    
    val lottieView = dialog.findViewById<LottieAnimationView>(R.id.lottie_status)
    val statusText = dialog.findViewById<TextView>(R.id.tv_status_message)
    
    // Load the appropriate Lottie animation
    if (isSuccess) {
        lottieView.setAnimation(R.raw.lottie_done)
        statusText.text = message.ifEmpty { "Operation completed!" }
    } else {
        lottieView.setAnimation(R.raw.lottie_fail)
        statusText.text = message.ifEmpty { "Operation failed!" }
    }
    
    // Play the animation once
    lottieView.playAnimation()
    
    // Optional: Close the Dialog automatically after animation ends
    lottieView.addAnimatorListener(object : Animator.AnimatorListener {
        override fun onAnimationStart(animation: Animator?) {}
        override fun onAnimationEnd(animation: Animator?) {
            // Delay a bit to let users see the final frame
            Handler(Looper.getMainLooper()).postDelayed({
                dialog.dismiss()
            }, 800)
        }
        override fun onAnimationCancel(animation: Animator?) {}
        override fun onAnimationRepeat(animation: Animator?) {}
    })
    
    dialog.setCancelable(false) // Prevent dismissing by tapping outside
    dialog.show()
}

Don't forget to add the TransparentDialog style in styles.xml to remove the default Dialog background shadow and make it look clean:

<style name="TransparentDialog" parent="Theme.AppCompat.Dialog">
    <item name="android:windowBackground">@android:color/transparent</item>
    <item name="android:windowNoTitle">true</item>
    <item name="android:windowIsFloating">true</item>
</style>

Step 4: Use the Dialog #

Call the method wherever you need to show the status:

// For success state
showStatusDialog(isSuccess = true, message = "Task completed successfully!")

// For failure state
showStatusDialog(isSuccess = false, message = "Oops, something went wrong.")

Pro Tips #

• Adjust Animation Speed: Use lottieView.speed = 1.5f to make the animation faster, or lower values for slower playback.
• Reuse Animations: If you show the Dialog frequently, consider caching the Lottie composition to improve performance:

  val doneComposition = LottieCompositionFactory.fromRawResSync(this, R.raw.lottie_done).value
  lottieView.setComposition(doneComposition)
  

• Customize Interactions: Let users tap the Dialog to dismiss it immediately, instead of waiting for the delay, by adding a click listener to the layout.

内容的提问来源于stack exchange，提问作者young1872