How to Add ParticleSmasher in Android App?

ParticleSmasher is an Android library that allows us to easily particle effect to our views in our android app .we can use this feature in many apps such as the app in which we destroy a particular UI after completion of the task or when we delete a particular file. A sample GIF is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language.

Step 2: Before going to the coding section first do some pre-task

Go to app -> res -> values -> colors.xml file and set the colors for the app.

XML

<?xml version="1.0" encoding="utf-8"?>
<resources>

    <color name="colorPrimary">#0F9D58</color>
    <color name="colorPrimaryDark">#0F9D58</color>
    <color name="colorAccent">#05af9b</color>

</resources>

Go to Gradle Scripts -> build.gradle (Module: app) section and import the following dependencies and click the “sync Now” on the above pop-up.

implementation ‘com.ifadai:particlesmasher:1.0.1’

Step 3: Designing the UI

In the activity_main.xml remove the default Text View and change the layout to Relative layout and inside it add a vertical LinearLayout and inside the LinearLayout add 6 buttons with different ids, text, and colors. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <!-- simple vertical linear layout -->
    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <!-- simple buttons with different text ,color and id's -->
        <Button
            android:id="@+id/button1"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:backgroundTint="#F44336"
            android:text="Effect 1"
            android:textColor="#ffff" />

        <Button
            android:id="@+id/button2"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:backgroundTint="#9C27B0"
            android:text="Effect 2"
            android:textColor="#ffff" />

        <Button
            android:id="@+id/button3"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:backgroundTint="#3F51B5"
            android:text="Effect 3"
            android:textColor="#ffff" />

        <Button
            android:id="@+id/button4"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:backgroundTint="#03A9F4"
            android:text="Effect 4"
            android:textColor="#ffff" />

        <Button
            android:id="@+id/button5"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:backgroundTint="#009688"
            android:text="Effect 5"
            android:textColor="#ffff" />

        <Button
            android:id="@+id/button6"
            android:layout_width="match_parent"
            android:layout_height="64dp"
            android:layout_marginLeft="16dp"
            android:layout_marginRight="16dp"
            android:backgroundTint="#FFEB3B"
            android:text="Effect 6"
            android:textColor="#ffff" />

    </LinearLayout>

</RelativeLayout>

Step 4: Coding Part

Open the MainActivity.java file and inside the onCreate() method create and initialize ParticleSmasher object and do the same for 6 buttons as shown below.  

Java

// creating  ParticleSmasher object
ParticleSmasher smasher = new ParticleSmasher(MainActivity.this);

Button btn1=(Button) findViewById(R.id.button1);
Button btn2=(Button) findViewById(R.id.button2);
Button btn3=(Button) findViewById(R.id.button3);
Button btn4=(Button) findViewById(R.id.button4);
Button btn5=(Button) findViewById(R.id.button5);
Button btn6=(Button) findViewById(R.id.button6);

Below is the code which is used to smash the view (It  also has OnAnimatorListener when animation start and end, we simply show toast message inside the methods ), we will call this view inside the onClick Listeners of different buttons  

Java

// add the code inside all buttons onclick
smasher.with(view)
                  .setStyle(SmashAnimator.STYLE_DROP)    // Set animation style
                  .setDuration(1500)                     // Set animation time
                  .setStartDelay(300)                    // Set the delay before the animation
                  .setHorizontalMultiple(2)              // Set the amplitude of lateral movement, the default is 3
                  .setVerticalMultiple(2)                // Set the vertical movement amplitude, the default is 4
                  .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                   @Override
                   public void onAnimatorStart() {
                       super.onAnimatorStart();
                       // Callback, the animation starts
                       Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                    }

                   @Override
                   public void onAnimatorEnd() {
                       super.onAnimatorEnd();
                       // Callback, the animation ends
                       Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                        }
                   }).start();

Next, create an individual OnClickListener for all the 6 Button’s, and inside the onClick (View view) method add the above code with different effects. 

Java

