Star rating

Star Ratings are used for displaying a score within a given range.

Star Rating

Maven Central Class reference Source code

Default

Day Night
StarRating component StarRating component - dark mode

Interactive

Day Night
StarRating component StarRating component - dark mode

Installation

Backpack Android is available through Maven Central. Check the main Readme for a complete installation guide.

Usage

The Star Rating component can be used in both XML and Kotlin/Java

Example of a Star Rating in XML


                                                
                                                <net.skyscanner.backpack.starrating.BpkStarRating
                                                  android:layout_width="wrap_content"
                                                  android:layout_height="wrap_content"
                                                  app:rounding="up"
                                                  app:maxRating="5"
                                                  app:rating="2.5" />

Example of an interactive Star Rating in XML


                                                
                                                <net.skyscanner.backpack.starrating.BpkInteractiveStarRating
                                                  android:layout_width="wrap_content"
                                                  android:layout_height="wrap_content"
                                                  app:rounding="up"
                                                  app:maxRating="5"
                                                  app:rating="2.5" />

Example of a Star Rating in Kotlin


                                                
                                                import net.skyscanner.backpack.starrating.BpkStarRating
                                                import net.skyscanner.backpack.starrating.RoundingType
                                                
                                                BpkStarRating(context).apply {
                                                  maxRating = 5
                                                  rating = 2.5f
                                                  rounding = RoundingType.Up
                                                }

Example of an interactive Star Rating in Kotlin


                                                
                                                import net.skyscanner.backpack.starrating.BpkInteractiveStarRating
                                                import net.skyscanner.backpack.starrating.RoundingType
                                                
                                                BpkInteractiveStarRating(context).apply {
                                                  maxRating = 5
                                                  rating = 2.5f
                                                  rounding = RoundingType.Up
                                                  onRatingChangedListener = { current, max ->
                                                  }
                                                }

Props

Property Type Default Value
maxRating Int 5
rating Float maxRating / 2
rounding RoundingType RoundingType.DOWN
accessibilityStatus String resource -

Theme Props

  • starColor
  • starFilledColor

Styles can be changed globally through bpkStarRatingStyle or bpkInterativeStarRatingStyle. Check theming for more information.

Accessibility

To ensure this component is accessible set a contentDescription for the component, unless there is a label indicating the rating available. For simpler logic you can also set accessibilityStatusRes in both XML and Kotlin/Java to announce x out of y.

The string resource needs to contain a %f and %d placeholder:


                                                
                                                <string name="star_rating_accessibility_status">%.0f out of %d</string>

If both contentDescription and accessibilityStatusRes are set the contentDescription will be appended to the accessibility status to match status description behaviour.