Tutorial Membuat RatingBar Material Design Dengan Mudah di Android Studio

Cara Mudah Membuat Ratingbar Material Design Pada Projek Android Studio

Halo semuanya, bagaimana kabar kalian hari ini? Saya harap kalian semua dalam keadaan yang baik-baik saja karena pada kesempatan kali ini saya akan membagikan Tutorial Mudah Membuat RatingBar Material Design Di Android Studio.

RatingBar adalah elemen UI yang digunakan untuk memberikan ulasan (review) sesuatu. RatingBar di tampilkan bintang untuk mengisyaratkan sesuatu penilaian yang sangat baik. Contoh yang sering kita lihat dari RatingBar ini terdapat pada sebuah penilaian sebuah aplikasi yang sering kita gunakan. Sering kali RatingBar ini muncul beberapa hari setelah kita menggunakan atau menginstal sebuah aplikasi yang terdapat pada perangkat android kita.

Guna dari menggunakan sebuah RatingBar di sebuah aplikasi tidak hanya memberikan kesempatan ulasan kepada pengguna tapi juga sebagai pemberi umpan (feedback) kepada developer agar bisa memperbaiki aplikasi yang telah dibuat.

Jadi pada tutorial ini kita akan belajar cara menerapkan sebuah widget RatingBar di Android Studio dengan mudah.

Tutorial Mudah Membuat RatingBar Material Design di Android Studio

Buatlah sebuah projek Android Studio dengan detail seperti pada tabel dibawah ini:

Application Name:Rating App
Package Name:com.androidrion.ratingapp
Language:Java
Minimum SDK:API 15: Android 4.0.3 (IceCreamSandwich)

Daftar file xml layout yang kita gunakan dalam pembuatan aplikasi ini adalah:

  1. activity_main.xml

Daftar file java activity yang kita gunakan dalam pembuatan aplikasi ini adalah:

  1. MainActivity.java

Berikut ini adalah langkah-langkah dalam pembuatan aplikasi Rating App

XML Layout File

Buka file activity_main.xml pada folder res>layout lalu tambahkan widget RatingBar, Button dan TextView seperti pada kode di bawah ini.

app/res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <TextView
        android:id="@+id/hasil"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="150dp"
        android:hint="Nilai"
        android:textAppearance="@style/TextAppearance.MaterialComponents.Headline3"
        android:textStyle="bold" />

    <androidx.appcompat.widget.AppCompatRatingBar
        android:id="@+id/ratingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:numStars="5"
        android:rating="0"
        android:stepSize="0.5" />

    <Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/ratingBar"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="12dp"
        android:text="Beri Kami Nilai" />

</RelativeLayout>

Penjelasan atribut RatingBar diatas yaitu:

  • android:numStarts untuk jumlah maksimal bintang yang bisa digunakan oleh pengguna
  • android:rating untuk nilai pertama kali di tampilkan sejak aplikasi dijalankan
  • android: stepSize untuk skala pada rating, diisi 0.5 karena kita bisa memberikan rating dengan nilai setengah, seperti 0.5, 1, 1,5 dan seterusnya

Java Activity File

Setelah kalian mendesain file layout, sekarang buka file MainActivity.java dalam folder java di projek Android Studio kalian. Berikut ini adalah kode lengkap untuk file MainActivity.java

app/java/com.androidrion.ratingapp/MainActivity.java

package com.androidrion.ratingapp;

import androidx.appcompat.app.AppCompatActivity;
import androidx.appcompat.widget.AppCompatRatingBar;

import android.os.Bundle;
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 {

    TextView hasil;
    Button button;
    AppCompatRatingBar ratingBar;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        hasil = findViewById(R.id.hasil);
        ratingBar = findViewById(R.id.ratingBar);
        ratingBar.setOnRatingBarChangeListener((ratingBar, rating, fromUser) ->
                //TextView akan menampilkan nilai dari hasil rating bar.
                hasil.setText(String.valueOf(rating)));

        button = findViewById(R.id.button);
        button.setOnClickListener(v ->
                //Menampilkan pesan berupa nilai yang diinput user
                Toast.makeText(MainActivity.this, "Anda memberi nilai: " + ratingBar.getRating(), Toast.LENGTH_SHORT).show());
    }
}

Run ‘app’

Setelah kalian menambahkan kode pada file MainActivity.java dan mendesain layout pada file activity_main.xml, sekarang jalankan projek Android Studio kalian. Apabila tidak terjadi error, maka aplikasi akan terlihat seperti pada gambar dibawah ini.

AKHIR KATA

Itulah tadi tutorial singkat dan mudah Cara Membuat RatingBar Material Desain di Android Studio. Apabila kalian mengalami kesusahan atau error dalam melakukan langkah-langkah diatas, silahkan berkomentar di bawah pada artikel ini. Jangan lupa juga untuk like, comment, dan subscribe Channel YouTube Android Rion. Semoga artikel ini membantu kalian semua. Terima Kasih.

Get real time updates directly on you device, subscribe now.

You might also like
Leave A Reply

Your email address will not be published.