Tutorial De RatingBar En Android

ANUNCIO
Loading...

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.

Visualización de RatingBar En Android

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.

Herencia de RatingBar En Android

Para personalizar su construcción usa las siguientes propiedades:

PropiedadDescripciónTipo
numStarsDetermina el número total de estrellas de la barraInt
ratingEs la calificación actual de la barraFloat
stepSizeCantidad entre cada avance al modificar el ratingFloat
isIndicatorDetermina si la barra actúa como indicador o no. Es decir, si el usuario puede modificar su calificaciónBoolean
onRatingBarChangeListenerRegistra 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.

Ejemplo de RatingBar En Android

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:

Agregar RatingBar en Android Studio

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" />
Lenguaje del código: HTML, XML (xml)

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() }
Lenguaje del código: Kotlin (kotlin)

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)
Lenguaje del código: Kotlin (kotlin)

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" />
Lenguaje del código: HTML, XML (xml)

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}"
Lenguaje del código: Kotlin (kotlin)

Al ejecutar la aplicación tendrás:

Escuchar cambios de RatingBar en Android

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>
Lenguaje del código: HTML, XML (xml)

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" />
Lenguaje del código: HTML, XML (xml)

Y tendrás el siguiente resultado:

Personalizar tema de RatingBar en Android

¿Ha sido útil esta publicación?

ANUNCIO
Loading...