KotlinでAndroidのカスタムRatingBar（評価バー）を作成する方法を徹底解説

この記事では、Kotlinを使用してAndroidアプリにカスタムRatingBar（評価バー）を実装する方法を、ステップごとにわかりやすく解説します。ユーザーが選択した星の数をリアルタイムで取得し、ボタン操作で結果を表示するシンプルなサンプルアプリを構築していきましょう。

手順1：Android Studioで新規プロジェクトを作成する

まずはAndroid Studioで新しいプロジェクトを作成します。メニューから「File」→「New Project」を選択し、必要な項目をすべて入力してプロジェクトを作成してください。

手順2：レイアウトファイル（activity_main.xml）を編集する

次に、res/layout/activity_main.xmlに以下のコードを追加します。ここでは、5つ星のRatingBar、結果を確認するためのButton、そして評価結果を表示するTextViewを配置しています。

<RelativeLayout xmlns:android="https://schemas.android.com/apk/res/android"
xmlns:tools="https://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:padding="16sp"
    tools:context=".MainActivity">
    <RatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:numStars="5"
        android:rating="2.0"
        android:stepSize="1.0" />
    <Button
        android:id="@+id/buttonCheck"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/ratingBar"
        android:layout_centerHorizontal="true"
        android:text="CHECK" />
    <TextView
        android:id="@+id/textView"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:textColor="@android:color/holo_red_dark"
        android:textSize="24sp" />
</RelativeLayout>

レイアウトのポイント

• numStars：表示する星の数を指定します（ここでは5つ）。
• rating：初期状態の評価値を設定します（ここでは2.0）。
• stepSize：評価の刻み幅を指定します。1.0なら半星単位ではなく、星1つ単位での選択になります。

手順3：MainActivity.ktにロジックを実装する

続いて、src/MainActivity.ktに以下のコードを追加します。RatingBarの値が変更されるたびにToastで現在の星の数を表示し、「CHECK」ボタンをタップするとTextViewに評価結果を反映させます。

import android.os.Bundle
import android.widget.Button
import android.widget.RatingBar
import android.widget.RatingBar.OnRatingBarChangeListener
import android.widget.TextView
import android.widget.Toast
import androidx.appcompat.app.AppCompatActivity
class MainActivity : AppCompatActivity() {
    lateinit var ratingBar: RatingBar
    lateinit var button: Button
    lateinit var textView: TextView
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_main)
        title = "KotlinApp"
        ratingBar = findViewById(R.id.ratingBar)
        ratingBar.numStars = 5
        button = findViewById(R.id.buttonCheck)
        textView = findViewById(R.id.textView)
        ratingBar.onRatingBarChangeListener =
        OnRatingBarChangeListener {
            _, rating, _ ->
            Toast.makeText(
            this@MainActivity, "Stars: " +
            rating.toInt(), Toast.LENGTH_SHORT
            ).show()
        }
        button.setOnClickListener {
            textView.text = "You have got " + ratingBar.rating.toInt()+ " stars"
        }
    }
}

コードのポイント

• OnRatingBarChangeListener：ユーザーが星をタップ・スワイプして評価を変更したタイミングで呼び出されるリスナーです。第2引数のratingに現在の評価値が渡されます。
• rating.toInt()：Float型の評価値をInt型に変換して表示しています。
• setOnClickListener：ボタン押下時に最新の評価値をTextViewへ出力します。

手順4：AndroidManifest.xmlを確認する

最後に、androidManifest.xmlが以下のようになっていることを確認してください。MainActivityがランチャーアクティビティとして登録されていれば問題ありません。

<?xml version="1.0" encoding="utf-8"?> 
<manifest xmlns:android="https://schemas.android.com/apk/res/android" package="app.com.q11">
    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:roundIcon="@mipmap/ic_launcher_round"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
</application>

アプリを実行して動作を確認しよう

それでは、アプリケーションを実行してみましょう。ここでは、実際のAndroid端末をパソコンに接続していることを前提としています。

Android Studioからアプリを実行するには、プロジェクト内のいずれかのアクティビティファイルを開き、ツールバーにある「Run」アイコンをクリックします。プルダウンメニューから接続済みのモバイルデバイスを選択すると、端末上にアプリの初期画面が表示されます。

星をタップまたはスワイプして評価を変更すると、その都度Toastで星の数が通知され、「CHECK」ボタンを押すと画面中央に評価結果が表示されます。

まとめ

Kotlinを使えば、RatingBarのカスタマイズもわずかなコード量で実現できます。numStarsやstepSizeなどの属性を組み合わせれば、レビュー機能やアンケートフォームなど、さまざまな場面で活用できるでしょう。ぜひ本記事の手順を参考に、自分のアプリに合った評価バーを実装してみてください。