Skip to main content
cara membuat rating bar pada android studio

Cara Membuat Rating Bar Menarik di Android Studio

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

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

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.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);
        

        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.

Guntoro

Freelancer web and mobile developement, blogger, and teacher.