Blackberry UI showing images at bottom - blackberry

Question

I want to add a bar at the bottom of the screen which has images and a string ,i wanted to have the spacing equally like
img1 string img2|img3 ,this is how the bottom bar should look like,below code is not wroking properly i am gettign the alignment and the last iamge is getting disappeared.
HorizontalFieldManager horizontalFieldManager = new HorizontalFieldManager(
FIELD_BOTTOM) {
public void paint(Graphics graphics) {
graphics.setBackgroundColor(0x316AC5);
graphics.clear();
super.paint(graphics);
}
};
Bitmap fadeBitmap = Bitmap
.getBitmapResource("GE_TimeZone_Fade_blue.PNG");
Bitmap clockBitmap = Bitmap.getBitmapResource("GE_Cal_icon_blue.PNG");
Bitmap tzBitmap = Bitmap
.getBitmapResource("GE_TimeZone_Button_blue.PNG");
final ImageButtonField unfocus = new ImageButtonField("",
Field.FOCUSABLE | FIELD_LEFT, "GE_TimeZone_Fade_blue.PNG",
"GE_TimeZone_Fade_blue.PNG", 0xFFFFFF);
LabelField test = new LabelField("hello");
final ImageButtonField bitmapField = new ImageButtonField("",
Field.FOCUSABLE | FIELD_HCENTER, "GE_Cal_icon_blue.PNG",
"GE_Cal_icon_onSelect.PNG", 0xFFFFFF);
final ImageButtonField bitmapField1 = new ImageButtonField("",
Field.FOCUSABLE | FIELD_RIGHT, "GE_TimeZone_Button_blue.PNG",
"GE_TimeZone_Btn_OnSelect.PNG", 0xFFFFFF);
int margin = ((Display.getWidth() - (fadeBitmap.getWidth()
+ clockBitmap.getWidth() + tzBitmap.getWidth() + test
.getWidth())) / 4);
unfocus.setMargin(0, margin, 0, 0);
test.setMargin(0, margin, 0, 0);
bitmapField.setMargin(0, margin, 0, 0);
bitmapField1.setMargin(0, margin, 0, 0);
horizontalFieldManager.add(unfocus);
horizontalFieldManager.add(test);
horizontalFieldManager.add(bitmapField);
horizontalFieldManager.add(bitmapField1);
this.setStatus(horizontalFieldManager);

Answer 1

There is a problem on the code you are using. Check following line.
int margin = ((Display.getWidth() - (fadeBitmap.getWidth()
+ clockBitmap.getWidth() + tzBitmap.getWidth() + test
.getWidth())) / 4);
The getWidth() and getHeight() of any Field will return valid values if the layout method of it's parent manager gets called.
So, adjusting the margin using getWidth(), getHeight() is not safe.
But it is possible to control the alignment and position of the Fields via extending HorizontalFieldManager. Check the following codes and output to get an idea about how it can be done.
Output
Using the StatusFieldManager:
StatusFieldManager statusFieldManager = new StatusFieldManager();
statusFieldManager.setBackground(BackgroundFactory.createSolidBackground(0x316AC5));
final Bitmap bmTest = Bitmap.getBitmapResource("bitmap.png");
BitmapField bmOne = new BitmapField(bmTest, Field.FOCUSABLE | FIELD_LEFT);
BitmapField bmTwo = new BitmapField(bmTest, Field.FOCUSABLE | FIELD_LEFT);
BitmapField bmThree = new BitmapField(bmTest, Field.FOCUSABLE | FIELD_LEFT);
LabelField lblTest = new LabelField("Test");
statusFieldManager.add(bmOne);
statusFieldManager.add(lblTest);
statusFieldManager.add(bmTwo);
statusFieldManager.add(bmThree);
setStatus(statusFieldManager);
Implementation of StatusFieldManager
class StatusFieldManager extends HorizontalFieldManager {
protected void sublayout(int width, int height) {
int numField = getFieldCount();
Field f;
int nHeight = 0, maxFieldWidth = width / 4;
if (numField == 4) {
f = getField(0);
layoutChild(f, maxFieldWidth, height);
nHeight = Math.max(nHeight, f.getHeight());
f = getField(1);
layoutChild(f, maxFieldWidth, height);
nHeight = Math.max(nHeight, f.getHeight());
f = getField(2);
layoutChild(f, maxFieldWidth, height);
nHeight = Math.max(nHeight, f.getHeight());
f = getField(3);
layoutChild(f, maxFieldWidth, height);
nHeight = Math.max(nHeight, f.getHeight());
// set position of the child fields
int x = 0, y = 0;
int requiredFieldWidth = 0;
for (int i=0;i<numField;i++) {
requiredFieldWidth += getField(i).getWidth();
}
int spaceBetweenFields = (width - requiredFieldWidth) / (numField - 1);
for (int i=0;i<numField;i++) {
setPositionChild(getField(i), x, (nHeight - getField(i).getHeight()) / 2);
x += getField(i).getWidth() + spaceBetweenFields;
}
setExtent(width, nHeight);
} else {
setExtent(0, 0);
}
}
}

Answer 2

try this -
unfocus.setMargin(0, margin, 0, 0);
test.setMargin(0, 10, 0, 0);
bitmapField.setMargin(0, 10, 0, 0);
bitmapField1.setMargin(0, 10, 0, 0);