Android Image Particle animation 7 different type library
Android Image Particle animation library can be described as the Android library that lets us easily add particle effects to the views we display in our Android application. we are able to use this feature in numerous applications, such as the one that destroys an entire UI when it has been completed or after deleting the file in question.
A demonstration GIF is below to help you get an idea of the process we will do in this post. It is important to note that we will build this application using Java. So let’s start to make an example using the library.
Start your android studio and create a new project and build it after successfully syn it first Add the dependency.
Android Image Particle animation library Example.
Step 1. Add the JitPack repository to your build file
Add it to your root build.Gradle at the end of repositories:
allprojects {
repositories {
maven { url 'https://jitpack.io' }
}
}
Step 2. Add the dependency
dependencies {
implementation 'androidx.appcompat:appcompat:1.5.1'
implementation 'com.google.android.material:material:1.7.0'
implementation 'androidx.constraintlayout:constraintlayout:2.1.4'
implementation 'com.github.codeplayon:ParticleSmasherLibrary:v1.0.0'
testImplementation 'junit:junit:4.13.2'
androidTestImplementation 'androidx.test.ext:junit:1.1.4'
androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.0'
}
After Sync your project and get the dependencies file and add your main activity java class file below the code and steps.
Step 3: Add UI in the main_activity.xml class ParticleSmasher
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context=".MainActivity"
>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal"
android:layout_marginTop="48dp">
<ImageView
android:id="@+id/iv_main_1"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/calender"
android:clickable="true"
android:onClick="onClick"
android:layout_margin="8dp"
/>
<ImageView
android:id="@+id/iv_main_2"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/call"
android:clickable="true"
android:onClick="onClick"
android:layout_margin="8dp"/>
<ImageView
android:id="@+id/iv_main_3"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/gmail"
android:clickable="true"
android:onClick="onClick"
android:layout_margin="8dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal">
<TextView
android:layout_width="96dp"
android:layout_height="wrap_content"
android:text="explosion"
android:gravity="center"
android:layout_margin="8dp"/>
<TextView
android:layout_width="96dp"
android:layout_height="wrap_content"
android:text="falling"
android:gravity="center"
android:layout_margin="8dp"/>
<TextView
android:layout_width="96dp"
android:layout_height="wrap_content"
android:text="from top to bottom,"
android:gravity="center"
android:layout_margin="8dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal">
<ImageView
android:id="@+id/iv_main_4"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/insta"
android:clickable="true"
android:onClick="onClick"
android:layout_margin="8dp"
/>
<ImageView
android:id="@+id/iv_main_5"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/photo"
android:clickable="true"
android:onClick="onClick"
android:layout_margin="8dp"/>
<ImageView
android:id="@+id/iv_main_6"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/song"
android:clickable="true"
android:onClick="onClick"
android:layout_margin="8dp"/>
</LinearLayout>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center_horizontal">
<TextView
android:layout_width="96dp"
android:layout_height="wrap_content"
android:text="Bottom-up, row by row"
android:gravity="center"
android:layout_margin="8dp"/>
<TextView
android:layout_width="96dp"
android:layout_height="wrap_content"
android:text="Float down "
android:gravity="center"
android:layout_margin="8dp"/>
<TextView
android:layout_width="96dp"
android:layout_height="wrap_content"
android:text="From right to left"
android:gravity="center"
android:layout_margin="8dp"/>
</LinearLayout>
<ImageView
android:id="@+id/iv_main_7"
android:layout_width="96dp"
android:layout_height="96dp"
android:src="@drawable/insta"
android:layout_marginTop="10dp"
android:layout_gravity="center"
android:clickable="true"
android:onClick="onClick"
android:layout_margin="8dp"
/>
<LinearLayout
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="horizontal"
android:gravity="center">
<TextView
android:id="@+id/tv_main_1"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="flat controls"
android:layout_margin="16dp"
android:gravity="center"
android:textStyle="bold"
android:clickable="true"
android:onClick="onClick"
android:textSize="16sp"
android:textColor="#009688"
/>
</LinearLayout>
<Button
android:id="@+id/btn_main_reset"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="20dp"
android:layout_gravity="center"
android:onClick="onClick"
android:text="reset" />
</LinearLayout>
Step 4: MainActivity Java class Code Image Particle animation
package com.codeplayon.particlesmasher;
import androidx.appcompat.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageView;
import android.widget.TextView;
import android.widget.Toast;
import com.codeplayon.imagepartical.ParticleSmasher;
import com.codeplayon.imagepartical.SmashAnimator;
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
private ParticleSmasher mSmasher;
private ImageView mIv1, mIv2, mIv3, mIv4, mIv5, mIv6,mIv7;
private Button mBtnReset;
private TextView mTv1;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
mSmasher = new ParticleSmasher(this);
init();
}
private void init() {
mIv1 = (ImageView) findViewById(R.id.iv_main_1);
mIv2 = (ImageView) findViewById(R.id.iv_main_2);
mIv3 = (ImageView) findViewById(R.id.iv_main_3);
mIv4 = (ImageView) findViewById(R.id.iv_main_4);
mIv5 = (ImageView) findViewById(R.id.iv_main_5);
mIv6 = (ImageView) findViewById(R.id.iv_main_6);
mIv7= (ImageView) findViewById(R.id.iv_main_7);
mBtnReset = (Button) findViewById(R.id.btn_main_reset);
mTv1 = (TextView) findViewById(R.id.tv_main_1);
mIv1.setOnClickListener(this);
mIv2.setOnClickListener(this);
mIv3.setOnClickListener(this);
mIv4.setOnClickListener(this);
mIv5.setOnClickListener(this);
mIv6.setOnClickListener(this);
mIv7.setOnClickListener(this);
mBtnReset.setOnClickListener(this);
mTv1.setOnClickListener(this);
}
@Override
public void onClick(final View view) {
switch (view.getId()) {
case R.id.btn_main_reset:
reset();
break;
case R.id.iv_main_1:
mSmasher.with(view).start();
break;
case R.id.iv_main_2:
mSmasher.with(view)
.setStyle(SmashAnimator.STYLE_DROP)
.setDuration(1500)
.setStartDelay(300)
.setHorizontalMultiple(2)
.setVerticalMultiple(2)
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorStart() {
super.onAnimatorStart();
}
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
}
})
.start();
break;
case R.id.iv_main_3:
mSmasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_TOP)
.setHorizontalMultiple(2)
.setVerticalMultiple(3)
.setDuration(2500)
.start();
break;
case R.id.iv_main_4:
mSmasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_BOTTOM)
.setHorizontalMultiple(2)
.setVerticalMultiple(4)
.setDuration(3000)
.setStartDelay(500)
.start();
break;
case R.id.iv_main_5:
mSmasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_LEFT)
.setHorizontalMultiple(2)
.setVerticalMultiple(2)
.setDuration(1500)
.start();
break;
case R.id.iv_main_6:
mSmasher.with(view)
.setStyle(SmashAnimator.STYLE_FLOAT_RIGHT)
.setHorizontalMultiple(2)
.setVerticalMultiple(2)
.setDuration(1500)
.start();
break;
case R.id.iv_main_7:
mSmasher.with(view)
.setVerticalMultiple(9)
.setHorizontalMultiple(3)
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
Toast.makeText(MainActivity.this, "", Toast.LENGTH_LONG).show();
}
}).start();
break;
case R.id.tv_main_1:
mSmasher.with(view)
.setVerticalMultiple(9)
.setHorizontalMultiple(3)
.addAnimatorListener(new SmashAnimator.OnAnimatorListener() {
@Override
public void onAnimatorEnd() {
super.onAnimatorEnd();
mSmasher.reShowView(view);
Toast.makeText(MainActivity.this, "", Toast.LENGTH_LONG).show();
}
}).start();
break;
}
}
private void reset() {
mSmasher.reShowView(mIv1);
mSmasher.reShowView(mIv2);
mSmasher.reShowView(mIv3);
mSmasher.reShowView(mIv4);
mSmasher.reShowView(mIv5);
mSmasher.reShowView(mIv6);
mSmasher.reShowView(mIv7);
mSmasher.reShowView(mTv1);
mTv1.setVisibility(View.VISIBLE);
}
}
Now you can run your App and check the ParticleSmasher animation in android with 7 different types. Click on the Image the Animation is starting for the rest you can click on the rest button and all images again showing.
Read More:-
- Codeplayon Jetpack Compose Tutorial
- Codeplayon Android Tutorial
- Codeplayon Flutter Tutorial
- Codeplayon on Github
