Custom Rating Bar in Android Hello World, Today we are going to see for example: how to customize rating bar in android how to make or how to change the or how to completely change rating bar appearance and etc. small rating bar color of rating bar set rating change listener How to change rating bar size or make rating bar small Making a small rating bar is simple but before making a small rating bar, let’s look at how the default rating bar looks if we add it in our layout? The default rating bar is big and looks ugly, to make it look small and make stars color golden or yellow we use below code: < = = = = = = /> RatingBar android:layout_width "wrap_content" android:layout_height "wrap_content" android:rating "3" style "?android:attr/ratingBarStyleIndicator" android:progressTint "#FFCC01" android:id "@+id/smallRating" Now, this looks perfect, right? But wait what if I tell you that you can use any image instead of stars in the rating bar? excited! Stay with this article and you will catch it later. Now let’s see how we can add a listener to the rating bar do that whenever a user give rating we can at accordingly. Set Listener for Rating bar To add a rating change listener we need to add the below code in our activity java file. ....

  RatingBar ratingBar = findViewById(R.id.normalRating);

        ratingBar.setOnRatingBarChangeListener( RatingBar.OnRatingBarChangeListener() { {
                Toast.makeText(MainActivity. , String.valueOf(rating), Toast.LENGTH_SHORT).show();
            }
        });
  
.... new @Override public void onRatingChanged (RatingBar ratingBar, rating, fromUser) float boolean this in the first line, we are getting our rating bar widget by using the findViewById method then we are setting the and passing interface in the parameter and implement method and in the parameters, we are getting our rating in float value as the second parameter. setOnRatingBarChangeListener onRatingChanged After getting the rating value by the user we are displaying it in the toast. Of course, you can use this rating according to your need. See also: CardView in Android Custom Rating Bar in Android By default rating bar shows stars as a rating but there are some cases we need to add our own graphics. Let’s say you want a rating bar instead of stars we need hearts. something like below: To make a custom rating bar like above. We need to perform certain steps as follows: Step 1. Copy your images in the drawable folder and remember image size should be according to the size you want. Step 2. Make XML for the rating bar selector in the drawable folder like below. We made two files, one for the fill or highlighted part and one for the empty or un-highlighted part. See the below files and their respective code. rating_fill.xml for fill part <?xml version="1.0" encoding="utf-8"?> < = > selector xmlns:android "http://schemas.android.com/apk/res/android" < = = = /> item android:state_pressed "true" android:state_window_focused "true" android:drawable "@drawable/ic_heart_fill" < = = = /> item android:state_focused "true" android:state_window_focused "true" android:drawable "@drawable/ic_heart_fill" < = = = /> item android:state_selected "true" android:state_window_focused "true" android:drawable "@drawable/ic_heart_fill" < = /> item android:drawable "@drawable/ic_heart_fill" </ > selector rating_empty.xml for the empty part. <?xml version="1.0" encoding="utf-8"?> < = > selector xmlns:android "http://schemas.android.com/apk/res/android" < = = = /> item android:state_pressed "true" android:state_window_focused "true" android:drawable "@drawable/ic_heart_empty" < = = = /> item android:state_focused "true" android:state_window_focused "true" android:drawable "@drawable/ic_heart_empty" < = = = /> item android:state_selected "true" android:state_window_focused "true" android:drawable "@drawable/ic_heart_empty" < = /> item android:drawable "@drawable/ic_heart_empty" </ > selector Step 3. Now, we have created our selector files, now we need to integrate them together. To do that we need to make a new xml file in drawable and write the below code. <?xml version="1.0" encoding="utf-8"?> < = > layer-list xmlns:android "http://schemas.android.com/apk/res/android" < = = /> item android:id "@android:id/background" android:drawable "@drawable/rating_empty" < = = /> item android:id "@android:id/secondaryProgress" android:drawable "@drawable/rating_empty" < = = /> item android:id "@android:id/progress" android:drawable "@drawable/rating_fill" </ > layer-list In the above code, we are making a layer list and giving the reference all the above filling and empty selectors. Congrats we have completed 90% of work, You can read full article here: Custom Rating Bar in Android Thanks for reading this article have a good day. Previously published at https://www.akshayrana.in/2020/06/how-to-customize-rating-bar-in-android.html

Yellow

Read my tech blog

Read My Stories

Too Long; Didn't Read

Let Your Engineers & PMs focus on Product. Apply for $50K Credits!

How to Customize RatingBar Component in Android

Too Long; Didn't Read

Company Mentioned

@akshay-rana-gujjar

RELATED STORIES