Skip to main content

Star Rating

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

Table of contents

Star Rating

Maven Central Class reference Source code

Default

DayNight
StarRating componentStarRating component - dark mode

Interactive

DayNight
StarRating componentStarRating 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

PropertyTypeDefault Value
maxRatingInt5
ratingFloatmaxRating / 2
roundingRoundingTypeRoundingType.DOWN
accessibilityStatusString 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.