[Android & Kotlin] RatingBar で評価の星を増減させる

RatingBar(レーティングバー)は飲食店の評価や本・アプリの評価でよく見る星の数というものです
Androidアプリでの設定はどうするのでしょうか

Android Studio
2024.1.1

RatingBar

RatingBarはProgressBarとSeekBarを継承しているウィジェットの1つです
RatingBarで見つからない機能はProgressBarにあったりします

java.lang.Object
↳	android.view.View
	↳	android.widget.ProgressBar
		↳	android.widget.AbsSeekBar
			↳	android.widget.RatingBar

設定は簡単にDesignのWidgetsから「RatingBar」を選んで設置できます

実際にユーザーが評価したレートを入れる操作を受け付けるようなスキームで
簡単なアプリを作ってみます
　

目次
1. RatingBarのプロパティ
2. サンプルコード

RatingBarのプロパティ

　RatingBar

によればRatingBarとして以下のメソッドがあります

isIndicator
- ユーザーにより変更可能かどうか
numStars
- 評価レート、最大の星の数
rating
- 初期のレート
stepSize
- 評価ステップ、0.5だと星半分

また、ユーザーの評価変更を受け取って知らせるリスナーがあります

// 最新のレーティング値を取得
getRating()

// 評価が変更されたことを知らせるリスナー、最新のレーティング値を取得することも可能
abstract fun onRatingChanged(
    ratingBar: RatingBar!, 
    rating: Float, 
    fromUser: Boolean
): Unit
// ratingBar: レーティングが変更したRatingBar
// rating:    現在のレーティング
// fromUser:  ユーザーからの変更かどうか

// 最新のレーティング値を取得

getRating()

// 評価が変更されたことを知らせるリスナー、最新のレーティング値を取得することも可能

abstract fun onRatingChanged(

ratingBar: RatingBar!,

rating: Float,

fromUser: Boolean

): Unit

// ratingBar: レーティングが変更したRatingBar

// rating: 現在のレーティング

// fromUser: ユーザーからの変更かどうか

また、星の色を動的に変更するには
setProgressTintList()が使えます

ratingBar.setProgressTintList(ColorStateList.valueOf(Color.RED))

1	ratingBar.setProgressTintList(ColorStateList.valueOf(Color.RED))

金色っぽくするために
Color.rgb(217, 194, 0)がいいかもしれません

サンプルコード

MainActivity.kt

package com.example.kotlinratingbar
import android.os.Bundle
import androidx.activity.enableEdgeToEdge
import androidx.appcompat.app.AppCompatActivity
import androidx.core.view.ViewCompat
import androidx.core.view.WindowInsetsCompat

import android.content.res.ColorStateList
import android.graphics.Color
import android.widget.RatingBar
import android.widget.TextView

class MainActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContentView(R.layout.activity_main)
        ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->
            val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())
            v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)
            insets
        }

        val textView : TextView = findViewById(R.id.textview)

        val ratingBar : RatingBar = findViewById(R.id.ratingbar)
        // リスナー登録
        ratingBar.onRatingBarChangeListener =
            RatingBar.OnRatingBarChangeListener {
                ratingBar1: RatingBar,
                rating: Float, _: Boolean ->

                // 現在の評価(星の数)を取得
                //val str = "Rating: " + ratingBar1.rating
                val str = "Rating: $rating"

                // 評価をテキストビューに表示
                textView.text = str

                // 星の色を変更してみる
                ratingBar1.progressTintList =
                    ColorStateList.valueOf(Color.rgb(217, 194, 0))

                // 評価の変更は一度だけにする場合は↓をコメントイン
                //ratingBar1.setIsIndicator(true)
            }

    }
}

package com.example.kotlinratingbar

import android.os.Bundle

import androidx.activity.enableEdgeToEdge

import androidx.appcompat.app.AppCompatActivity

import androidx.core.view.ViewCompat

import androidx.core.view.WindowInsetsCompat

import android.content.res.ColorStateList

import android.graphics.Color

import android.widget.RatingBar

import android.widget.TextView

class MainActivity : AppCompatActivity() {

override fun onCreate(savedInstanceState: Bundle?) {

super.onCreate(savedInstanceState)

enableEdgeToEdge()

setContentView(R.layout.activity_main)

ViewCompat.setOnApplyWindowInsetsListener(findViewById(R.id.main)) { v, insets ->

val systemBars = insets.getInsets(WindowInsetsCompat.Type.systemBars())

v.setPadding(systemBars.left, systemBars.top, systemBars.right, systemBars.bottom)

insets

}

val textView : TextView = findViewById(R.id.textview)

val ratingBar : RatingBar = findViewById(R.id.ratingbar)

// リスナー登録

ratingBar.onRatingBarChangeListener =

RatingBar.OnRatingBarChangeListener {

ratingBar1: RatingBar,

rating: Float, _: Boolean ->

// 現在の評価(星の数)を取得

//val str = "Rating: " + ratingBar1.rating

val str = "Rating: $rating"

// 評価をテキストビューに表示

textView.text = str

// 星の色を変更してみる

ratingBar1.progressTintList =

ColorStateList.valueOf(Color.rgb(217, 194, 0))

// 評価の変更は一度だけにする場合は↓をコメントイン

//ratingBar1.setIsIndicator(true)

}

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/main"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/textview"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/text"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.4" />

    <RatingBar
        android:id="@+id/ratingbar"
        android:contentDescription="@string/ratingbar"
        android:isIndicator="false"
        android:numStars="5"
        android:rating="2.5"
        android:stepSize="0.5"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.6" />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version="1.0" encoding="utf-8"?>

<androidx.constraintlayout.widget.ConstraintLayout

xmlns:android="http://schemas.android.com/apk/res/android"

xmlns:app="http://schemas.android.com/apk/res-auto"

xmlns:tools="http://schemas.android.com/tools"

android:id="@+id/main"

android:layout_width="match_parent"

android:layout_height="match_parent"

tools:context=".MainActivity">

<TextView

android:id="@+id/textview"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/text"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.4" />

<RatingBar

android:id="@+id/ratingbar"

android:contentDescription="@string/ratingbar"

android:isIndicator="false"

android:numStars="5"

android:rating="2.5"

android:stepSize="0.5"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

app:layout_constraintBottom_toBottomOf="parent"

app:layout_constraintEnd_toEndOf="parent"

app:layout_constraintStart_toStartOf="parent"

app:layout_constraintTop_toTopOf="parent"

app:layout_constraintVertical_bias="0.6" />

</androidx.constraintlayout.widget.ConstraintLayout>

stings.xml

<resources>
    <string name="app_name">KotlinRatingBar</string>
    <string name="text">ratingbar</string>
    <string name="ratingbar">ratingbar</string>
</resources>

<string name="app_name">KotlinRatingBar</string>

<string name="text">ratingbar</string>

<string name="ratingbar">ratingbar</string>

</resources>

これで実行してみます

activity_main.xml で設定した箇所は
コードで設定することも可能

// // 評価レート、最大の星の数
ratingBar.setNumStars(6)
// 初期のレート
ratingBar.setRating(3.5F)
// 評価ステップ、0.5だと星半分
ratingBar.setStepSize(0.5F)

// // 評価レート、最大の星の数

ratingBar.setNumStars(6)

// 初期のレート

ratingBar.setRating(3.5F)

// 評価ステップ、0.5だと星半分

ratingBar.setStepSize(0.5F)

References:
RatingBar | Android Developers
OnRatingBarChangeListener