[Android] 안드로이드 RatingBar, SimpleRatingBar 사용하여 평점 기능 구현하기 (+Dialog)

안드로이드의 RatingBar 위젯을 사용하면

평점 기능을 구현할 수 있다.

 

별도의 평점 Dialog에서 받아온 값을 MainActivity에 보여주고자 한다.

 

---

1️⃣ RatingBar

 

activity_main.xml

<RatingBar
    android:id="@+id/ratingBar"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:isIndicator="true"
    android:numStars="5"
    android:rating="0"
    android:stepSize="0.25"
    app:layout_constraintBottom_toTopOf="@+id/text_rating"
    app:layout_constraintEnd_toEndOf="parent"
    app:layout_constraintStart_toStartOf="parent" />

안드로이드 스튜디오에서 기본으로 제공하는 RatingBar를 사용한다.

 

1. isIndicator : 사용자가 변경할 수 있는지 여부 (true = 변경 불가, default false)
2. numStarts : 별 개수 (등급의 개수, default = 5)
3. rating : 초기에 채워져 있는 별 개수 (default = 0)
4. stepSize : 등급의 단위 ( 0.5면 단위가 0.5씩 증가. default = 0.5)

 

위 4가지 xml속성을 활용한다.

Activity에서는 받아온 평점을 표시할 것이므로 isIndicator 값을 true로 설정하여 임의 변경할 수 없도록 하였다.

 

Dialog

이제 위와 같은 다이얼로그 화면을 만들어주고,

 

class RatingDialog(context: Context, private val listener: RatingListener) : Dialog(context) {

    private lateinit var binding: DialogRatingBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = DialogRatingBinding.inflate(layoutInflater)
        setContentView(binding.root)

        initClickListener()
    }

    private fun initClickListener(){
        binding.apply {
            // 연결된 Callback 리스너를 통해 MainActivity 에 Rating 전달
            btnOk.setOnClickListener {
                listener.onOkClicked(binding.ratingBar.rating)
                dismiss()
            }
            btnCancel.setOnClickListener {
                dismiss()
            }
        }
    }
}

 

다이얼로그 동작을 위한 코드를 작성한다.

입력 버튼 클릭 시 ratingBar의 rating 값을 리스너를 통해 메인 액티비티에 전달하도록 한다.

 

interface RatingListener {
    fun onOkClicked(rating: Float)
}

 

MainActivity

class MainActivity : AppCompatActivity(), RatingListener {

    private lateinit var binding: ActivityMainBinding

    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

        binding = ActivityMainBinding.inflate(layoutInflater)
        setContentView(binding.root)

        binding.apply {
            btnRating.setOnClickListener {
                val dialog = RatingDialog(this@MainActivity, this@MainActivity)
                dialog.show()
            }
        }
    }

    // 연결된 Callback 리스너를 통해 Rating 받아와 표시
    override fun onOkClicked(rating: Float) {
        binding.apply {
            textRating.text = rating.toString()
            ratingBar.rating = rating
        }
    }
}

이제 다이얼로그에서 전달받은 값을 통해 RatingBar를 세팅해준다.

 

위와 같이 다이얼로그에서 평점을 입력하면

 

잘 전달받은 것을 확인할 수 있다.

 

 

2️⃣ SimpleRatingBar 

 

https://github.com/williamyyu/SimpleRatingBar

GitHub - williamyyu/SimpleRatingBar: A simple RatingBar that you can easier to customize image and animations

SimpleRatingBar 라이브러리를 사용하면

RatingBar를 커스텀할 수 있다.

 

라이브러리 추가

위 사용법대로

 

bulid.gradle(Module)

dependencies {

    // SimpleRatingBar
    implementation 'com.github.ome450901:SimpleRatingBar:1.5.1'
}

LATEST_VERSION이 현재 1.5.1 이므로 1.5.1로 추가해주고

 

settings.gradle(Project)

dependencyResolutionManagement {
    
    repositories {
        
        maven { url 'https://jitpack.io' }
    }
}

추가해준다.

 

activity_sub.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=".SubActivity">

    <com.willy.ratingbar.BaseRatingBar
        android:id="@+id/baseRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:layout_constraintVertical_bias="0.36"
        app:srb_clearRatingEnabled="true"
        app:srb_clickable="true"
        app:srb_isIndicator="false"
        app:srb_minimumStars="1"
        app:srb_numStars="5"
        app:srb_rating="2"
        app:srb_scrollable="true"
        app:srb_starHeight="30dp"
        app:srb_starPadding="15dp"
        app:srb_starWidth="30dp"
        app:srb_stepSize="0.5" />

    <com.willy.ratingbar.ScaleRatingBar
        android:id="@+id/scaleRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintHorizontal_bias="0.5"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/baseRatingBar"
        app:srb_clearRatingEnabled="true"
        app:srb_clickable="true"
        app:srb_isIndicator="false"
        app:srb_minimumStars="1"
        app:srb_numStars="6"
        app:srb_rating="2"
        app:srb_scrollable="true"
        app:srb_starHeight="30dp"
        app:srb_starPadding="15dp"
        app:srb_starWidth="30dp"
        app:srb_stepSize="0.5"/>

    <com.willy.ratingbar.RotationRatingBar
        android:id="@+id/rotationRatingBar"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toBottomOf="@+id/scaleRatingBar"
        app:srb_clearRatingEnabled="true"
        app:srb_clickable="true"
        app:srb_isIndicator="false"
        app:srb_minimumStars="1"
        app:srb_numStars="7"
        app:srb_rating="2"
        app:srb_scrollable="true"
        app:srb_starHeight="30dp"
        app:srb_starPadding="15dp"
        app:srb_starWidth="30dp"
        app:srb_stepSize="0.5" />

</androidx.constraintlayout.widget.ConstraintLayout>

기존 RatingBar와 다르게

Base, Scale, Rotation 타입의 RatingBar를 지원하며

평점의 위치 등의 속성 값도 변경할 수 있다.

 

 

Base 타입은 기존과 유사하고

Scale 타입은 크기가 조절되는 애니메이션이 추가되었으며,

Rotation 타입은 회전하는 애니메이션이 추가되어 좀 더 생동감 있게 표현해준다.

 

 

또한 코드에서도 RatingBar와 관련된 속성들을 활용할 수 있다.

 

 

이미지 커스텀

app:srb_drawableEmpty="@drawable/coffee_non"
app:srb_drawableFilled="@drawable/coffee_fill"

 

위 두 가지 속성을 사용하여

비어 있을 때, 채워져 있을 때의 이미지를 커스텀해줄 수 있다.

 

 

 

 

전체 코드

https://github.com/HanYeop/AndroidStudio-Practice2/tree/master/RatingBarDialogEx

GitHub - HanYeop/AndroidStudio-Practice2: (2021.05.20~) 안드로이드 학습 내용 저장소

 

 

참고

https://developer.android.com/reference/android/widget/RatingBar

https://github.com/williamyyu/SimpleRatingBar