// click listener for  btn1
btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_DROP)    // Set animation style
                        .setDuration(1500)                     // Set animation time
                        .setStartDelay(300)                    // Set the delay before the animation
                        .setHorizontalMultiple(2)              // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
            }
        });

        // click listener for  btn2
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_EXPLOSION)    // Set animation style
                        .setDuration(1500)                          // Set animation time
                        .setStartDelay(300)                         // Set the delay before the animation
                        .setHorizontalMultiple(2)                   // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                     // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
            }
        });

        // click listener for  btn3
        btn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_FLOAT_BOTTOM)    // Set animation style
                        .setDuration(1500)                             // Set animation time
                        .setStartDelay(300)                            // Set the delay before the animation
                        .setHorizontalMultiple(2)                      // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                        // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
            }
        });

        // click listener for  btn4
        btn4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_FLOAT_LEFT)    // Set animation style
                        .setDuration(1500)                           // Set animation time
                        .setStartDelay(300)                          // Set the delay before the animation
                        .setHorizontalMultiple(2)                    // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                      // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
            }
        });


        // click listener for  btn5
        btn5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_FLOAT_RIGHT)    // Set animation style
                        .setDuration(1500)                            // Set animation time
                        .setStartDelay(300)                           // Set the delay before the animation
                        .setHorizontalMultiple(2)                     // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                       // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
            }
        });


        // click listener for  btn6
        btn6.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_FLOAT_TOP)    // Set animation style
                        .setDuration(1500)                          // Set animation time
                        .setStartDelay(300)                         // Set the delay before the animation
                        .setHorizontalMultiple(2)                   // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                     // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
          }
});

Below is the complete code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail 

Java

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Toast;

import androidx.appcompat.app.AppCompatActivity;

import com.fadai.particlesmasher.ParticleSmasher;
import com.fadai.particlesmasher.SmashAnimator;

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        // creating  ParticleSmasher object
        ParticleSmasher smasher = new ParticleSmasher(MainActivity.this);

        Button btn1=(Button) findViewById(R.id.button1);
        Button btn2=(Button) findViewById(R.id.button2);
        Button btn3=(Button) findViewById(R.id.button3);
        Button btn4=(Button) findViewById(R.id.button4);
        Button btn5=(Button) findViewById(R.id.button5);
        Button btn6=(Button) findViewById(R.id.button6);

        // click listener for  btn1
        btn1.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_DROP)    // Set animation style
                        .setDuration(1500)                     // Set animation time
                        .setStartDelay(300)                    // Set the delay before the animation
                        .setHorizontalMultiple(2)              // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
            }
        });

        // click listener for  btn2
        btn2.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_EXPLOSION)    // Set animation style
                        .setDuration(1500)                          // Set animation time
                        .setStartDelay(300)                         // Set the delay before the animation
                        .setHorizontalMultiple(2)                   // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                     // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
            }
        });

        // click listener for  btn3
        btn3.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_FLOAT_BOTTOM)    // Set animation style
                        .setDuration(1500)                             // Set animation time
                        .setStartDelay(300)                            // Set the delay before the animation
                        .setHorizontalMultiple(2)                      // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                        // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
            }
        });

        // click listener for  btn4
        btn4.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_FLOAT_LEFT)    // Set animation style
                        .setDuration(1500)                           // Set animation time
                            .setStartDelay(300)                      // Set the delay before the animation
                        .setHorizontalMultiple(2)                    // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                      // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
            }
        });

        // click listener for  btn5
        btn5.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_FLOAT_RIGHT)    // Set animation style
                        .setDuration(1500)                            // Set animation time
                        .setStartDelay(300)                           // Set the delay before the animation
                        .setHorizontalMultiple(2)                     // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                       // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
            }
        });

        // click listener for  btn6
        btn6.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                smasher.with(view)
                        .setStyle(SmashAnimator.STYLE_FLOAT_TOP)    // Set animation style
                        .setDuration(1500)                          // Set animation time
                        .setStartDelay(300)                         // Set the delay before the animation
                        .setHorizontalMultiple(2)                   // Set the amplitude of lateral movement, the default is 3
                        .setVerticalMultiple(2)                     // Set the vertical movement amplitude, the default is 4
                        .addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
                            @Override
                            public void onAnimatorStart() {
                                super.onAnimatorStart();
                                // Callback, the animation starts
                                Toast.makeText(MainActivity.this, "onAnimatorStart "+view, Toast.LENGTH_SHORT).show();
                            }

                            @Override
                            public void onAnimatorEnd() {
                                super.onAnimatorEnd();
                                // Callback, the animation ends
                                Toast.makeText(MainActivity.this, "onAnimatorEnd "+view, Toast.LENGTH_SHORT).show();
                            }
                        }).start();
            }
        });
    }
}

Output: