Star Rating

Default

Day	Night

Interactive

Day	Night

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

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.