Personalizar la imagen de un RatingBar | Android

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.

¿Necesitas aprender algo nuevo ? Ve a Udemy, busca el tema del que quieres aprender, selecciona el curso para ti y continua con tu aprendizaje.

Udemy

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.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background" android:drawable="@drawable/ic_star_beerempty" />
    <item android:id="@android:id/secondaryProgress" android:drawable="@drawable/ic_star_beerhalf" />
    <item android:id="@android:id/progress" android:drawable="@drawable/ic_star_beerfull" />
</layer-list>

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:

<style name="MyRatingBar" parent="@android:style/Widget.RatingBar">
        <item name="android:minHeight">48dip</item>
        <item name="android:maxHeight">48dip</item>
        <item name="android:progressDrawable">@drawable/ratingbar_beer</item>
    </style>

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»

<RatingBar style="@style/MyRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/ratingBar"
        android:numStars="5"
        android:layout_marginBottom="15dp"
        android:layout_gravity="center" />

Y hemos terminado!

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!