Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Custom Rating Indicator using Qt Quick

From Wiki
Jump to: navigation, search

This article demonstrates how to create a custom Rating Indicator using Qt Quick. Note there is also a Symbian Qt Quick Component RatingIndicator Element.

Article Metadata
Code ExampleTested with
Devices(s): N8 (Nokia Belle)
Platform(s): Symbian^3
Platform Security
Signing Required: Self-Signed
Keywords: Rating Indicator
Created: somnathbanik (06 Apr 2012)
Last edited: hamishwillee (11 Oct 2012)
See Also

QML RatingIndicator Element


In this article we will see how to create an animated custom Rating Indicator using the QML State and Transition elements.

Custom Rating Indicator

Note.pngNote: This image isn't animated. Try the example to see the indicator at work!


Let’s create an empty QML project. We create 5 Images in a Row to align all the Images horizontally. We set the opacity and scale of the Images to 0.4 and 0.5 so that it looks small and faded.

Image {
id: imageStar1
source: "star.png"
opacity: 0.4
scale: 0.5
MouseArea {
anchors.fill: parent
height: parent.height+20
width: parent.width+20
onClicked: {
itemRatingIndicator.rating = 1

On clicking the Images we set a value to the rating parameter and change the State of the Images to opacity and scale to 100%'.

states: [
State {
name: "star"
when: itemRatingIndicator.rating >= 1
PropertyChanges {
target: imageStar1
opacity: 1
scale: 1

To make a smooth change in the State we add Transition with an OutBounce easing effect.

transitions: [
Transition {
NumberAnimation { properties: "opacity,scale"; easing.type: Easing.OutBounce; duration: 1000 }

Source Code

This page was last modified on 11 October 2012, at 01:20.
46 page views in the last 30 days.