Deprecated: Non-static method Joomla\CMS\Application\SiteApplication::getMenu() should not be called statically in /home/berryinf/public_html/templates/gk_magazine/lib/framework/helper.layout.php on line 152

Deprecated: Non-static method Joomla\CMS\Application\CMSApplication::getMenu() should not be called statically in /home/berryinf/public_html/libraries/src/Application/SiteApplication.php on line 275

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

Load Previous Comments
  • 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:
  • The study of different subjects is the need and central aspect of the education. Essay online the benefits of the whole system are very important and significant. The essential nature of the system is taking it to a higher level and position.

    Like 0 Short URL:
  • Guest (dfgjkdftgh)

    The outer ring is marked with 24 cities representing 24 time zones. The city that represents the time zone to fake watches which the local time belongs is displayed at the top of the dial at 12 o'clock.

    Like 0 Short URL:
  • Guest (dsgdf)

    SNDWAY Laser Distance Meter tape measurer uk Rangefinder 80M Trena Level Measure Tape Tester Tool,Jufune Mini Digital Laser Distance Meter Rangefinder Measure laser tape measureTape Diastimeter CA,Electronic tape measure Tape Measure Ultrasonic Distance Meter Measurement Laser Pointer,40M/131ft Digital Laser Distance Meter Range Finder Measure laser measure Tape Diastimeter XM3

    Like 0 Short URL:
  • Guest (Dorrah)

    Wow!! I am so happy about this blog you have shared here. It clearly gives an idea regarding the implementation of custom title bars in cascade. It’s a simple process and anybody can learn it from the details provided here. Keep up the good tours

    Like 0 Short URL:
  • Guest (thomas)

    hi htere.

    Like 0 Short URL:
  • Guest (johnsmith)

    It is very impressive website. I am very impress by the bogs and the posts which you share in it. All the post are very interesting and informative. Custom title bar is very interesting post for me, i must share this with others. Keep sharing.
    click here for trolley wheels uk

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



Back to top