Open In App

How to Add ParticleSmasher in Android App?

Last Updated : 08 Dec, 2021
Improve
Improve
Like Article
Like
Save
Share
Report

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. 

Add ParticleSmasher in Android App Sample GIF

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: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:  

 



Similar Reads

How to Add Audio Files to Android App in Android Studio?
The audio file format is a file format for saving digital audio data on a computer system and all are aware of audio files. So in this article, we are going to discuss how can we add audio files to the android app. There are three major groups of audio file formats: Format Name Description Examples Uncompressed audio formatsUncompressed audio forma
3 min read
How to Add Firebase Analytics to Android App in Android Studio?
Analytics is one of the important tools that developers should definitely used while building their applications. It is very helpful to target your apps for various audience ranges and to track on which screen the users are spending a long time. So it is one of the important features which one should not miss adding while building any Android Appli
4 min read
How to Integrate In-App Review API into Android App?
Once we publish our app over the PlayStore and as it became live there, app rating and reviews become very crucial to driving audience and downloads to your app. In order to increase this, we ask our users to rate the app through a popup window and redirecting them to the PlayStore. But this nowadays creates little problems, once users went to Play
3 min read
How to Share Text of Your App with Another App and Vice Versa in Android?
Most of the time while using an app we want to share text from the app to another app. While using Many Social Media Platforms we find this feature to be very useful when we want to share information from one app to another. The Android intent resolver is used when sending data to another app as part of a well-defined task flow. To use the Android
5 min read
How to Share Image of Your App with Another App in Android?
Most of the time while using an app we want to share images from the app to another app. While using Many Social Media Platforms we find this feature to be very useful when we want to share information from one app to another. The Android Intent resolver is used when sending data to another app as part of a well-defined task flow. To use the Androi
4 min read
How to add Rate the App feature in Android
When you publish your app on google play store it is important to get feedback from the user. Unless the user does not love or hate your app, they are not likely to go out of their way to rate your app. Since high rating indicates the success of your app, and even criticism is required to make the application better. So, it is better to add a rate
2 min read
How to add Lottie Animation in an Android app
This article is about enhancing the User Interface of the mobile application by adding Lottie animation files into our mobile app. The Lottie animations are free to use vector animation files. These animation files can be found at the official site here. Many famous applications use this such as Uber, Netflix, Google, Airbnb, Shopify, etc.Below is
2 min read
How to Add Fingerprint Authentication in Your Android App without Using any Library?
Biometric Fingerprint authentication is one method of protecting sensitive information or premium content of your app. Nowadays, all payment apps use this feature in their app. It is very easy to implement. A sample Video 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 us
6 min read
How to Add Florent LongShadow to Android App?
LongShadow is an Android library that allows us to easily a long shadow to different views in Android Studio. We can use long shadows to make the app more attractive and engaging. 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 b
4 min read
How to Add SlantedTextView in Android App?
SlantedTextView is an Android library that allows us to easily create a slanted text in an android app. We can use this feature in many apps such as educational courses app or subscription-based app and in many other apps where some features are available for free and some are paid features. Note that we are going to implement this project using th
3 min read
Article Tags :
Practice Tags :