¿Cómo construir una aplicación simple de e-Crackers usando Android?

Requisitos previos:

En este artículo, vamos a crear una aplicación sencilla de e-Crackers. Consiste en un solo RelativeLayout . Su fondo se establece en negro. Luego, vamos a poblar imágenes de estrellas al azar en el diseño, para tener una idea de un cielo. Luego vamos a agregar OnTouchListener al diseño, para detectar toques. Una vez que el usuario toca la pantalla, estalla fuegos artificiales. Vamos a obtener las coordenadas X e Y de la posición tocada, y usaremos los archivos Lottie para los fuegos artificiales, junto con la clase MediaPlayer para los efectos de sonido. Vamos a construir toda esta aplicación en Android usando Java

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación.

Paso 2: agregar dependencias

Antes de pasar a la sección de codificación, agreguemos las dependencias necesarias. La única dependencia que tenemos que agregar para el proyecto es para los archivos de Lottie . Lottie es un formato de archivo de animación de código abierto que se puede usar dentro de nuestra aplicación. Vaya al archivo build.gradle del nivel de la aplicación , agregue la siguiente dependencia y haga clic en sincronizar ahora.

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

Aquí hay una referencia,

Paso 3: Agregar archivos de recursos

Agreguemos los activos vectoriales necesarios y los archivos de recursos dibujables. Vaya a app > res > drawable y agregue el siguiente archivo vectorial para estrellas.

star.xml (icono de estrella)

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>

avance:

estrella.xml

Ahora vaya a la carpeta de recursos, haga clic con el botón derecho en > nuevo > Directorio de recursos de Android .

Aparece un cuadro de diálogo. Asigne un nombre al directorio raw y establezca el tipo de recurso en raw .

Ahora agregue el siguiente archivo JSON al directorio sin procesar .

fuegos artificiales.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":[]}

Luego agregue cualquiera de sus propios archivos mp3 al directorio sin procesar para obtener efectos de sonido y asígnele el nombre burst.mp3. Una vez que haya agregado el archivo fireworks.json y el archivo burst.mp3 al directorio sin procesar, se verá así:

Paso 4: trabajar con el archivo activity_main.xml

Hemos agregado los archivos de recursos necesarios para la aplicación que estamos construyendo. Ahora, diseñemos la interfaz de usuario para nuestra aplicación. Agregue este archivo XML a app > res > layout . A continuación se muestra el código para el archivo  activity_main.xml .

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" />

Avance:

Ahora hemos agregado todos los archivos de recursos necesarios.

Paso 5: trabajar con el archivo MainActivity.java

Ahora es el momento de inicializar todo en MainActivity e implementar funciones para llenar estrellas e implementar ontouchlistener. Aquí está el código completo para MainActivity. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

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;
    }
}

Eso es todo. Ahora podemos ejecutar la aplicación. Asegúrese de que su proyecto contenga todos los archivos siguientes.

Aquí está la vista previa de la aplicación final.

Producción:

Publicación traducida automáticamente

Artículo escrito por vishnuthulasidosss y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *