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)

Screenshot

 

 

 

CustomBar.qml

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.

Main.qml

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.

Website: appworld.blackberry.com/webstore/vendor/65375/

Leave your comments

Post comment as a guest

0
  • Doesn't this mean you need a background image for every resolution? I'm not exactly a fan of that, I prefer to dock items so it works nicely even on devices I haven't tested on (let's say passport).
    But it's a nice idea, so far I have been doing things differently. Will try it out

    Like 0 Short URL:
  • I tend to prefer to dock items as well.

    Like 0 Short URL:
  • This is true. It depends on your application and where you're targeting it.

    Like 0 Short URL:
  • India

    This is good example and i used it on my apps :)

    Like 0 Short URL:
  • Guest (jhon)

    Seattle, WA 98104, USA

    Quite impressive post! The content of the post inspired me very much. I appreciate you for the sharing of this amazing post. Keep doing the great work up. emergency plumbers spokane wa

    Like 0 Short URL:
  • Guest (Steven)

    I have browsed most your articles about App development on your website.I got the most useful information after reading the articles. Thanks for posting, maybe we can see more on this.
    best quality roll labels

    Like 0 Short URL:
Subscribe to the official OSBB BBM Channel!

osbbchannelQR

C00013E89

Back to top