CODEWITHSUNDEEP
androidandroid-animationandroid-glidelottie
Wolf Tatoo
Wolf Tatoo

Reputation: 25

How to replace Android image drawable (glide) with a Lottie animation?

I wanted to replace these three states WiFi images sequence (connect, connecting, connected) with one Lottie animation containing the 3 states:

  1. When it's idle, it should display a still frame from the WiFi Lottie animation.
  2. When a button is pressed: it plays the WiFi Lottie animation from frame x to frame y.
  3. When it connects: it displays a still frame from the WiFi Lottie animation.

This is the Java code I need to modify:

protected void loadIcon() {
    if (state == WifiState.IDLE) {
        Glide.with(this).load(R.drawable.ic_connect).into(connectButtonTextView);
        Glide.with(this).load(R.drawable.ic_connect).into(connectButtonTextView);

    } else if (state == WifiState.CONNECTING_WIFI || state == WifiState.CONNECTING_CREDENTIALS) {
        connectButtonTextView.setVisibility(View.VISIBLE);
        Glide.with(this).load(R.drawable.is_connecting).into(connectButtonTextView);
        
    } else if (state == WifiState.CONNECTED) {
        Glide.with(this).load(R.drawable.ic_connected).into(connectButtonTextView);
        Glide.with(this).load(R.drawable.ic_connected).into(connectButtonTextView);
        connectButtonTextView.setVisibility(View.VISIBLE);

    }
}

Upvotes: 1

Views: 2708

Answers (1)

Ritu Suman Mohanty
Ritu Suman Mohanty

Reputation: 784

Replace you ImageView with this

<com.airbnb.lottie.LottieAnimationView
     android:id="@+id/animationView"
     android:layout_width="match_parent"
     android:layout_height="wrap_content"
     app:lottie_url="REPLACE_JSON_URL"
     app:lottie_autoPlay="true"
     app:lottie_loop="true"/>

in xml file. Replace your activity glide code with the below code and give your json file according to your if condition.

animationView.setAnimation("abc.json")
animationView.playAnimation()
animationView.loop(true)

Upvotes: 1

Related Questions