Smiley 😍 Rating Bar using Jetpack Compose

Smiley rating bar using Jetpack Compose

Tired of the same old rating bar with stars? Let's create something different.

Overview of implementation

• We will use emojis from the internet directly using the URL for the smileys.
• The smiley will be displayed from the URL by using AsyncImage composable from Coil Compose.
• The rating bar will get a list of URLs and labels as input to create the UI.
• For animations, we will use basics Jetpack compose animations APIs — animateDpAsState and animateFloatAsState .
• Upon selection, we will change the color filter of the image, size, text color, and padding for smooth animation.

SmileyData: A simple data class to hold the URL and label of a smiley

Smiley: A composable to represent a single smiley

SmileyRatingBar

It stores the rating as an Int.

We can pass any list of URLs and titles.

SmileyRatingBarSample: To demonstrate how to use the rating bar

Please comment with your valuable feedback. It would help me to improvise.

Kindly 👏👏👏 if this was useful.

Please follow if you would like to see more content related to Android Jetpack Compose.

Credits

Idea: https://github.com/sujithkanna/SmileyRating

Icons: Emoji icons created by Vectors Market — Flaticon