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)

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. 

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.

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: