Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Posts: 70
Registered: ‎04-20-2012
My Device: BB 9105
My Carrier: Vodafone

Scaling image to fill the title bar along with another image



I am struggling with a implemenint title bar on a BB10 app. I have two images, one the title of application and another is just a filler (just the background of title of application image so that it looks better).


I need to place title image at the top right corner of screen which is not a problem. The problem is to put the filler image left to the title image and scale it so that it fills up the gap between title image and rest of the screen. 


Is there anyway I can do it in QML or I need to use C++ code. Any help would be appreciated.




Posts: 1,524
Registered: ‎12-18-2012
My Device: Z30, Z10 LE, DevAlpha C, PlayBook

Re: Scaling image to fill the title bar along with another image

[ Edited ]



This can be done in QML.


Put them into Container with horizontal StackLayout and assign spaceQuota: 1 to the left image. Adjust ImageView's aspect ratio properties if needed.


Untested code:

Container {
preferredWidth: Infinity layout: StackLayout { orientation: LayoutOrientation.LeftToRight } ImageView { layoutProperties: StackLayoutProperties { spaceQuota: 1 } ... } ImageView { ... } }


 I suggest using a slightly different layout:


Create an outer container which fills all the space horizontally, then put the image inside and align it to the right.

If the container is Top-to-Bottom then alignment property can be used. I don't remember how exactly it's called, please check the docs.


If the Container is Left-to-right, add an empty container at the left with spaceQuota: 1 so it will push the image to the right.



If the background is a solid color then using the ImageView is not neccessary, just set the background property of Container.



Andrey Fidrya, @zmeyc on twitter