Edit page

Table of contents

• Star rating
• Interactive star rating
• Implementation

Star rating

By default, star ratings are shown in a static form. These can be set at half star intervals.

(Google Pixel emulator)

(Google Pixel emulator - dark mode)

Interactive star rating

This version allows users to leave feedback on a given feature or area by setting a rating. These can be set at half star intervals.

(Google Pixel emulator)

(Google Pixel emulator - dark mode)

Implementation

Star Rating

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 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
}

Props

Theme Props

• starColor
• starFilledColor

Styles can be changed globally through bpkStarRatingStyle. 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.

Interactive Star Rating

Installation

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

Usage

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

Example of a Interactive Star Rating in XML

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

Example of a Interactive Star Rating in Kotlin

import net.skyscanner.backpack.starrating.BpkInteractiveStarRating

BpkInteractiveStarRating(context).apply {
  maxRating = 5
  rating = 2.5f
  onRatingChangedListener = { current, max ->
  }
}

Theme Props

• starColor
• starFilledColor

Styles can be changed globally through bpkInteractiveStarRatingStyle. Check theming for more information.

Accessibility

To ensure this component is accessible set a contentDescription for the component. To improve status announcements you can set accessibilityStatusRes in both XML and Kotlin/Java to announce x out of y instead of x% out of 100%.

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

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