Smiley 😍 Rating Bar using Jetpack Compose

Make Apps Simple
Published in
1 min readAug 22, 2022


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


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.



Make Apps Simple