【Android入門】カスタム評価バー（RatingBar）の作り方をステップ解説

この記事では、Androidアプリでカスタム評価バー（RatingBar）を作成する方法を、実際に動作するサンプルコードとともに解説します。星の数・初期評価値・刻み幅はすべて自由に設定でき、ユーザーが選んだ評価をリアルタイムで取得できるシンプルなアプリを一緒に構築していきましょう。

ステップ1：新しいプロジェクトを作成する

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

ステップ2：レイアウトファイル（activity_main.xml）を編集する

res/layout/activity_main.xml に以下のコードを記述します。ここでは、星5つのRatingBarと、評価値を確認するためのButtonを配置しています。

<?xml version="1.0" encoding="utf-8"?>
<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:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:rating="2.0"
        android:stepSize="1.0"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:id="@+id/ratingBar"/>
    <Button
        android:text="CHECK"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@id/ratingBar"
        android:layout_centerHorizontal="true"
        android:id="@+id/buttonCheck"/>
</RelativeLayout>

レイアウト属性のポイント

• numStars：表示する星の数（ここでは5つ）
• rating：初期状態の評価値（ここでは2.0）
• stepSize：評価の刻み幅（ここでは1.0。0.5などの小数も設定可能です）

ステップ3：MainActivity.javaを実装する

src/MainActivity.java に以下のコードを記述します。OnRatingBarChangeListenerで星の評価が変更された瞬間に、OnClickListenerでボタンが押されたときに、それぞれ現在の評価値をToastで表示します。

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.Toast;
public class MainActivity extends AppCompatActivity {
    RatingBar ratingBar;
    Button button;
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ratingBar = findViewById(R.id.ratingBar);
        ratingBar.setNumStars(5);
        button = findViewById(R.id.buttonCheck);
        ratingBar.setOnRatingBarChangeListener(new
        RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
                Toast.makeText(MainActivity.this, "Stars: " +
                (int)rating, Toast.LENGTH_SHORT).show();
            }
        });
        button.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast.makeText(MainActivity.this, "Stars: " +
                (int)ratingBar.getRating(),
                Toast.LENGTH_SHORT).show();
            }
        });
    }
}

補足：上記のコードは旧サポートライブラリ（android.support.v7）を使用しています。最新のAndroid Studioで作成したプロジェクトでは、androidx.appcompat.app.AppCompatActivityを読み込むように書き換えてください。

ステップ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.sample">
    <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>
</manifest>

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

それでは、実際にアプリを起動してみましょう。AndroidスマートフォンをPCに接続し、Android Studioのツールバーにある「Run」アイコンをクリックします。実行デバイスとして自分の端末を選択すると、スマートフォンに以下のような画面が表示されます。

まとめ

RatingBarを使えば、わずかなコード量で直感的な評価UIを実装できます。さらに星の色やサイズを変更したい場合は、カスタムスタイルやドローアブル画像を適用することで、オリジナリティあふれるデザインに仕上げることも可能です。ぜひ本記事のサンプルをベースに、自分だけの評価機能を作ってみてください。