एंड्रॉइड में कस्टम रेटिंग बार कैसे बनाएं?

एंड्रॉइड में कस्टम RatingBar बनाना — ड्रॉएबल, स्टाइल, और प्रोग्रामेटिक कंट्रोल

एंड्रॉइड का डिफ़ॉल्ट RatingBar सितारे दिखाता है, लेकिन इसका लुक कस्टमाइज़ करना (रंग, आइकन, आकार, एनिमेशन) आम जरूरत है। यह ट्यूटोरियल **XML स्टाइलिंग** और **प्रोग्रामेटिक कंट्रोल** दोनों दिखाता है।

चरण 1: नया प्रोजेक्ट बनाएं

Android Studio → File → New → New Project → "Empty Activity" → Finish।

चरण 2: कस्टम स्टार ड्रॉएबल बनाएं (res/drawable/star_rating.xml)

यह लेयर-लिस्ट खाली/भरे/आधे सितारे डिफ़ाइन करता है:

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="https://schemas.android.com/apk/res/android">

    <!-- खाली स्टार (बैकग्राउंड) -->
    <item android:id="@android:id/background">
        <bitmap
            android:src="@drawable/ic_star_outline"
            android:gravity="center" />
    </item>

    <!-- आधा भरा स्टार (सेकेंडरी प्रोग्रेस) -->
    <item android:id="@android:id/secondaryProgress">
        <bitmap
            android:src="@drawable/ic_star_half"
            android:gravity="center" />
    </item>

    <!-- पूरी तरह भरा स्टार (प्रोग्रेस) -->
    <item android:id="@android:id/progress">
        <bitmap
            android:src="@drawable/ic_star_filled"
            android:gravity="center" />
    </item>

</layer-list>

आपको तीन वेक्टर ड्रॉएबल्स चाहिए: ic_star_outline.xml, ic_star_half.xml, ic_star_filled.xml (नीचे देखें)।

चरण 3: स्टार वेक्टर ड्रॉएबल्स (res/drawable/)

ic_star_outline.xml

<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:width="24dp" android:height="24dp"
    android:viewportWidth="24" android:viewportHeight="24">
    <path
        android:fillColor="#CCCCCC"
        android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
</vector>

ic_star_half.xml (बाएं आधा भरा, दाएं आउटलाइन)

<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:width="24dp" android:height="24dp"
    android:viewportWidth="24" android:viewportHeight="24">
    <path
        android:fillColor="#FFD700"
        android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
    <path
        android:fillColor="#CCCCCC"
        android:pathData="M12,17.27L5.82,21L7.45,13.97L2,9.24L9.19,8.63L12,2L14.81,8.63L22,9.24L16.54,13.97L18.18,21L12,17.27Z" />
</vector>

ic_star_filled.xml

<vector xmlns:android="https://schemas.android.com/apk/res/android"
    android:width="24dp" android:height="24dp"
    android:viewportWidth="24" android:viewportHeight="24">
    <path
        android:fillColor="#FFD700"
        android:pathData="M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.63L12,2L9.19,8.63L2,9.24L7.45,13.97L5.82,21L12,17.27Z" />
</vector>

चरण 4: Style परिभाषित करें (res/values/styles.xml)

<resources>
    <style name="CustomRatingBar" parent="Widget.AppCompat.RatingBar">
        <item name="android:progressDrawable">@drawable/star_rating</item>
        <item name="android:minHeight">36dp</item>
        <item name="android:maxHeight">36dp</item>
        <item name="android:numStars">5</item>
        <item name="android:stepSize">0.5</item> <!-- आधे सितारे अनुमति -->
        <item name="android:isIndicator">false</item> <!-- यूज़र इंटरैक्ट कर सके -->
    </style>

    <!-- छोटा वर्ज़न -->
    <style name="CustomRatingBar.Small" parent="CustomRatingBar">
        <item name="android:minHeight">24dp</item>
        <item name="android:maxHeight">24dp</item>
    </style>
</resources>

चरण 5: Layout (activity_main.xml)

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="https://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    android:padding="24dp"
    android:gravity="center">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="कस्टम रेटिंग बार"
        android:textSize="20sp"
        android:textStyle="bold"
        android:layout_marginBottom="16dp" />

    <RatingBar
        android:id="@+id/ratingBar"
        style="@style/CustomRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="3.5"
        android:layout_marginBottom="24dp" />

    <RatingBar
        android:id="@+id/ratingBarSmall"
        style="@style/CustomRatingBar.Small"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:rating="4.0"
        android:isIndicator="true"
        android:layout_marginBottom="24dp" />

    <Button
        android:id="@+id/btnGetRating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="रेटिंग प्राप्त करें"
        android:layout_marginBottom="16dp" />

    <Button
        android:id="@+id/btnSetRating"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="रेटिंग सेट करें (2.5)" />

    <TextView
        android:id="@+id/tvResult"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="16dp"
        android:textSize="18sp"
        android:text="रेटिंग: -" />

</LinearLayout>

चरण 6: MainActivity.java

package com.example.custombratingbar;

import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.TextView;
import android.widget.Toast;
import androidx.appcompat.app.AppCompatActivity;

public class MainActivity extends AppCompatActivity {

    private RatingBar ratingBar, ratingBarSmall;
    private Button btnGetRating, btnSetRating;
    private TextView tvResult;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        ratingBar = findViewById(R.id.ratingBar);
        ratingBarSmall = findViewById(R.id.ratingBarSmall);
        btnGetRating = findViewById(R.id.btnGetRating);
        btnSetRating = findViewById(R.id.btnSetRating);
        tvResult = findViewById(R.id.tvResult);

        // रेटिंग चेंज लिस्टनर
        ratingBar.setOnRatingBarChangeListener((bar, rating, fromUser) -> {
            if (fromUser) {
                tvResult.setText(String.format("रेटिंग: %.1f", rating));
                Toast.makeText(this, "रेटिंग बदली: " + rating, Toast.LENGTH_SHORT).show();
            }
        });

        btnGetRating.setOnClickListener(v -> {
            float rating = ratingBar.getRating();
            tvResult.setText(String.format("वर्तमान रेटिंग: %.1f", rating));
        });

        btnSetRating.setOnClickListener(v -> {
            ratingBar.setRating(2.5f);
            tvResult.setText("रेटिंग सेट की गई: 2.5");
        });
    }
}

चरण 7: AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="https://schemas.android.com/apk/res/android"
    package="com.example.custombratingbar">

    <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/Theme.CustomRatingBar">

        <activity
            android:name=".MainActivity"
            android:exported="true">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

    </application>
</manifest>

चलाएं और टेस्ट करें

1. ऐप खोलें — गोल्डन सितारे दिखेंगे (आउटलाइन ग्रे, भरा गोल्डन)।
2. बड़े रेटिंग बार पर टैप/ड्रैग करें — रेटिंग बदलेगी, टोस्ट दिखेगा।
3. "रेटिंग प्राप्त करें" दबाएं — वर्तमान मान TextView में दिखेगा।
4. "रेटिंग सेट करें" दबाएं — प्रोग्रामेटिकली 2.5 सेट होगा।
5. छोटा रेटिंग बार केवल इंडिकेटर है (इंटरैक्टिव नहीं)।

💡 प्रोग्रामेटिकली बिना XML के कस्टम RatingBar

RatingBar ratingBar = new RatingBar(this, null, android.R.attr.ratingBarStyle);
ratingBar.setNumStars(5);
ratingBar.setStepSize(0.5f);
ratingBar.setRating(3.0f);

// ड्रॉएबल प्रोग्रामेटिकली सेट करने के लिए (जटिल)
// LayerDrawable बनाना पड़ता है — XML स्टाइल बेहतर है

🎨 Material Design RatingBar (Material Components)

अगर आप com.google.android.material:material:1.12.0+ उपयोग कर रहे हैं:

<com.google.android.material.rating.MaterialRatingBar
    android:id="@+id/materialRatingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:starCount="5"
    app:stepSize="0.5"
    app:rating="3.5"
    app:starSize="32dp"
    app:starEmptyColor="#E0E0E0"
    app:starFillColor="#FFD700"
    app:starHalfColor="#FFD700" />

यह **वेक्टर ड्रॉएबल्स के बिना** रंग/आकार कस्टमाइज़ करने देता है — आसान और आधुनिक।

सारांश

• ✅ **XML स्टाइल + LayerDrawable** — पूर्ण नियंत्रण, वेक्टर आइकन्स, कोई लाइब्रेरी नहीं।
• ✅ stepSize="0.5" से आधे सितारे सक्षम करें।
• ✅ isIndicator="true" से रीड-ओनली बनाएं।
• 🚀 **MaterialRatingBar** (Material Components) — सरल रंग/आकार कस्टमाइजेशन, कोई ड्रॉएबल XML नहीं।
• 💡 रेटिंग चेंज के लिए OnRatingBarChangeListener उपयोग करें।