Sering kali saat menggunakan sebuah aplikasi android kita diminta untuk memberikan ulasan / penilaian tentang aplikasi tersebut. Nah ditutorial ini kita akan mempelajari bagaimana cara membuat rating bar pada android studio yang menarik dengan mudah.
Cara Membuat Rating Bar pada Android Studio dengan Mudah
Rating bar merupakan salah satu widget yang digunakan untuk memberikan penilaian terhadap sebuah aplikasi. Misal saat kita menggunakan aplikasi whatsapp setelah melakukan video call atau call kita akan diminta penilaian. Biasanya menggunakan simbol bintang.
Oke tanpa panjang lebar inilah tutorial membuat rating bar pada aplikasi android.
1. Buat Project Baru di Android Studio
Buka IDE android studio yang sudah install pada komputer/ laptop kita. Setelah itu pilih New Project. Beri nama project ” rating bar” atau sesuaikan dengan keinginanmu.
Baca Juga : Cara menginstall android studio
2. Library Material Design
Rating Bar sendiri berasal dari library material design. Maka kita harus menambahkan AppCompactRatingBar pada build.gradle(Module app). Dengan kode-kode berikut pada dependencies :
implementation 'com.android.support:appcompat-v7:27.1.1'
Silahkan sesuaikan dengan versi dari android-support-v7 librarynya, pada tutorial ini saya menggunakan versi 27.
Baca juga : Interface dan struktur project android studio
3. Styles. xml
Hilangkan action barnya dengan cara menambahkan kode-kode dibawah ini pada styles.xml yang ada di folder values.
<resources>
<!-- Base application theme. -->
<style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar">
<!-- Customize your theme here. -->
<item name="colorPrimary">@color/colorPrimary</item>
<item name="colorPrimaryDark">@color/colorPrimaryDark</item>
<item name="colorAccent">@color/colorAccent</item>
</style>
</resources>
4. Tambahkan icon
Tambahkan icon like pada drawable. Untuk icon / gambar bisa disesuaikan lagi sesuai keinginan. Disini saya menggunakan icon dari website flaticon. Pelajari cara memasukan gambar di drawable pada tautan cara menggunakan drawable dan string.
5. Layout Utama
Buka Activity_Main.xml lalu tambahkan widget dan layout :
- TextView
- ImageView
- Button
- RatingBar
- LinearLayout
Menggunakan kode-kode dibawah ini.
<?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:padding="20dp"
android:layout_height="match_parent"
android:gravity="center"
android:orientation="vertical"
android:background="#008B8B"
tools:context=".MainActivity">
<ImageView
android:layout_width="400dp"
android:layout_height="150dp"
android:src="@drawable/ratting"
android:layout_margin="50dp"/>
<LinearLayout
android:layout_width="match_parent"
android:orientation="vertical"
android:padding="20dp"
android:background="#fff"
android:gravity="center"
android:layout_height="wrap_content">
<TextView
android:id="@+id/textView"
android:fontFamily="monospace"
android:layout_marginBottom="10dp"
android:textAlignment="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Berikan Penilaian Anda"
android:textSize="18sp"
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" />
<TextView
android:id="@+id/rate"
android:textAlignment="center"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:text="Rating:"
android:fontFamily="monospace"
android:textSize="20sp"
android:textStyle="bold" />
</LinearLayout>
<Button
android:layout_marginTop="15dp"
android:fontFamily="monospace"
android:textStyle="bold"
android:id="@+id/submit"
android:layout_width="match_parent"
android:layout_height="60dp"
android:textSize="18sp"
android:background="#F5DEB3"
android:text="BERIKAN FEEDBACK" />
</LinearLayout>
Hasilnya kurang lebih menjadi seperti desain dibawah ini.
Penjelasan Singkat :
- Kode android:numStarts yaitu Jumlah maksimal icon bintang yang nantinya diisi oleh pengguna
- Kode android:rating yaitu nilai default pada rating
- Kode android:stepSize merupakan skala pada nilai. Kita bisa memberikan nilai setengah karena diisi dengan 0,5.
6. Kode Java
Sekarang kita lanjutkan dengan memberikan kode-kode java pada MainActivity.Java. Silahkan buka MainActivity.java lalu tambahkan kode-kode dibawah ini.
package badoystudio.com.rattingbar;
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 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);
RatingBar.setOnRatingBarChangeListener(new RatingBar.OnRatingBarChangeListener() {
@Override
public void onRatingChanged(RatingBar ratingBar, float nilai, boolean b) {
getRating.setText("Rating: "+nilai);
}
});
Submit.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
Toast.makeText(getApplicationContext(), "Nilai Yang Anda Kirimkan: "+RatingBar.getRating(), Toast.LENGTH_SHORT).show();
}
});
}
}
7. Running App
Silahkan jalankan aplikasinya menggunakan emulator bawaan android studio, genymotion, nox, atau langsung pada device yang kamu miliki. Dan hasilnya.
Oke sampai disini tutorial telah selesai. Silahkan praktekan dan jangan lupa share ke temanmu yang lain.