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