Last Updated on 8 years by Mas Herdi
Halo semua, melanjutkan series tutorial saya tentang Material Design di Android, kali ini kita akan belajar membuat salah satu element yang biasa digunakan untuk mereview sesuatu, yaitu RatingBar. RatingBar di Android biasanya digunakan sebagai alat untuk memberikan bintang, mereview, atau memberikan penilaian ke suatu objek, seperti film, buku, atau lagu.
Membuat Material Design RatingBar di Android dengan Android Studio
Pada Material Design, komponen RatingBar bawaan Android diganti namanya menjadi AppCompatRatingBar yang berasal dari android-support-v7 library. Apa bedanya? Jika kita menggunakan RatingBar bawaan dari Android SDK, maka jika aplikasi dijalankan pada Android versi di bawah Lollipop, style dari RatingBar tersebut tidak akan mengikuti aturan style dari Android Material Design. Sedangkan jika kita menggunakan AppCompatRatingBar, maka mau digunakan pada Android versi berapapun, style nya akan tetap konsisten dan sesuai dengan gaya Material Design.
Oke, langsung saja, kita akan membuat tutorial ini menggunakan Android Studio. Seperti biasanya sebelum lanjut ke coding, ada beberapa artikel pre-requisites yang sebaiknya dibaca terlebih dahulu :
Pre-Requisites :
- Mengenal Android Material Design
- Tutorial Lengkap Android Material Design
- Membuat Project Hello World dengan Android Studio
- Membuat Color Resources untuk Material Design Theme
Jika sudah, kita akan mulai dengan membuat sebuah project Android baru di Android Studio terlebih dahulu.
Setelah itu update dependencies pada file build.gradle kalian dengan mengimport support-appcompat-v7 library seperti di bawah ini :
dependencies {
compile 'com.android.support:appcompat-v7:25.1.0'
}
Pada saat artikel ini ditulis, versi terbaru dari appcompat library adalah 25.1.0, version number ini bisa diganti sesuai dengan keinginan kalian.
Selanjutnya, buka file activity_main.xml, kita akan membuat satu buah komponen AppCompatRatingBar. Dan dua buah komponen lainnya, yaitu sebuah Button dan sebuah TextView seperti contoh di bawah ini :
activity_main.xml
<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:orientation="vertical">
<TextView
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="TWOH.Co Rating Bar Sample" />
<android.support.v7.widget.AppCompatRatingBar
android:id="@+id/rt_bar"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:numStars="5"
android:rating="2.5"
android:stepSize="0.5" />
<Button
android:id="@+id/bt_submit"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Submit" />
<TextView
android:id="@+id/tv_rate"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Rate : " />
</LinearLayout>
Pada kode di atas ada beberapa element pada RatingBar yang bisa kita set, yaitu :
- android:numStars, jumlah maksimal bintang pada rating, kita isi dengan 5
- android:rating, default rating, kita isi dengan “2.5”
- android:stepSize, semacam skala pada rating, kita isi 0.5 supaya kita bisa memberikan rating dengan nilai setengah, seperti 1.5, 2.5 dsb.
Setelah itu kita buka file MainActivity.java dan kita masukkan kode berikut :
MainActivity.java
package id.web.twoh.coolandroiddesign;
import android.os.Bundle;
import android.support.annotation.Nullable;
import android.support.v7.app.AppCompatActivity;
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;
/**
* Created by Hafizh Herdi on 1/16/2017.
*/
public class MainActivity extends AppCompatActivity {
private AppCompatRatingBar ratingBar;
private Button btRating;
private TextView tvRating;
@Override
protected void onCreate(@Nullable Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
ratingBar = (AppCompatRatingBar) findViewById(R.id.rt_bar);
btRating = (Button) findViewById(R.id.bt_submit);
tvRating = (TextView) findViewById(R.id.tv_rate);
ratingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
@Override
public void onRatingChanged(RatingBar ratingBar, float rating, boolean fromUser) {
tvRating.setText("Rate : "+rating);
}
});
btRating.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Toast.makeText(RatingBarActivity.this," Rating "+ratingBar.getRating(), Toast.LENGTH_SHORT).show();
}
});
}
}
Pada kode di atas, kita akan menempatkan listener pada AppCompatRatingBar, sehingga apabila nilai rating-nya berubah, maka nilai itu akan terupdate pada TextView di bawah. Sedangkan apabila tombol Submit ditekan, akan muncul Toast yang memberitahukan nilai rating dari RatingBar itu. Nilai rating pada RatingBar ini berbentuk angka dengan tipe data float, karena memungkinkan adanya pecahan.
Demo
Oke, jika sudah langsung saja kita demokan aplikasinya. 🙂
Contoh RatingBar di Android
Jika dijalankan, contoh aplikasi bisa dilihat seperti di atas. Gambar paling kiri adalah RatingBar apabila sedang di-highlights, sedang kita sentuh untuk memberikan rating.
Gambar tengah adalah saat kita selesai memberi rating / idle. bisa dilihat TextView di bawah nya terupdate dengan nilai rating yaitu 3.5.
Gambar paling kanan, ketika kita klik tombol Submit, maka akan muncul Toast yang berisi nilai rating.
That’s all ! Semoga membantu! Jangan lupa untuk clone project nya sebagai Android Studio module di GitHub saya ya, dengan terlebih dahulu follow dan star project tersebut. 🙂 Silahkan bertanya di bagian komentar jika ada yang kurang jelas. 😀
