Tutorial Cara Membuat Rating Bar di Android Studio

Android Najwa - Selamat Pagi sahabat setia Android Najwa, gak terasa udah pagi aja nih. Baru solat subuh langsung update materi lagi mumpung ada waktu luang. :D. Kemarin saya memberikan materi mengenai "Checkbox" di Android Studio. Tapi sekarang  saya akan membahas materi dengan judul yaitu "Rating Bar" di Android Studio.

Rating Bar Android

Apa itu Rating Bar ?

Radio Button merupakan Widget yang telah disediakan oleh Android Studio.Dalam Android itu sangat mudah untuk menerima user rating menggunakan Penilaian Bar. Berikut ini adalah contoh penggambaran desain awal nya dari Rating Bar.

Rating Bar

Bagaimana cara menggunakan Rating Bar?

Tutorial Cara Membuat Rating Bar

Langkah 1 : Jalankan Android Studio.exe kalian seperti biasa, lalu buatlah project baru dengan seperti berikut.

• Application Name : Rating Bar
• Package Name : androidnajwa.com
• Minimum Required SDK : API 15 Andorid 4.0.3 (IceCreamSandwich)

Buat Project Baru

Langkah 2 :  Pilih saja Blank Activity lalu klik Next dan Finish

Add Activity

Langkah 3 : Untuk membuat antarmuka halaman utama (activity_main.xml) seperti diatas tadi dapat dilakukan dengan “Drag and Drop” dari komponen yang tersedia atau langsung menuliskan script XML. Untuk script XML dapat dituliskan seperti berikut.

<RelativeLayout 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:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin" tools:context=".MainActivity">

    <RatingBar
        android:id="@+id/ratingBar1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="25dp" />
    <TextView
        android:id="@+id/txtRatingValue"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@+id/ratingBar1"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="25dp"
        android:text="Rating"
        android:textSize="40sp" />
</RelativeLayout>

Langkah 4 : Bukalah MainActivity.java lalu edit seperti berikut ini

 package com.androidnajwa.ratingbar;

import android.app.Activity;
import android.os.Bundle;
import android.widget.RatingBar;
import android.widget.RatingBar.OnRatingBarChangeListener;
import android.widget.TextView;

//contoh penerapan listener menggunakan implements pada class
public class MainActivity extends Activity implements OnRatingBarChangeListener {
    private RatingBar ratingBar;
    private TextView txtRatingValue;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ratingBar = (RatingBar) findViewById(R.id.ratingBar1);
        txtRatingValue = (TextView) findViewById(R.id.txtRatingValue);

        //menerapkan listener ketika terjadi perubahan nilai ratingBar
        ratingBar.setOnRatingBarChangeListener(MainActivity.this);
    }

    //method listener yang di-overide karena implements OnRatingBarChangeListener
    public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
        txtRatingValue.setText(String.valueOf(rating));
    }
}

Sampai tahap disini sudah selesai. Sekarang lakukan testing, dengan cara menekan Shift+F10.

(1) Hasil Rating Bar

Ketika kalian meng-klik 5 bintang dalam "Rating" maka akan tampil hasil nya sebagai berikut

(2) Hasil Rating Bar

Nah, itulah hasil dari penggunaan Rating Bar. Dalam tutorial ini kita akan melihat bagaimana untuk mengatur dan menampilkan Penilaian Bar dengan Bintang. Ketika slide pengguna atas bar, rating naik atau turun dengan satu bintang dan yang dipilih / terpilih berubah warna Stars otomatis seperti halnya ketika kita menilai sebuah rating aplikasi di google playstore.  Gimana? Mudah Bukan? Untuk dikembangkan lagi juga bisa dengan aksi lainnya asal kalian bisa memahaminya. Nantikan kelanjutan saya akan memberikan materi berikutnya mengenai Rating Bar.

Demikian Tutorial Cara Membuat Rating Bar di Android Studio. Bila Ada Pertanyaan silakan komentar dihalaman Komentar.Terima Kasih Atas Kunjungan di Android Najwa.

Link Download Klik Disini

Catatan : Silakan Klik Gambar dibawah ini untuk mendapatkan Password RAR.

Tweet