En este tutorial se explica cómo hacer el globo de notificación o badage usando un TextView en Android con Kotlin. Un Badage o insignia se ubica en la parte superior de los iconos para comunicar notificaciones o contadores.
Es posible agregar un Badage directamente. Pero en este tutorial lo haremos con un TextView.
Este es el resultado que obtendremos:
Pasos a seguir.
Este es el procedimiento que se hará en este tutorial.
1.- Primero Crearemos 2 botones, uno alargado y el otro cuadrado, en estos se mostrará la insignia de notificación.
2.- Luego agregaremos 2 TextView.
3.- Después creamos un background circular para agregarlo a los TextView
4.- Ubicamos los TextView en la parte superior derecha de cada botón.
5.- Por último, en Kotlin configuramos cuando mostrar y cuando esconder los TextView, que serán los globos de notificación.
1.- Creando los botones donde se mostrará el globo de notificación.
Tenemos una actividad, en la cual agregaremos 2 botones.
Como el objetivo del tutorial es explicar cómo hacer el globo de notificación, solo mostraremos el código de en XML de la actividad.
2.- Ahora agregamos 2 TextView, cada uno será el globo de notificación de un botón.
El TextView tendrá las siguientes características:
- Un fondo rojo circular
- Color de texto Negro y centrado.
- Se ubicará en la parte superior derecha del botón.
- Como el botón debe de medir como mínimo 48 dp, el tamaño del globo de notificación podría ser la mitad 24 dp a lo largo y alto.
Código XML:
3.- El fondo para los TextView
Hay varias maneras de conseguir un fondo circular rojo.
1.- Podemos crear un archivo XML con la forma de un círculo rojo y se lo agregamos como fondo al TextView.
2.- Crear una un círculo rojo en png. Lo agregamos a la carpeta drawables y se lo ponemos de fondo al TextView.
3.- Crear una imagen en Android en New ……, y agregarla de fondo, este es el que haremos.
Para crear el fondo rojo damos click derecho en la carpeta res, luego New y seleccionamos Image Asset.
Luego configuramos la imagen como se ve a continuación.
#im
Le damos el nombre de ic_circulo. Se creará en la carpeta de mipmaps.
Por ultimo lo agregamos cono fondo del TextView.
4.- Ubicando el TextView
Hay varias maneras de ubicar el TextView para que quede en la parte superior derecha.
En este caso usaremos el ConstraintLayout y ubicaremos el TextView de 2 formas distintas.
NOTA: Si el botón esta redondeado de las esquinas, hará que la insignia de notificación se vea mejor.
Para el botón alargado.
Para el botón alargado, el TextView simplemente lo colocaremos la parte de arriba conectada con la parte de arriba del botón, y la parte de la derecha conectada con la parte de la derecha del botón. Sin márgenes.
Para el botón cuadrado.
En este caso, esto botón no se redondea de las esquinas. Por lo que haremos que el texto quede un poco fuera de este botón.
El botón mide 70dp por 70 dp y el TextView 24dp x 24dp.
Para esto alinearemos el botón a la parte inferior izquierda, pero le daremos un margen de 58dp hacia la izquierda y 58dp hacia abajo. Así el TextView se verá en la parte superior derecha.
El margen son 58 dp, ya que 70 – 24/2 = 58
Este es el código:
5.- Mostrando y escondiendo el TextView
Por último pasamos al código en Kotlin.
Primero relacionamos el objeto en XML con una variable en Kotlin mediante su ID. Luego como valor inicial, configuramos la visibilidad como GONE, para no mostrar los globos de notificación.
Para poner a prueba el código, cuando se presione un botón se incrementará el número en la notificación hasta llegar a 3, luego de 3 se reinicia el contador a 0 que es cuando no se debe mostrar la insignia de notificación.
Vemos que si el contador vale 0, se pondrá la visibilidad de las notificaciones como GONE. Si es mayor que cero, entonces se mostrará el valor del contador en el globo de notificación.
Con esto ya tenemos el globo de notificación en nuestros botones.
Para más tutoriales de Kotlin ve a este enlace.
Algunos temas que te pueden interesar: