How to Build a Simple e-Crackers App using Android?

Pre-requisites:

• Android App Development Fundamentals for Beginners
• Guide to Install and Set up Android Studio
• How to Create/Start a New Project in Android Studio?
• Running your first Android app
• How to add Lottie Animation in an Android App
• MediaPlayer Class in Android

In this article, we are going to build a simple e-Crackers app. It consists of a single RelativeLayout. Its background is set to black. Then we are going to populate images of stars randomly on the layout, to get a feel of a sky. Then we are going to add OnTouchListener to the layout, to detect taps. Once the user taps on the screen, it bursts fireworks. We are going to get the X and Y coordinates of the touched position, and use Lottie files for the fireworks, along with MediaPlayer class for the sound effects. We are going to build this entire application in Android using Java. 

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

Before moving to the coding section let’s add the necessary dependencies. The only dependency we have to add for the project is for Lottie files. Lottie is an open-source animation file format that can be used inside our application. Go to app-level build.gradle file and add the following dependency and click on sync now.

def lottieVersion = "3.4.0"
implementation "com.airbnb.android:lottie:$lottieVersion"

Here is a reference,

Step 3: Add resource files

Let’s add the necessary vector assets and drawable resource files. Go to app > res > drawable and add the following vector file for stars.

star.xml (Star Icon)

XML

<vector android:height="24dp" android:tint="#FFFFFF"
    android:viewportHeight="24" android:viewportWidth="24"
    android:width="24dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="@android:color/white" android:pathData="M12,17.27L18.18,21l-1.64,-7.03L22,9.24l-7.19,-0.61L12,2 9.19,8.63 2,9.24l5.46,4.73L5.82,21z"/>
</vector>

preview:

star.xml

Now go to the resources folder, right-click > new > Android Resource Directory.

A dialog box appears. Name the directory raw and set resource type to raw.

Now add the following JSON file to the raw directory.

fireworks.json

