Ask Ubuntu is a question and answer site for Ubuntu users and developers. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

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

using the QML Component.createObject() method from:

Then in the HeaderArea he sets the anchors to fill the parent, which is pageStack.header:

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: – 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


    Tabs {
        id: tabs

        Tab {
            title:"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.