Title Bar in Blackberry

The common approach of setting title in BB scrren is like:
setTitle(Field)

But problem of using setTitle method is the border color that you cannot remove.
This is associated with the device theme.

Then one have to write his own title bar.

The following TitleBar has the below properties:
* background color is black
* title image is placed horizontal center
* title bar height is same as the height of the title image

import net.rim.device.api.ui.container.MainScreen; import net.rim.device.api.ui.component.BitmapField; import net.rim.device.api.system.Bitmap; import net.rim.device.api.ui.Color; import net.rim.device.api.ui.Graphics; import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; import net.rim.device.api.system.*; /** * customized Title Bar * background color is black (BACKGROUND_COLOR) * image is placed horizontal center (titleImage) * title bar height is same as the height of the title image (fieldHeight) */ public class TitleBar extends Field implements DrawStyle { private int fieldWidth; private int fieldHeight; private int fontColour; private int backgroundColor; private Bitmap titleImage = Bitmap.getBitmapResource("topBannerTransparent.png"); private static final int BACKGROUND_COLOR = 0x00000000; public TitleBar() { super(Field.NON_FOCUSABLE); fieldHeight = titleImage.getHeight(); fieldWidth = Graphics.getScreenWidth(); //background color is black backgroundColor = BACKGROUND_COLOR; } public void setBackgroundColour(int _backgroundColour) { backgroundColor = _backgroundColour; invalidate(); } protected void layout(int width, int height) { setExtent(getPreferredWidth(), getPreferredHeight()); } public int getPreferredWidth() { return fieldWidth; } public int getPreferredHeight() { return fieldHeight; } protected void paint(Graphics graphics) { int w = this.getPreferredWidth(); int h = this.getPreferredHeight(); graphics.setColor(backgroundColor); graphics.fillRect(0, 0, w, h); int marginX = (w- titleImage.getWidth() ) / 2 ; graphics.drawBitmap(marginX, 0, w, h, titleImage, 0, 0); } }

To make this TitleBar treat like original title bar( always visible in the top) the main scrren have to modify like below:

import net.rim.device.api.ui.container.MainScreen; import net.rim.device.api.ui.Graphics; import net.rim.device.api.ui.*; import net.rim.device.api.ui.component.*; import net.rim.device.api.ui.container.*; import net.rim.device.api.system.*; class TitleBarExampleScreen extends MainScreen { TitleBar titleBar = new TitleBar(); int titleBarHeight = titleBar.getPreferredHeight(); public TitleBarExampleScreen() { super(NO_VERTICAL_SCROLL); //title Bar added here this.add(titleBar); VerticalFieldManager verticalManager = new VerticalFieldManager(Manager.VERTICAL_SCROLL | Manager.VERTICAL_SCROLLBAR ) { public void paint(Graphics graphics) { graphics.setBackgroundColor(0x00000000); graphics.clear(); super.paint(graphics); } protected void sublayout( int maxWidth, int maxHeight ) { int displayWidth = Display.getWidth(); int displayHeight = Display.getHeight() - titleBarHeight; super.sublayout( displayWidth, displayHeight); setExtent( displayWidth, displayHeight); } }; //now add everything in the verticalManager verticalManager.add(new LabelField("Test Label")); verticalManager.add(new ButtonField("Test Button")); //and at last add verticalManager in scereen this.add(verticalManager); } }