Tutorial De RatingBar En Android

La RatingBar en Android representa visualmente a una barra de calificación con estrellas. Lo que permite al usuario dar click sobre ella para elegir la cantidad de unidades a establecer.

Este widget se usa frecuentemente para calificar elementos de colecciones que pueden ser comparadas por el rating otorgado por los usuarios: productos, artículos, canciones, libros, etc.

También puede ser usada de forma estática (indicador) para expresar visualmente niveles de dificultad en contextos de aprendizaje o para representar rangos de experiencia en perfiles de usuarios.

La Clase RatingBar

RatingBar permite el arrastre de la puntuación de estrellas porque hereda de AbsSeekBar, la cual hereda de ProgressBar. Esto habilita las características del progreso controlado de las estrellas.

Para personalizar su construcción usa las siguientes propiedades:

Propiedad	Descripción	Tipo
numStars	Determina el número total de estrellas de la barra	Int
rating	Es la calificación actual de la barra	Float
stepSize	Cantidad entre cada avance al modificar el rating	Float
isIndicator	Determina si la barra actúa como indicador o no. Es decir, si el usuario puede modificar su calificación	Boolean
onRatingBarChangeListener	Registra un observador que recibe notificaciones cuando cambia rating.	OnRatingBarChangeListener

Teniendo en cuenta esta información sobre la RatingBar, veamos algunos ejemplos sobre su uso.

Puedes seguir el paso creando un nuevo proyecto en Android Studio llamado «RatingBar En Android» y seleccionando a Kotlin como lenguaje principal. Luego selecciona la plantilla Empty Activity y confirma la generación.

O también puedes descargar el código fuente completo desde el siguiente enlace:

Añadir RatingBar En Android Studio

Abre el layout main_activity.xml y sitúate en la pestaña de Diseño. Para agregar una RatingBar en él, ve a Palette > Widgets > RatingBar:

Al arrastrar el elemento al layout se creará una etiqueta <RatingBar> en el archivo XML y en el panel de edición verás al view con cinco estrellas y 0 rating por defecto:

Para personalizar la etiqueta existen atributos XML enlazados a los que vimos en la clase RatingBar. Tan solo es usar el namespace android para asignarlos:

<RatingBar
    android:id="@+id/ratingBar"
    android:numStars="3"
    android:rating="1.5"
    android:isIndicator="true"
    android:stepSize="0.5"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

La anterior configuración define tres estrellas, un rating de 1.5, este no podrá ser modificado por el usuario y solo se puede asignar ratings que represente una distancia de 0.5. Esto producirá la siguiente previa:

Crear RatingBar Programáticamente

Si quieres crear una RatingBar en tiempo de ejecución entonces haz uso de los constructores públicos en tu código Kotlin.

Ejemplo:

Crear una barra de calificación de 5 estrellas cuyo rating sea un número aleatorio del 1 al 5:

class MainActivity : AppCompatActivity() {
    private lateinit var ratingText: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        createRatingBar()
    }

    private fun createRatingBar() {
        val root: LinearLayout = findViewById(R.id.linear_layout)

        val ratingBar: RatingBar = RatingBar(this).apply {
            setIsIndicator(true)
            numStars = 5
            stepSize = 1.0f
            rating = randomBetweenOneAndFive()
            max = 5
            layoutParams = LinearLayout.LayoutParams(
                LinearLayout.LayoutParams.WRAP_CONTENT,
                LinearLayout.LayoutParams.WRAP_CONTENT
            ).apply { gravity = CENTER }
        }

        val ratingBarIndexInLayout = 3
        root.addView(ratingBar, ratingBarIndexInLayout)
    }

    private fun randomBetweenOneAndFive() = Random.nextInt(1, 5).toFloat()
}

El código anterior obtiene la referencia del LinearLayout que contendrá a la RatingBar en activity_main.xml. Luego usa el constructor de la clase y a través de apply() se configuran todos los atributos de la barra.

La generación del valor para rating es entregada al método randomBetweenOneAndFive(), el cual produce un número aleatorio con la clase Random.

Responder A Cambios De Rating

Al describir la clase RatingBar viste que existe onRatingBarChangeListener con el fin de asignar un observador a los eventos que cambian el rating.

Este es del tipo OnRatingBarChangeListener y solo posee al método abstracto onRatingChanged():

onRatingChanged(ratingBar: RatingBar!, rating: Float, fromUser: Boolean)

Que sea solo este método nos permite crear una función lambda en reemplazo del objeto anónimo. Materialicémoslo con un ejemplo.

Crea una RatingBar en el layout con 5 estrellas con el id ratingbar_changes. Y por debajo añade un TextView que muestre el rating actual vs el máximo.

<RatingBar
    android:id="@+id/ratingbar_changes"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    tools:rating="3.0"
    android:numStars="5" />

<TextView
android:id="@+id/rating_text"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_gravity="center"
android:textAppearance="@style/TextAppearance.MaterialComponents.Caption"
tools:text="0/5" />

Ahora desde MainActivity, toma la referencia de la barra y luego asigna al observador para que actualice al texto con cada valor del rating:

private fun setupRatingBarWithChanges() {
    val ratingBarChanges: RatingBar = findViewById(R.id.ratingbar_changes)

    setRatingText(numStars = ratingBarChanges.numStars)

    ratingBarChanges.setOnRatingBarChangeListener { ratingBar, rating, _ ->
        setRatingText(rating, ratingBar.numStars)
    }
}

private fun setRatingText(rating: Float = 0f, numStars: Int) {
    ratingText.text = formatRating(rating, numStars)
}

private fun formatRating(rating: Float, numStars: Int) = "$rating/${numStars}"

Al ejecutar la aplicación tendrás:

Personalizar Tema De Una RatingBar

Modificar el tema de una RatingBar extendiendo un recurso <style> de tu tema base o alguno asociado a Theme.MaterialComponents.*.

Luego puedes asignar al atributo ratingBarStyle tu propio estilo o uno prefabricado como Widget.AppCompat.RatingBar.Small (disminuye el tamo de las estrellas).

Puedes cambiar el color aplicado al drawable asignando recursos a los atributos colorControlNormal y colorControlActivated.

Por ejemplo, si deseas cambiar el color de una barra de calificación por amarillo en su drawable puedes aplicar el siguiente tema:

<style name="RatingBar" parent="Theme.MaterialComponents.DayNight">
    <item name="ratingBarStyle">@style/Controls.RatingBar</item>
    <item name="colorControlActivated">@color/yellow_500</item>
    <item name="colorControlNormal">@color/orange_900</item>
</style>

<style name="Controls.RatingBar" parent="Widget.AppCompat.RatingBar.Small">
<item name="android:isIndicator">false</item>
</style>

Luego lo aplicas en android:theme con su ruta de recurso:

<RatingBar
    android:id="@+id/ratingbar_theme"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:rating="2.5"
    android:theme="@style/RatingBar" />

Y tendrás el siguiente resultado: