Android Custom Ratingbar Tutorial Example | Change Custom Star Image

We will boxing with android custom Ratingbar tutorial in this article.

In this post, we will learn how to give custom size, color, image, style to the in built rating bar.

By default, rating bar will show star image to give ratings to the user. We will change this star image with our own custom image.

Changes in the styles are also required for this example. You need to give your specific style to the rating bar.

I have used android studio to develop this android custom ratingbar tutorial.

Output

Below video demonstrate the final output of this example.

Step 1. Add Custom Images

Create one fresh new android studio project to reduce the complexity.

Now we need to add our custom images which we will use to show the rating stars.

As you have already shown in the output video, that we are going to use black and red heart icon instead of star.

Number of red hearts represents the actual value of rating.

So download heart images by clicking the below link.

Now add images in res-> drawable directory.

image slider slideshow viewpager android, kotlin image slider, android custom ratingbar

Images in drawable

 

Step 2. Making selector file

Now again in the drawable directory, create one xml file and give it a name “ratingbar_selector.xml

Add following source code in it

We have added our custom images in this file. We will use this file in the styles.xml file where we have done coding for adding custom styles.

Step 3. Changing styles.xml

Open up styles.xml file which is located at values->styles.xml

Copy below code in this file

Here, I have added a custom style named “ImageRatingBar”.

I have defined the minimum and maximum height of the image here which is the same as the original size of the image.

I have also set the progress drawable. Progress drawable will control the look and feel of the rating bar when the user is sliding horizontally on the rating bar.

An xml drawablw file named “ratingbar_selector.xml” is used as the progress drawable file.

Step 4. Main Activity Updation

Last thing is to update both files of Main Activity: activity_main.xml and MainActivity.java

Make your activity_main.xml file’s code look like the below

Here, give your custom style to the rating bar.

Textview will show the current value of the rating bar.

Your source code for MainActivity.java is as following

Common Problems and It’s Solutions

Changing the size of rating images is very complex thing. There are many problems are there with it.

Sometimes rating bar shows more than five stars or sometimes it shows less than five stars. It all depends on the size of the image and also on the size of the rating bar. See the below image

android custom ratingbar

Many times, the stars of the rating bar are stretched vertically due to sizing problems as per following image.

android custom ratingbar

Visit this for describing this problem but unique solution is described below.

Solution

Sizes of images and rating bar needs to be appropriate with respect to each other.

For example, in our example, the size of heart image is 50 * 50 and the size(height and width) of the rating bar is “wrap_content”.

Actually, the perfect scenario is that you keep the height and width of the rating bar as “wrap_content” always and change the size of the image as per your requirements.

You can also have multiple images with various size according to mdpi, hdpi, xhdpi, xxhdpi, xxxhdpi as you have launcher images in mipmap folder.

Download Source Code For Android Custom RatingBar

Thank you very much for reading this tutorial.

Hope you have increased your knowledge after this example.

Share our resources with other learners and developers.

Hardik Parsania

I am mobile app developer. I am always passionate about solving complex and real world problems.I have developed many apps with great interest and superior logical skills.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *