Make Apps Simple

Working on ways to improve apps from planning, requirement gathering to end-user experience.

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.

--

--

Make Apps Simple
Make Apps Simple

Published in Make Apps Simple

Working on ways to improve apps from planning, requirement gathering to end-user experience.

No responses yet