Todo lo que necesitas saber sobre tecnología

Stickers de whatsapp: Cómo hacerlos paso a paso

Compartir en redes sociales:
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

Bienvenidos a ésta sección, donde esta vez te mostraremos una de varias alternativas para hacer tus propios Stickers de Whatsapp. Esta puede ser la mejor manera, ya que, al realizar la app puedes monetizarla publicándola en Play Store.

Realmente no son necesarios conocimientos previos en programación, ya que se explicará de manera sencilla qué es lo que tienes que modificar. Sin embargo, sí es recomendable conoce lo básico, además de estar familiarizado con Android Studio, ya que es el IDE que vamos a utilizar.

Pasos

Para comenzar, debes tener a la mano la siguiente lista, si no cuentas con algún programa o archivo no te preocupes, te dejo el link adjunto en el nombre de lo que vas a necesitar para que lo descargues.

Antes de comenzar a desarrollar nuestra app de Stickers para whatsapp, debes tener a la manos las imágenes que quieres en tu app previamente recortadas. Estos son los requisitos con los que deben contar tus imágenes:

  • Tamaño exacto de 512×512 píxeles.
  • Formato PNG.
  • La imagen del pack debe ser de 200×200 píxeles o inferior a 50kb.

Ya que cuentes con lo anterior es hora de comenzar a desarrollar tu app.

Desarrollando la app

Comienza por abrir tu Android Studio, Selecciona File el cual se encuentra en la parte superior izquiera del IDE, posteriormente seleccionas la opción Open… Justo como se muestra en la imagen:

Stickers de Whatsapp

Al haber seleccionado tendrás que buscar la dirección donde descomprimiste el archivo Sticker-master. Al encontrarlo seleccionamos la carpeta de nombre Android y pulsamos OK.

Stickers de Whatsapp

Deja que se carguen los archivos necesarios para tener una pantalla así:

Stickers de whatsapp

Lo siguiente es desplegar la carpeta App y Gradle Scrips para que puedas visualizar su contenido, los únicos archivos que modificarás en esta ocasión son:

  • build.gradle(module: app)
  • Strings(dentro de la carpeta res)
  • assets
  • contents.json
  • mipmap(dentro de la carpeta res)

Comenzarás modificando primero el archivo build.gradle(module: app), sólo dos lineas son las que vas a modificar, la primera es:
applicationId «com.example.samplestickerapp»

A grandes rasgos cada app para Android tiene un ID de aplicación exclusivo similar a un nombre de paquete de Java; por ejemplo, com.example.myapp. Este ID permite identificar de manera exclusiva tu app en el dispositivo y en Google Play Store .

Fuente: Cómo establecer el ID de aplicación

La parte que tendrás que modificar es únicamente «.samplestickerapp», pon el nombre que más te agrade.

Ahora toca modificar a def contentProviderAuthority = applicationId + «.stickercontentprovider» del cual te dejo una breve explicación:

Un proveedor de contenido administra el acceso a un repositorio central de datos. Un proveedor se implementa como una o más clases en una aplicación de Android, junto con elementos en el archivo de manifiesto. Una de tus clases implementa una subclase ContentProvider, que es la interfaz entre tu proveedor y otras aplicaciones. Si bien los proveedores de contenido permiten que los datos estén disponibles para otras aplicaciones, puedes tener actividades en tu aplicación que le permitan al usuario consultar y modificar los datos administrados por tu proveedor.

Fuente: Cómo crear un proveedor de contenido

Tendrás que cambiar la parte «.stickercontentprovider» por lo que te plazca, sólo no olves dejar el punto intacto.

Stickers de whatsapp
El contenido a modificar se encuentra en la linea 10 y 16

Una vez hecho esto, entra al archivo Strings dentro de la carpeta strings. La linea a modificar es:
<string name=»app_name»>WhatsAppSampleStickerApp</string>
Este es el nombre con el cual se identificará tu aplicación de stickers de whatsapp una vez instalada en cualquier celular, modifícala por el nombre que quieras.