{"v":"5.3.4","fr":24,"ip":0,"op":55,"w":1000,"h":1000,"nm":"Comp 1","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"roj","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":6,"s":[0],"e":[84]},{"t":23}],"ix":10},"p":{"a":0,"k":[500,500,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":6,"s":[100,100,100],"e":[157,157,100]},{"t":10}],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":6,"op":36,"st":6,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"Ama","refId":"comp_3","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":20,"s":[100],"e":[1]},{"t":29}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":4,"s":[0],"e":[85]},{"t":29}],"ix":10},"p":{"a":0,"k":[497.25,498.5,0],"ix":2},"a":{"a":0,"k":[496.75,500.5,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":4,"s":[54,54,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[100,100,100],"e":[134,134,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":17,"s":[134,134,100],"e":[96,96,100]},{"t":19}],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":4,"op":34,"st":4,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"nar","refId":"comp_5","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":15,"s":[100],"e":[0]},{"t":20}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":5,"s":[0],"e":[46]},{"t":21}],"ix":10},"p":{"a":0,"k":[497.5,499.25,0],"ix":2},"a":{"a":0,"k":[497.5,499.25,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":1,"s":[30,30,100],"e":[100,100,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":5,"s":[100,100,100],"e":[123,123,100]},{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":8,"s":[123,123,100],"e":[273.393,273.393,100]},{"t":14}],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0}]},{"id":"comp_1","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"ROJO","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-301.855,"ix":10},"p":{"a":0,"k":[497.875,499.375,0],"ix":2},"a":{"a":0,"k":[496.944,499.56,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"ROJO","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-252.88,"ix":10},"p":{"a":0,"k":[497.875,499.375,0],"ix":2},"a":{"a":0,"k":[496.944,499.56,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"ROJO","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-198.233,"ix":10},"p":{"a":0,"k":[497.875,499.375,0],"ix":2},"a":{"a":0,"k":[496.944,499.56,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"ROJO","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-149.663,"ix":10},"p":{"a":0,"k":[497.875,499.375,0],"ix":2},"a":{"a":0,"k":[496.944,499.56,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"ROJO","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-99.267,"ix":10},"p":{"a":0,"k":[497.875,499.375,0],"ix":2},"a":{"a":0,"k":[496.944,499.56,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":0,"nm":"ROJO","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-45.613,"ix":10},"p":{"a":0,"k":[497.875,499.375,0],"ix":2},"a":{"a":0,"k":[496.944,499.56,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":0,"nm":"ROJO","refId":"comp_2","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":10.106,"ix":10},"p":{"a":0,"k":[497.875,499.375,0],"ix":2},"a":{"a":0,"k":[496.944,499.56,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0}]},{"id":"comp_2","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":11,"s":[100],"e":[0]},{"t":14}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[500,500,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":1,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[0.75,-5.625],[-3.625,0],[3.375,-0.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[5.125,-10.125],[-3.625,0],[9.875,-1.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":3,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[5.125,-10.125],[-3.625,0],[9.875,-1.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[19.625,-19.625],[5.875,-4.5],[25.375,-7.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":5.412,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[19.625,-19.625],[5.875,-4.5],[25.375,-7.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[67.125,-43.625],[30.875,-18.5],[71.375,-36.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":7.529,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[67.125,-43.625],[30.875,-18.5],[71.375,-36.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[135.625,-79.625],[73.875,-42],[136.375,-77.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":11,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[135.625,-79.625],[73.875,-42],[136.375,-77.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[219.125,-134.125],[194.125,-119.75],[219.375,-133.5]],"c":true}]},{"t":14}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.125670728496,0.339342573577,0.65306372549,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformar"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0}]},{"id":"comp_3","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"AMARILLO","refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":298.463,"ix":10},"p":{"a":0,"k":[497.75,500.5,0],"ix":2},"a":{"a":0,"k":[497.731,499.593,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"AMARILLO","refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":257.603,"ix":10},"p":{"a":0,"k":[497.75,500.5,0],"ix":2},"a":{"a":0,"k":[497.731,499.593,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"AMARILLO","refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":211.954,"ix":10},"p":{"a":0,"k":[497.75,500.5,0],"ix":2},"a":{"a":0,"k":[497.731,499.593,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"AMARILLO","refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":166.163,"ix":10},"p":{"a":0,"k":[497.75,500.5,0],"ix":2},"a":{"a":0,"k":[497.731,499.593,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"AMARILLO","refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":119.533,"ix":10},"p":{"a":0,"k":[497.75,500.5,0],"ix":2},"a":{"a":0,"k":[497.731,499.593,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":0,"nm":"AMARILLO","refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":69.838,"ix":10},"p":{"a":0,"k":[497.75,500.5,0],"ix":2},"a":{"a":0,"k":[497.731,499.593,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":0,"nm":"AMARILLO","refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":24.35,"ix":10},"p":{"a":0,"k":[497.75,500.5,0],"ix":2},"a":{"a":0,"k":[497.731,499.593,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":0,"nm":"AMARILLO","refId":"comp_4","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-22.692,"ix":10},"p":{"a":0,"k":[497.75,500.5,0],"ix":2},"a":{"a":0,"k":[497.731,499.593,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0}]},{"id":"comp_4","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":13,"s":[100],"e":[0]},{"t":16}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[496.25,499.875,0],"ix":2},"a":{"a":0,"k":[-3.75,-0.125,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":2,"s":[229,229,100],"e":[176,176,100]},{"t":15}],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":3,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[0.75,-5.625],[-3.625,0],[3.375,-0.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[5.125,-10.125],[-3.625,0],[9.875,-1.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":5,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[5.125,-10.125],[-3.625,0],[9.875,-1.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[19.625,-19.625],[5.875,-4.5],[25.375,-7.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":7.412,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[19.625,-19.625],[5.875,-4.5],[25.375,-7.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[67.125,-43.625],[30.875,-18.5],[71.375,-36.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":9.529,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[67.125,-43.625],[30.875,-18.5],[71.375,-36.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[135.625,-79.625],[73.875,-42],[136.375,-77.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":13,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[135.625,-79.625],[73.875,-42],[136.375,-77.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[219.125,-134.125],[194.125,-119.75],[219.375,-133.5]],"c":true}]},{"t":16}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.985922181373,0.777212404737,0.310502085966,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformar"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0}]},{"id":"comp_5","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-329.986,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-296.86,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-266.081,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-236.454,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-208.651,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-180.777,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":7,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-153.807,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":8,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-124.081,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":9,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-95.258,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":10,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-64.449,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":11,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":-31.972,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0},{"ddd":0,"ind":12,"ty":0,"nm":"NARANJA","refId":"comp_6","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[498.25,499.75,0],"ix":2},"a":{"a":0,"k":[498.25,499.75,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":30,"st":0,"bm":0}]},{"id":"comp_6","layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 1","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.833],"y":[0.833]},"o":{"x":[0.167],"y":[0.167]},"n":["0p833_0p833_0p167_0p167"],"t":19,"s":[100],"e":[0]},{"t":24}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[500,500,0],"ix":2},"a":{"a":0,"k":[0,0,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":2,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[5.125,-10.125],[-3.625,0],[9.875,-1.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[19.625,-19.625],[5.875,-4.5],[25.375,-7.75]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":7,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[19.625,-19.625],[5.875,-4.5],[25.375,-7.75]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[67.125,-43.625],[30.875,-18.5],[71.375,-36.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":12,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[67.125,-43.625],[30.875,-18.5],[71.375,-36.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[135.625,-79.625],[73.875,-42],[136.375,-77.25]],"c":true}]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":19,"s":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[135.625,-79.625],[73.875,-42],[136.375,-77.25]],"c":true}],"e":[{"i":[[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0]],"v":[[219.125,-134.125],[194.125,-119.75],[219.375,-133.5]],"c":true}]},{"t":25}],"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0,0,0,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":0,"ix":5},"lc":1,"lj":1,"ml":4,"ml2":{"a":0,"k":4,"ix":8},"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"fl","c":{"a":0,"k":[0.151382551006,0.753048406863,0.606834680894,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transformar"}],"nm":"Shape 1","np":3,"cix":2,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":30,"st":0,"bm":0}]}],"layers":[{"ddd":0,"ind":1,"ty":0,"nm":"1","refId":"comp_0","sr":1.15,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[672,664,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":0,"k":[76,76,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":25,"op":66.4,"st":25,"bm":0},{"ddd":0,"ind":2,"ty":0,"nm":"1","refId":"comp_0","sr":1.15,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[332,676,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":0,"k":[76,76,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":13,"op":54.4,"st":13,"bm":0},{"ddd":0,"ind":3,"ty":0,"nm":"1","refId":"comp_0","sr":1.15,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[280,288,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":1,"k":[{"i":{"x":[0.833,0.833,0.833],"y":[0.833,0.833,0.833]},"o":{"x":[0.167,0.167,0.167],"y":[0.167,0.167,0.167]},"n":["0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167","0p833_0p833_0p167_0p167"],"t":28.2,"s":[132.4,132.4,100],"e":[61.4,61.4,100]},{"t":39.7004882881608}],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":19,"op":60.4,"st":19,"bm":0},{"ddd":0,"ind":4,"ty":0,"nm":"1","refId":"comp_0","sr":1.15,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[668,304,0],"ix":2},"a":{"a":0,"k":[500,500,0],"ix":1},"s":{"a":0,"k":[72.4,72.4,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":5,"op":46.4,"st":5,"bm":0},{"ddd":0,"ind":5,"ty":0,"nm":"1","refId":"comp_0","sr":1.15,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[497.438,499.5,0],"ix":2},"a":{"a":0,"k":[497.438,499.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":11,"op":52.4,"st":11,"bm":0},{"ddd":0,"ind":6,"ty":0,"nm":"1","refId":"comp_0","sr":1.15,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[497.438,499.5,0],"ix":2},"a":{"a":0,"k":[497.438,499.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":31,"op":72.4,"st":31,"bm":0},{"ddd":0,"ind":7,"ty":0,"nm":"1","refId":"comp_0","sr":1.15,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[497.438,499.5,0],"ix":2},"a":{"a":0,"k":[497.438,499.5,0],"ix":1},"s":{"a":0,"k":[100,100,100],"ix":6}},"ao":0,"w":1000,"h":1000,"ip":0,"op":41.4,"st":0,"bm":0}],"markers":[]}

