Personalizar la imagen de un RatingBar | Android

Personalizar la imagen de un RatingBar | Android

Personalizar la imagen de un RatingBar | Android
4.8 (96.67%) 6 votos

Hoy vamos a ver rapidamente como personalizar la imagen de un ratingbar en android para sustituir esas lindas estrellitas que vienen por default por cualquier imagen que más se acomode a la tematica de la aplicacion movil que estemos desarrollando, ya sea para nosotros o para algun cliente. Personalizar la imagen de un ratingbar en android es fácil, ¿Te animas a intentar?

Hoy no vamos a ver algo tan complejo como por ejemplo realizar una comunicacion entre android y javascrip con webview pero es tambien algo interesante y sobretodo fácil de implementar.. Personalizar la imagen de un RatingBar en android para sustituir esas famosas estrellitas amarillas de calificación.

¿Que necesitamos para personalizar la imagen de un RatingBar?

  • Android studio
  • La imagen que queremos (en sus 3 diferentes estados: vacia, a la mitad y completa)
  • Leer este tutorial 😛

Obtener una imagen

Necesitamos obtener una imagen en sus 3 diferentes estados en los que puede ser seleccionada la ratingbar: imagen vacia, imagen a la mitad e imagen completa.

Puede ser una copa vacia, una copa media llena y una copa llena, o un sol sin color, un sol medio iluminado y un sol completamente iluminado, etc.


Suscríbete a nuestra lista de correo y recíbe los últimos contenidos directamente en tu bandeja de correo electrónico, puedes elegir únicamente de que categoria del blog quieres recibir contenido.

Suscríbeme

En mi caso he utilizado 3 imagenes de botellas de cerveza, una vacia, una media llena y otra completamente llena.

Nota: Asegurate de que no se vea una espantosa sombra en tus imagenes como en las mías 😛

Ahora estas imagenes las debemos agregar a nuestros drawables de proyecto y continuamos.

Crear un drawable para personalizar el RatingBar

Lo primero que necesitamos es crear un drawable: Boton derecho sobre la carpeta drawable en nuestro android studio -> New -> Drawable resource file, lo nombramos como queramos.. en mi caso ratingbar_beer.xml.

Donde ic_star_beerempty, ic_star_beerhalf y ic_star_beerfull son los drawables de las imagenes que he elegido.

Crear un estilo que utilice nuestro drawable

Ahora vamos a crear un estilo en res -> values -> styles.xml en nuestro android studio y agregamos lo siguiente:

Donde:

  • Establecemos un nombre a nuestro estilo que usaremos mas adelante para utilizarlo.
  • Decimos que es un hijo o descendiente de Ratingbar.
  • Utilizamos el drawable que creamos en el paso anterior.

Enlazar nuestro RatingBar con nuestro estilo personalizado

Por ultimo solo nos queda enlazar nuestro RatingBar con el estilo que hemos creado en el paso anterior, esto mediante la linea syle=”@style/MyRatingBar”

Y hemos terminado!

Personalizar la imagen de un RatingBar en Android

Personalizar la imagen de un RatingBar en Android

Cualquier duda o comentario no dudes en contactarme, para mas información sobre RatingBar puedes leer la documentacion oficial de android.

Saludos!

 

Personalizar la imagen de un RatingBar | Android
4.8 (96.67%) 6 votos

Deja tu comentario

Dejar un comentario

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

Loading Facebook Comments ...