Android tutorial

Android Image Particle animation 7 different type library

Android Image Particle animation library
426views

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