Then add any of your own mp3 files to the raw directory for sound effects and name it, burst.mp3. Once you’ve added both the fireworks.json file and burst.mp3 file to the raw directory, it will look something like this,

Step 4: Working with the activity_main.xml file

We have added the necessary resource files for the application we are building. Now, Let’s design the UI for our application. Add this XML file to app > res > layout. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout
    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:id="@+id/layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@color/black"
    tools:context=".MainActivity" />

Preview:

Now we have added all the necessary resource files.

Step 5: Working with the MainActivity.java file

Now it’s time to initialize everything in MainActivity and implement functions to populate stars and implement ontouchlistener. Here is the complete code for MainActivity. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

package com.cs.ecrackers;

import androidx.appcompat.app.AppCompatActivity;

import android.annotation.SuppressLint;
import android.content.pm.ActivityInfo;
import android.graphics.Point;
import android.media.MediaPlayer;
import android.os.Bundle;
import android.util.Log;
import android.view.Display;
import android.view.MotionEvent;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.Toast;

import com.airbnb.lottie.LottieAnimationView;

import java.util.Random;

public class MainActivity extends AppCompatActivity {

    int maxX,maxY;
    RelativeLayout layout;
    RelativeLayout.LayoutParams lp;

    @SuppressLint("ClickableViewAccessibility")
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

