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 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 objectParticleSmasher 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 onclicksmasher.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 btn1btn1.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:
