Requisitos previos:
- Fundamentos de desarrollo de aplicaciones de Android para principiantes
- Guía para instalar y configurar Android Studio
- ¿Cómo crear/comenzar un nuevo proyecto en Android Studio?
- Ejecutando tu primera aplicación de Android
- Cómo agregar Lottie Animation en una aplicación de Android
- Clase MediaPlayer en Android
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