          // to hide action bar
        getSupportActionBar().hide();

          // to set orientation to potrait
        setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);

        // to get max value for x, y coordinates
        setMaxCoordinates();

        // initializing relative layout
        layout = (RelativeLayout) findViewById(R.id.layout);

          // layout params
        lp = new RelativeLayout.LayoutParams(maxX, maxY);

        // to populate stars randomly on screen
        populateStarsRandomly();

        // on touch listener for relative layout
        layout.setOnTouchListener((view, motionEvent) -> {
            // get coordinates
            int x = (int) motionEvent.getX() - 250;
            int y = (int) motionEvent.getY() - 250;

            // on touch
            if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) {
                    burstFireworks(x,y);
            }
            return true;
        });

    }

    // to burst fireworks
    private void burstFireworks(int x, int y) {
        RelativeLayout.LayoutParams lp = new RelativeLayout.LayoutParams(maxX, maxY);
        // creating lottieAnimation view
        LottieAnimationView cracker = new LottieAnimationView(this);
        cracker.setLayoutParams(lp);
        // initializing lottie view from json file
        cracker.setAnimation(R.raw.fireworks);
        // setting height and width of lottie file
        cracker.getLayoutParams().height = 500;
        cracker.getLayoutParams().width = 500;
        // setting positions of lottie file
        cracker.setX(x);
        cracker.setY(y);
        // adding lottieanimationview to relative layout
        layout.addView(cracker);
        cracker.playAnimation();
        // function to generate sound
        burstSound();
    }

    // function to generate crackers sound
    private void burstSound() {
        MediaPlayer mp = MediaPlayer.create(this,R.raw.burst);
        mp.start();
    }

    // function to populate stars randomly on screen
    private void populateStarsRandomly() {

        float x,y;

        // random class to generate random coordinates
        Random random = new Random();
        // for loop to place 100 stars randomly
        for(int i=0; i<100; ++i){
            // generating random x coordinate
            x = random.nextInt(maxX);
            // generating random y coordinate
            y = random.nextInt(maxY);
            // placing star in x,y coordinate
            populateXY(x,y);
        }
    }

    // function to create and place star in x,y coordinates
    private void populateXY(float x, float y) {
        // creating imageview
        ImageView ivStar = new ImageView(this);
        ivStar.setLayoutParams(lp);
        // initializing image from drawable
        ivStar.setImageResource(R.drawable.star);
        // setting height and width of image
        ivStar.getLayoutParams().height = 15;
        ivStar.getLayoutParams().width = 15;
        // setting positions of image
        ivStar.setX(x);
        ivStar.setY(y);
        // adding imageview to relative layout
        layout.addView(ivStar);
    }

    // setting max coordinates of screen
    private void setMaxCoordinates() {
        Display disp = getWindowManager().getDefaultDisplay();
        Point mdispSize = new Point();
        disp.getSize(mdispSize);
        maxX = mdispSize.x;
        maxY = mdispSize.y;
    }
}

Code Explanation:

1. The code starts by declaring the package name of the class.
2. The next line imports all of the necessary classes for this project, including androidx.appcompat.app., which is needed to run an activity in AndroidX mode.
3. The code then declares a variable called “mediaPlayer” that will be used later on in this program and assigns it a value from a Bundle object that was passed into this method as an argument from another method call (the constructor).
4. This bundle contains information about what media file should play when the app starts up, so we can use it to set up our MediaPlayer instance with some default values before starting playback.
5. Next, there’s a variable called “activityInfo” which is declared as being of type ActivityInfo and assigned its value from another argument passed into this method (from MainActivity#onCreate()).
6. This variable will hold information about whether or not your application has been granted permission to access location data while running in the background or foreground – if you don’t have permission, you’ll get an error message telling you so after trying to start playing any media files within your app!
7. Next comes two variables: one named “imageView”, which holds an ImageView object; and one named “
8. The code is a simple example of how to use the Lottie library.
9. The code creates an Activity with a RelativeLayout and ImageView.
10. The code also includes a call to the LottieAnimationView object which will render the animation in its entirety.
11. public class MainActivity extends AppCompatActivity { private static final String TAG = “MainActivity”; private ImageView image; private RelativeLayout layout; private boolean isPlaying = false; private MediaPlayer player; private LottieAnimationView lvw; //Lottie Animation View object that renders the animation in its entirety.
12. public void onCreate(Bundle savedInstanceState) { super.onCreate
13.  The code starts by creating a RelativeLayout.
14.  The code then creates an instance of the RelativeLayout and sets its layout parameters to match the activity_main.xml file in res/layout-land/activity_main.xml using setContentView().
15. The next line hides the action bar, which is done with getSupportActionBar().hide(); this method returns true if it was successful or false otherwise.
16. Next, we set our orientation to portrait mode with ActivityInfo.SCREEN_ORIENTATION_PORTRAIT; this is done with setRequestedOrientation(), which takes two arguments: one for what type of screen you want (portrait or landscape) and another for what orientation you want (0 for portrait, 1 for landscape).
17. The code attempts to set the orientation of the activity to portrait mode.
18. The code also hides the action bar.
19. The code starts by setting the max coordinates for x and y.
20. The next line initializes a RelativeLayout object with the layout params of (maxX, maxY).
21. Then it calls populateStarsRandomly() to randomly place stars on screen.
22. Finally, it sets an OnTouchListener on the RelativeLayout object that will be called when a touch is detected on the screen.
23. The code starts by getting coordinates from motion event using getX() and getY().
24. It then checks if there was a down action in MotionEvent class which means that user touched something below him/herself.
25. If so, it gets coordinates of where they touched and analyzes them to see if they are within range of stars or not.
26. The code is a part of the code that you need to comprehend in order to understand how the app works.
27. The following code shows the entire code that needs to be understood in order to comprehend how the app works.
28. // on touch listener for relative layout layout.setOnTouchListener((view, motionEvent) -> { int x = (int) motionEvent.getX() – 250; int y = (int) motionEvent.getY() – 250; if (motionEvent.getAction() == MotionEvent.ACTION_DOWN) 
29.  The code starts by creating a RelativeLayout.LayoutParams object with the maxX and maxY values.
30.  The code then creates an LottieAnimationView object, passing in this as the parent view of the animation.
31. Finally, it sets up the layout params for the animation to be at x=maxX and y=maxY.
32. The code starts by creating a RelativeLayout.LayoutParams object with the maxX and maxY values This is done so that when we create our LottieAnimationView later on, we can set its layout params to these specific values so that they will always be visible on screen no matter what size or position our app’s window is resized to or where it is positioned on screen (x-axis).
33. Next, we create an LottieAnimationView object, passing in this as its parent view of the animation This line creates an instance of LottieAnimationView which will animate whatever views are inside of it using lottie animations (see below) .
34. We pass in this because all animations need something to animate them from – otherwise they would just run forever without stopping!
35. So if you want your animation to start from some other point
36. The code creates a RelativeLayout.LayoutParams object and sets it to the maxX and maxY values of the RelativeLayout object.
37. The code then creates an LottieAnimationView object, which is set to the layout params created in step 1.
38. The code starts by initializing the lottie view from a json file.
39. The code then sets the height and width of the lottie file to 500 pixels wide and tall, respectively.
40. Next, it sets positions for where on screen the lottie will appear.
41. Finally, it adds the lottie animation view to a relative layout in order to play its animation when run on an Android device.
42. The code begins by initializing lottie view from json file.
43. Next, the code sets height and width of lottie file.
44. The code then sets positions of lottie file.
45. Lastly, the code adds lottieanimationview to relative layout.
46. The code starts with a function to generate sound.
47. The code then has a function that generates crackers sound.
48. Finally, the code has a function that randomly places 100 stars on screen.
49. The first thing you need to do is understand what the functions are doing and how they work together.
50. In this case, there is one main function called burstSound().
51. This function takes in an argument of type MediaPlayer which creates an instance of MediaPlayer object for use by the program.
52. Next, it starts playing audio using mp variable (the created media player).
53. The code creates a MediaPlayer instance, which is then used to play the sound file burst.mp3.
54. The sound file is played in a loop 100 times so that it will continuously play until the user presses any key on the keyboard.
55. The next part of this code creates 100 random stars and places them randomly on screen.
56. The first line of this block generates a random class to generate coordinates for x and y values.
57. Then, an infinite loop iterates through these two values with each iteration generating another star at random coordinates on screen.
58. The code starts with a function that creates and places a star in the x,y coordinates.
59. The function is called populateXY().
60. This function has two parameters: x and y.
61. These are passed into the function as arguments.
62. The first thing this code does is create an ImageView object ivStar using new ImageView(this).
63. It then sets its layoutParams to lp which means it will be positioned at (0,0) on the screen.
64. Next, it initializes an image from drawable resource R.drawable.star by setting its imageResource to R.drawable.star and setImageX() and setImageY() methods to 15 pixels so that it can be placed in the center of the screen horizontally or vertically respectively when displayed on device screens with different dimensions such as phones or tablets etc.. Then finally, it sets X position of ivStar to x coordinate while Y position of ivStar is set to y coordinate before adding them both together for placement purposes onto relative layout layout where they are added together via addView() method call after being created by calling new ImageView(this).
65. The code is used to create and place a star in the x,y coordinate.
66. The code above creates an imageview with the resource R.drawable.star, sets its height and width to 15 pixels, places it at the coordinates (x, y) on the screen and adds it to the relative layout.
    

That’s it. Now we can run the application. Make sure that your project contains all the following files.

Here is the preview of the final application.

Output: