Custom Title Bars

App development is a blend between the functional and aestethic.  Developers are often striving to bring out a certain identity or feel from their app.  Whether it's a company logo or a certain colour tone that is present throughout the application.  Today I'm going to be walking you through how to implement your own custom title bars in Cascades.  It's a fairly simple process, that I'm sure will have many delighted to know that it does not touch any src code (i.e. C++), it only uses QML!

Before we get started here are the files we will be making use of:

  • main.qml
  • CustomBar.qml (user created)






here is where we setup the custom title bar, including referencing our own custom image from the assets and arranging the sizing so that it fits and is placed in the right place on the screen.

import bb.cascades 1.0

// A Custom Title bar with a differnt look then the prepackaged one.
TitleBar {
    id: customTitleBar
    property alias barTitle: titleLabel.text
    property int layoutHeight: 0
    property int layoutWidth: 0

    kind: TitleBarKind.FreeForm

    // This is a custom title bar so we put the content (a text)
    // and an image) in a FreeFormTitleBarKindProperties.
    kindProperties: FreeFormTitleBarKindProperties {
        Container {
            leftPadding: 25

            background: titlePaint.imagePaint
            attachedObjects: [
                ImagePaintDefinition {
                    id: titlePaint
                    imageSource: "asset:///images/custom_title.png"
                LayoutUpdateHandler {
                    id: layoutHandler
                    onLayoutFrameChanged: {
                        // We store the height and width of the title bar as it is layouted.
                        customTitleBar.layoutHeight = layoutFrame.height;
                        customTitleBar.layoutWidth = layoutFrame.width;

            layout: StackLayout {
                orientation: LayoutOrientation.LeftToRight

            Label {
                id: titleLabel
                verticalAlignment: VerticalAlignment.Center

                textStyle {
                    color: Color.White
                    base: SystemDefaults.TextStyles.TitleText
                    fontWeight: FontWeight.W500

                layoutProperties: StackLayoutProperties {
                    spaceQuota: 1


we've places a property alias at the top called "barTitle" that will allow us to name the title bar from the page that references this qml. In essence you are creating a container within the FreeFormTitleBarkindProperties {} in where you have the image that you will use as the title bar background or for some people, you may even want to just create your entire title bar in Adobe Illustrator or some other design tool which would allow you to simply skip the label portion of the above code.


here is where we reference the custom title bar we created in a separate qml. Simple as pie.

import bb.cascades 1.0

Page {
    titleBar: CustomBar {
        barTitle: qsTr("Home Page") + Retranslate.onLanguageChanged
    Container {
        Label {
            // Localized text with the dynamic translation and locale updates support
            text: qsTr("Hello World") + Retranslate.onLocaleOrLanguageChanged
            textStyle.base: SystemDefaults.TextStyles.BigText

Notice that within the CustomBar {} we set the text using the property alias we setup in the previous section.

So there you have it.  Your very own custom title bar that will both dazzle and surprise your users ;) . If you have any questions don't hesitate to leave a comment or send me a tweet at @ElBranduco . Hope you guys enjoy ;)

Brandon Orr

Transportation Planner (University of Waterloo Graduate) & Blackberry 10 Developer (PinGuin App) part of the open source BB team.


Leave your comments

Post comment as a guest

Subscribe to the official OSBB BBM Channel!



Back to top