Take the 2-minute tour ×
Ask Ubuntu is a question and answer site for Ubuntu users and developers. It's 100% free, no registration required.

Is there a non-hacky way to change the color of just the header in an app using the Ubuntu SDK? MainView has a headerColor property, but that is used as the first step of gradient. Currently, I'm just putting a colored rectangle up there:

Rectangle {
    id: headerBackground
    height: header.height
    width: header.width
    anchors.top: parent.top
    color: "#288369"

But this causes a number of issues, most notably it is incomparable with a ListView that fills an entire page. A full example can be found in this gist.

share|improve this question

2 Answers 2

Try setting anchors.fill: header, that way it always stays within the bounds of the Header component.

You can also check out a more detailed implementation from KarmaMachine:

At the bottom here the developer creates a new HeaderArea component that is a child of pageStack.header https://github.com/brianrobles204/Karma-Machine/blob/master/KarmaMachine.qml#L489

using the QML Component.createObject() method from: http://developer.ubuntu.com/api/qml/sdk-14.04/QtQml.Component/#createObject-method

Then in the HeaderArea he sets the anchors to fill the parent, which is pageStack.header: https://github.com/brianrobles204/Karma-Machine/blob/master/HeaderArea.qml#L19

He also does a lot more to add functionality to the header, but it should give you an idea of how to do it.

share|improve this answer
Thanks. The KarmaMachine example looks like it will point me in the right direction. Unfortunately, using anchors.fill: header still has the same problem with a ListView. See: gist.github.com/andrewsomething/9294239 –  andrewsomething Mar 1 '14 at 18:09
up vote 0 down vote accepted

Michael's pointer to Karma Machine's implementation did indeed point me in the right direction. The key is injecting the rectangle into the header so that it is a proper child. This can be done with the createObject() method that Michael mentioned if you have the rectangle in a separate qml file, or you can use createQmlObject with a string of QML.

Below is a much simplified example (using Tabs but the same thing is possible with a PageStack):

import QtQuick 2.0
import Ubuntu.Components 0.1

MainView {
    id: mainView

    width: units.gu(40)
    height: units.gu(60)

    Tabs {
        id: tabs

        Tab {
            title: i18n.tr("Colored Header")
            page: Page {

    Component.onCompleted: {
        tabs.tabBar.__styleInstance.headerTextSelectedColor = "white";
        var component = Qt.createQmlObject(
            'import QtQuick 2.0; Rectangle { anchors.fill: parent; z: -1; color: "#288369"; }',
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.