Recuerda que lo único que tienes que modificar es lo que está dentro de > WhatsAppSampleStickerApp <

stickers de whatsapp
La linea a modificar es la 3

Para ingresar imágenes

Hecho lo anterior, ahora debes desplegar el fichero con el número 1 que se encuentra en assets, al hacerlo obtendremos varias imagenes con formato webp que van del 01 hasta el 25.

Probablemente te haz percatado que se encuentra una imagen al final llamada tray_Cuppy.png, dicha imagen es la que cumple el rol de ser la principal al mostrar la descripción del paquete.

Paso a paso

Lo primero que debes hacer es eliminar todas las imágenes dentro de la carpeta con el número 1, una vez realizado, copia tus imágenes previamente recortadas y guardadas en formato PNG para pegarlas dentro de la carpeta 1.

ya que hayas realizado lo anterior ya deberías tener tus imágenes dentro de la carpeta 1, darás doble click sobre cualquier imagen, menos sobre la que usarás de portada. Al hacerlo se abrirá la imagen en la parte derecha y darás click derecho sobre ella.

seleccionas la opción «Convert to Webp» y posteriormente quita la selección del campo «Skip images with transparency/alpha channel» se abrirá otra ventana que muestra qué tanta perdida de calidad quieres, recomiendo dejarla tal cual y sólo clickear sobre finish.

Haces lo mismo con las siguientes imágenes dejando con formato png únicamente la imagen que desea como cabecera del pack, es importante recordar que debe tener un tamaño máximo de 50kb lo cual se puede tener con un tamaño de 200×200.

Modifica el archivo contents.json

Es hora de hacer que nuestras imágenes se puedan agregar como stickers de whatsapp. Esto es muy sencillo, ingresa al archivo contents.json el cual se encuentra en la carpeta assets, al hacerlo obtendrás esto:

stickers de whatsapp
Lo que está en los cuadros rojos es lo que vamos a modificar.

Lo único que vas a modificar es lo que está dentro de las comillas después de los dos puntos:

  • identifier: «nombre de la carpeta(en este caso es la 1)»,
  • «name»: «nombre de tu pack de stickers»,
  • «publisher»: «nombre del creador»,
  • «tray_image_file»: «nombre de la imagen con el formato png(menos de 50kb)»
  • «image_file»: «nombre del tu imagen con formato webp para agregar a la app de stickers»
  • Puedes eliminar el campo de emojis junto con la «coma» después de las comillas de webp.

En este caso sólo utilicé 3 imágenes así que los demás campos no me sirven, así que me queda de esta manera:

stickers de whatsapp

Es de suma importancia que dejes únicamente los campos que vas a utilizar y por supuesto coincida con el número de imágenes que vas a agregar, ya que si dejas un espacio con una imagen inexistente, el programa te va a dar error.

Además te hago mención que cada carpeta debe tener un máximo de 30 imágenes Webp que usarás como stickers y 1 imagen PNG que utilizarás como principal del pack.

En caso que quieras agregar más de un pack, da click derecho sobre la carpeta assets, new y directory:

stickers de whatsapp

Le asignas un nombre a la carpeta(yo le asigne el número 2) y presionas sobre OK. Hecho esto se va a generar la carpeta 2 debajo de tu carpeta 1, haces el mismo proceso de copiar imágenes previamente listas y pegar en la carpeta, entonces repites el mismo proceso de convertir a webp y ¡Listo!

Ahora vas a modificar el archivo contents.json de esta manera:

  • Camiar nombre del identifier por el de la nueva carpeta
  • Cambiar el nombre del pack
  • Cambiar la imagen principal en formato png

Una vez realizado vamos al siguiente paso.

Creación de icono de la app

Es importante y se recomienda tener una imagen la cual va a ser la que identificará a la aplicación una vez instalada en tu celular. Para esto nos dirigimos a res y damos click derecho sobre mipmap, posteriormente seleccionamos new e imagen asset.

stickers de whatsapp

Ahora lo que obtienes será esto:

stickers de whatsapp
Lo que está en rojo es lo que vas a utilizar

En path vas a buscar la imagen de tu agrado, una vez que la tengas seleccionas y listo, en background layer puedes modificar el color de donde que en este caso es verde, puedes usar tanto una imagen como color.

Una vez hayas terminado seleccionas Next y en la siguiente ventana te va a mostrar en rojo los archivos que serán sustituidos, sólo selecciona Finish.

Una vez realizado esto es tiempo de pasar a la etapa final.

Hora de probar tu aplicación

Ahora sí viene lo chido.jpeg

Es importante que pruebes tu aplicación una vez hayas realizado todos los pasos anteriores, de lo contrario y muy probablemente obtendrás error al ejecutar.

Existen dos métodos, el primero es creando un dispositivos virtual, si tu procesador no es superior a un i5 y tampoco tiene al menos 4 gb de memoria Ram, no te recomiendo ésta forma, Pero no te preocupes, ya que puedes conectar tu celular a tu ordenador y elegir ésta opción.

Esta opción se encuentra en la barra superior del lado derecho, al conectar tu dispositivo la parte donde aparece Pixel 2 API 16 va a ser sustituida por tu dispositivo.

Para los que cumplen con los requisitos pueden crearse un dispositivo virtual. Una vez realizado, presiona el ícono de play a un lado del apartado donde aparece tu dispositivo conectado o virtual.

Esperas el tiempo que necesite Android studio para ejecutar tu programa, al terminar obtendrás esto(dependiendo si agregaste sólo un pack o más de uno):

¡Listo! ya tienes tu app de stickers de whatsapp. Ahora lo único que falta es crear el apk de tu aplicación.

Para esto nos vamos a la barra superior del menú, seleccionamos Build y posteriormente Generate Signed Bundle/APK…

stickers de whatsapp

Te abrirá una ventana donde seleccionaremos la parte de APK y click sobre Next. Entonces te aparecerá ésta ventana:

Como se muestra en el cuadro rojo seleccionará create new…

En key store path, vas a seleccionar la ruta donde quieres que se guarde dicha llave para que puedas utilizarla posteriormente. A la misma le asignas una contraseña, llenas los demás campos que yo previamente llené y seleccionas ok.

Nota: Es probable que te muestre una ventana de error pero solo seleccionas ok y listo.

Al hacer esto te va a regresar a la ventana principal donde vas a seleccionar Next. Una vez seleccionado te va a mostrar una ventana donde vas a indicar la dirección donde quieres que se guarde el archivo.

Después seleccionar la opción debug y la casilla V2(FULL APK Signature). Una vez hecho esto en finish y esperas a que Android Studio te muestre un mensaje en la parte inferior derecha de que ya se ha generado tu APK.

Ahora solo debes buscar tu archivo apk, pasarlo a tu celular y tus amigos para comenzar a disfrutar de tus propios ¡Stickers de whatsapp!

Te adjunto un proyecto que hice de ésta aplicación y así te des una idea de cómo puedes realizar esta app.

Stickers de whatsapp
Vista previa de la app, el link de descarga se encuentra abajo.

Con esto hemos finalizado este tutorial el cual espero haya sido de tu agrado, recuerda que cualquier duda o sugerencia podrás dejarla en la sección de comentarios la cual se encuentra al final de este post. ¡Nos leemos en la siguiente sección!

Podría interesarte

Compartir en redes sociales:
Share on Facebook
Facebook
Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

2 comentarios

  1. hgf

    Greetings! I know this is somewhat off topic but I
    was wondering which blog platform are you using for this site?
    I’m getting fed up of WordPress because I’ve had issues with hackers and I’m looking at alternatives for another platform.

    I would be great if you could point me in the direction of a good platform.

    • Javier Rodríguez

      Hi! This blog works under the WordPress platform, which has many security plugins you can use to keep up the security on your blog.
      Hope this answer was helpful to you!
      Greetings from the staff. 🙂

Deja una respuesta

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

Funciona con WordPress & Tema de Anders Norén

Volver arriba