Revision as of 14:47, 17 November 2010 by kratsan (Talk | contribs)

Implementing custom orientation changes animation with QML

From Nokia Developer Wiki
Jump to: navigation, search


Article Metadata
Tested with
Devices(s): Nokia 900
Platform(s): Maemo
Keywords: QML, Orientation, Qt Mobility
Created: (18 Jul 2011)
Last edited: kratsan (17 Nov 2010)



This snippet shows how to implement nice orientation change animation with QML. In order to detect when the orientation changes we use Qt Mobilitys QOrientationSensor to access the accelerometer data of the device.

To prevent devices built-in orientation change to occure we lock the orientation to landscape mode and simulate the orientation change in QML code. This concerns only Symbian devices as in Maemo the orientation is already locked to the landscape mode. The orientation data is provided to QML code via Qt Signals and Slots.

Note. This snippet is likely to be deprecated when the Qt Mobility 1.1 will be available in Nokia Qt SDK. The orientation information can then be accessed directly via appropriate QML elements and the Qt code in this snippet will not be required, although it should still be valid code.


  • Qt 4.7 or higher is installed on your platform
  • QtMobility 1.0.2 or higher is installed on your platform


The declarative module is used, as well as the Qt Mobility sensors. QML code will be placed inside Qt resource system for easier deployment to the devices.

QT          += core gui declarative
TARGET = orientation
SOURCES += main.cpp
HEADERS += orientationfilter.h
OTHER_FILES += Orientation.qml
RESOURCES = resources.qrc
CONFIG += mobility
MOBILITY += sensors
symbian {
# To lock the application to landscape orientation
LIBS += -lcone -leikcore -lavkon
unix:!symbian {
maemo5 {
target.path = /opt/usr/bin
} else {
target.path = /usr/local/bin
INSTALLS += target


The main.cpp creates the QOrientationSensor and the self-implemented OrientationFilter which will signal the changes of the orientation. This signal is connected to the QML documents root elements function orientationChanged. The root element is retrieved by using code view.rootObject().

The width and height of the root element are set to be resized to QDeclarativeViews sizes with the code view.setResizeMode(QDeclarativeView::SizeRootObjectToView).

#include <QApplication>
#include <QDeclarativeView>
#include <QGraphicsObject>
#include <QDesktopWidget>
#include <QOrientationSensor>
#include "orientationfilter.h"
// Lock orientation in Symbian
#include <eikenv.h>
#include <eikappui.h>
#include <aknenv.h>
#include <aknappui.h>
int main(int argc, char *argv[])
QApplication app(argc, argv);
// Lock orientation in Symbian
CAknAppUi* appUi = dynamic_cast<CAknAppUi*> (CEikonEnv::Static()->AppUi());
TRAP_IGNORE( if(appUi) { appUi->SetOrientationL(CAknAppUi::EAppUiOrientationLandscape); } );
QDeclarativeView view;
QOrientationSensor sensor;
OrientationFilter filter;
// Connect the Qt signal to QML function
QObject::connect(&filter, SIGNAL(orientationChanged(const QVariant&)), view.rootObject(), SLOT(orientationChanged(const QVariant&)));
// Show application in full screen on all platforms with corresponding device resolution
return app.exec();


The self-implemented OrientationFilter is derived from QObject to get the possbility to emit signals and from QOrientationFilter to read the values of the sensor. The sensor reading is placed to QVariant so that the value can be passed to JavaScript function in QML code.

#include <QOrientationFilter>
class OrientationFilter : public QObject, public QOrientationFilter
bool filter(QOrientationReading *reading) {
emit orientationChanged(reading->orientation());
// don't store the reading in the sensor
return false;
void orientationChanged(const QVariant &orientation);


The UI holds six Text elements inside a Column representing orientations of the device. Current orientation text will be shown as bold and white color as the others are shown in black without bold. The view will be rotated to the current orientation by altering the rotation property of the view. Also the width and height of the view are updated to match the corresponding orientation.

import Qt 4.7
Item {
id: base
function orientationChanged(orientation) {
if(orientation == 1) {
view.rotation = 0
view.width = base.width; view.height = base.height
else if(orientation == 2) {
view.rotation = 180
view.width = base.width; view.height = base.height
else if(orientation == 3) {
view.rotation = 270
view.width = base.height; view.height = base.width
else if(orientation == 4) {
view.rotation = 90
view.width = base.height; view.height = base.width
function highlightindex(orientation) {
var count = texts.children.length
for(var i=0; i<count; i++) {
if(i == (orientation - 1)) {
texts.children[i].color = "white"
texts.children[i].font.bold = true
else {
texts.children[i].color = "black"
texts.children[i].font.bold = false
Rectangle {
id: view
Behavior on rotation { RotationAnimation { direction: RotationAnimation.Shortest; duration: 500; easing.type: Easing.OutBounce } }
Behavior on width { NumberAnimation { duration: 500 } }
Behavior on height { NumberAnimation { duration: 500 } }
anchors.centerIn: parent
width: base.width; height: base.height
color: "blue"
Column {
id: texts
anchors.centerIn: parent
spacing: 10
Text { text: "Top up" }
Text { text: "Top Down" }
Text { text: "Left Up" }
Text { text: "Right Up" }
Text { text: "Face Up" }
Text { text: "Face Down" }


The snippet demonstrated the implementing of nice animation to orientation change with QML language. The orientation data was provided by Qt Mobilitys QRotationSensor class. The retrieved data was transferred via Qt Signals and Slots to QML code where the current orientation was nicely visualized.

259 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.


Thank you!

We appreciate your feedback.