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 over the next few weeks. Thanks for all your past and future contributions.

Transparent QML Apps

From Wiki
Jump to: navigation, search
Featured Article
11 Mar

This code example shows how to create translucent Qt Quick apps for both mobile and desktop operating systems.

Article Metadata
Code ExampleTested withCompatibility
Platform(s): Desktop, Nokia Belle
Keywords: QML, Transparent window
Created: gnuton (20 Jun 2011)
Updated: hamishwillee (06 Mar 2012)
Last edited: hamishwillee (11 Oct 2012)



QML elements are usually rendered by Qt by QDeclarativeView. You can ensure that an app's background is painted with non-opaque colors using the inherited QWidget method QWidget::setAttribute(Qt::WA_TranslucentBackground).

There is some platform-specific implementation:

  • X11: This feature relies on the use of an X server that supports ARGB visuals and a compositing window manager.
  • Windows: The view needs to have the Qt::FramelessWindowHint window flag set for the translucency to work. Ie you need to call setWindowFlags(Qt::FramelessWindowHint).


Source (.cpp)

The following code shows the minimum implementation for a translucent QDeclarativeView that works on Linux/X11 systems, Windows and Symbian.

int main(int argc, char *argv[]){
QApplication a(argc, argv);
QDeclarativeView view;
#ifdef Q_WS_WIN
return a.exec();

When working on a "standard" Qt Quick Application created using the project wizard in the Qt SDK v1.2 the QDeclarativeView is wrapped in the convenience class QmlApplicationViewer. The code can be copy-pasted into the template with only trivial object name changes, as shown below:

Q_DECL_EXPORT int main(int argc, char *argv[])
QScopedPointer<QApplication> app(createApplication(argc, argv));
QmlApplicationViewer viewer;
//Copy code below to make app translucent
#ifdef Q_WS_WIN
// Copy code above
return app->exec();


Tip.pngTip: Remember that QML visual elements are drawn opaque by default; there is no point making your app view transparent if your whole QML app is opaque!

The code for the QML must have at least some areas with an opacity less than 1. In the example below you can see that the rectangle onto which the text is drawn has an opacity of 0.5.

Rectangle {
width: 360
height: 360
opacity:0.5 //note opacity<1
color: "lightgrey"
Text {
text: qsTr("Hello\nWorld")
font.pointSize : 30
anchors.centerIn: parent
MouseArea {
anchors.fill: parent
onClicked: {


Translucent QML app on Windows


QML is quite powerful and it's a great thing it support translucent windows even if it's not supported at same way by all Qt supported platforms.

This page was last modified on 11 October 2012, at 01:18.
133 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.