Tuesday 16 October 2018

Custom RatingBar Android : Use your own colours and symbols.

Before going to coding,

lets talk about how the rating bar stars designed.

The rating bar star has 3 layers : Background, Secondary progress, Progress.

Background layer defines the shape of the drawble that needs to be filled.

Secondary progress defines the drawable that needs to be filled if the progress is less enough to fill a star(Remaining half star).

Progress defines the star to be filled.

Now lets go to coding:


Create a drawable resource with any name. I'm using the name rating_proggressbar.xml

This needs to have 3 layers. So make sure the parent of the xml is <layer-list>

These layer ids are @android:id/background @android:id/secondaryProgress @android:id/progress

So the code in rating_proggressbar.xml will look like some thing like this:

In the next step: you need to define the shape of the progress

Here I'm taking a 14dp star from Android Asset Studio
I'm using black and grey here. You can use any colours you want.

The final code in rating_proggressbar.xml will be like this:


Now use this in rating bar


In Lollipop you can use tint for more colours, progressBackgroundTint, secondaryProgressTint , progressTint.

With custom colours, The code will be like this:

No comments :

Post a Comment