Cara Membuat RatingBar Material Design Android Studio

Assalamualaikum Warahmatullahi Wabarakatuh.

Kembali lagi dengan saya, kali ini kita akan belajar mengenai konsep material design pada widget RatingBar di Android Studio, tutorial ini akan membahas mengenai cara membuat serta penggunaan RatingBar untuk aplikasi android.

RatingBar adalah elemen UI yang digunakan untuk mereview sesuatu, contohnya seperti memberikan bintang, memberikan penilaian ke suatu objek seperti game, musik, film, dll. pada umumnya didalam RatingBar terdapat beberapa bintang yang bisa dipilih oleh klien/konsumen, semakin banyak bintang yang di dapat dari klien/konsumen, semakin meningkat juga popularitas pada produk aplikasi tersebut.

Membuat RatingBar pada Aplikasi Android

Buat project baru pada android studio kalian, buat new Empty Activity, berinama "MainActivity".

Untuk menambahkan RatingBar, kita akan menggunakan AppCompatRatingBar yang berasal dari android-support-v7 library, tujuannya agar style dari RatingBar tersebut mengikuti aturan dari Material Design saat aplikasi dijalankan pada varsi android dibawah lollipop.

Kalian dapat melihat versi dari android-support-v7 library pada file build.gradle (direktori app), contohnya seperti ini:

dependencies {
    compile 'com.android.support:appcompat-v7:26.1.0'
}

Baca Juga:

• Cara Membuat Splash Screen pada Android Studio
• Cara Menerapkan Widget SeekBar pada Android Studio
• Cara Menerapkan ProgressBar pada Android Studio

Untuk menerapkan RatingBar pada project kita, buka file activity_main.xml, disini saya akan menembahkan beberapa widget pendukung seperti, Button dan TextView, gambarannya seperti ini:

Berikut ini adalah kode xml pada layout tersebut:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:layout_margin="12dp"
    android:orientation="vertical"
    tools:context="android.cianjur.developer.net.basicandroid.MainActivity">

    <TextView
        android:id="@+id/textView"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Berikan Penilaian Anda:"
        android:textSize="16sp"
        android:textStyle="bold" />

    <android.support.v7.widget.AppCompatRatingBar
        android:id="@+id/penilaian"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:numStars="5"
        android:rating="0"
        android:stepSize="0.5" />

    <Button
        android:id="@+id/submit"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Kirim" />

    <TextView
        android:id="@+id/rate"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Rating:"
        android:textSize="16sp"
        android:textStyle="bold" />
</LinearLayout>

Pada RatingBar tersebut ada beberapa artibut yang bisa kalian set, yaitu:

• android:numStarts jumlah maksimal bintang yang bisa diisi oleh user.
• android:rating nilai default pada rating
• android:stepSize yaitu skala pada rating, diisi 0.5 agar kita bisa memberikan rating dengan nilai setengah, seperti 0.5, 1.5, dsb. 

Selanjutnya buka file MainActivity.java, masukan source code berikut ini:

package android.cianjur.developer.net.basicandroid;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.support.v7.widget.AppCompatRatingBar;
import android.view.View;
import android.widget.Button;
import android.widget.RatingBar;
import android.widget.TextView;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity{

    private TextView getRating;
    private Button Submit;
    private AppCompatRatingBar RatingBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        getRating = findViewById(R.id.rate);
        Submit = findViewById(R.id.submit);
        RatingBar = findViewById(R.id.penilaian);
        // Menambahkan Listener Pada RatingBar
        RatingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
            @Override
            public void onRatingChanged(RatingBar ratingBar, float nilai, boolean b) {
                // Nilai pada TextView Akan Berupa/Terupdate Saat Nilai Ratingnya Berubah
                getRating.setText("Rating: "+nilai);
            }
        });
        Submit.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                // Menampilkan Pesan Berupa Nilai Yang Di inputkan User Pada RatingBar
                Toast.makeText(getApplicationContext(), "Nilai Yang Anda Kirimkan: "+RatingBar.getRating(), Toast.LENGTH_SHORT).show();
            }
        });
    }
}

Coba kalian perhatikan, disana kita menambahkan listener pada RatingBar, agar saat nilai ratingnya berubah maka nilai pada textView juga akan ikut terupdate dan saat user menekan tombol kirim, maka akan muncul pesan yang menampilkan nilai dari user.

Jalankan project tersebut, hasilnya akan terlihat seperti ini:

Terimakasih telah mengunjungi blog pribadi saya, semoga tutorial yang saya bagikan bisa bermanfaat untuk kalian, mohon maaf bila ada kesalahan.

Wassalamualaikum Warahmatullahi Wabarakatuh.