center object in GridFieldManager on blackberry - blackberry

Question

I want to center the objects in the GridFieldManager. This can be seen from the selected image in the blue zone like in the first picture. How can I center these objects (text+picture)???
This is my code
VerticalFieldManager manager = (VerticalFieldManager) getMainManager();
gfm = new GridFieldManager(rows, columns, GridFieldManager.FIXED_SIZE);
manager.add(gfm);
int columnWidth = (Display.getWidth() / columns)
- gfm.getColumnPadding();
for ( i = 0; i < columns; i++) {
gfm.setColumnProperty(i, GridFieldManager.FIXED_SIZE, columnWidth);
}
BitmapField[] images = new BitmapField[6];
EncodedImage Icon = null;
for (i = 0; i < 6; i++) {
Icon = EncodedImage
.getEncodedImageResource("img/HOME.png");
images[i] = new BitmapField(Icon.getBitmap(), Field.FIELD_HCENTER
| Field.FIELD_VCENTER | Field.FOCUSABLE) {
protected void layout(int width, int height) {
setExtent(getPreferredWidth()+20, getPreferredHeight() + 15);
}
protected void paint(Graphics graphics) {
super.paint(graphics);
graphics.drawText("text", 0,
getBitmapHeight(), 2, getBitmapWidth() + 20);
}
};
gfm.setPadding(10, 0, 0, 0);
gfm.setRowPadding(20);
images[i].setPadding(20, 10, 5, 10);
gfm.add(images[i]);
}
}

Answer 1

Try this sample code:
public class PictureScreen extends MainScreen implements FieldChangeListener
{
static EditField editField;
private Bitmap lockBit;
private BitmapField bitmapField[];
private int size=0, i=0;;
public PictureScreen()
{
lockBit=Bitmap.getBitmapResource("HOME.png");
size=10;
createGUI();
}
private void createGUI()
{
bitmapField=new BitmapField[size];
HorizontalFieldManager hr=null;
for(i=0;i<size;i=i+3)
{
hr=new HorizontalFieldManager(Field.FIELD_HCENTER);
for(int j=i;j<i+3;j++) //Here I am taking 3 images per line(Horizontal Manager);
{
if(j<size)
{
final String _label="Text: "+(j+1);
bitmapField[j]=new BitmapField(null,Field.FOCUSABLE)
{
protected void layout(int width, int height)
{
setExtent( 100,100);
}
protected void paint(Graphics g)
{
g.drawBitmap(50-24, 0,lockBit.getWidth(), lockBit.getHeight(), lockBit, 0, 0); //Here 24= image width is 48pixel so,48/2 and 50=setExtent( 100,100); width=100/2;
g.setFont(Font.getDefault().derive(Font.BOLD|Font.ITALIC, 18));
g.drawText(_label, 50-24, 50);
super.paint(g);
}
};
bitmapField[j].setChangeListener(this);
bitmapField[j].setPadding(10, 10, 10, 10);
hr.add(bitmapField[j]);
}
}
add(hr);
}
}
public void fieldChanged(Field field, int context)
{
for(int i=0;i<size;i++)
{
if(field==bitmapField[i])
{
Status.show("Buy the Full Version", 500);
}
}
}
}
Then I got like this:
Try this and see the comments in the class;

Answer 2

I thinks your image is not in center and its Transparent area is not align properly . If you want to do this in easy way than it have to use PictureBackgroundButtonField Custom class. In this class you can handle focus and unfocus using tow different images . Below is the class .
package com.picturebackgroundbuttonfield;
import net.rim.device.api.ui.*;
import net.rim.device.api.system.*;
public class PictureBackgroundButtonField extends Field
{
private String _label;
private int _labelHeight;
private int _labelWidth;
private Font _font;
private Bitmap _onPicture, _offPicture;
private Bitmap _currentPicture;
public PictureBackgroundButtonField(Bitmap onFocus, Bitmap offFocus, String text, long style)
{
super(style);
_onPicture = onFocus;
_offPicture = offFocus;
_font = getFont();
_label = text;
_labelHeight = _onPicture.getHeight();
_labelWidth = _onPicture.getWidth();
_currentPicture = _offPicture;
}
/**
* #return The text on the button
*/
String getText()
{
return _label;
}
/**
* Field implementation.
* #see net.rim.device.api.ui.Field#getPreferredHeight()
*/
public int getPreferredHeight()
{
return _labelHeight;
}
/**
* Field implementation.
* #see net.rim.device.api.ui.Field#getPreferredWidth()
*/
public int getPreferredWidth()
{
return _labelWidth;
}
/**
* Field implementation. Changes the picture when focus is gained.
* #see net.rim.device.api.ui.Field#onFocus(int)
*/
protected void onFocus(int direction)
{
_currentPicture = _onPicture;
// setFont(getFont().derive(Font.BOLD));
invalidate();
}
/**
* Field implementation. Changes picture back when focus is lost.
* #see net.rim.device.api.ui.Field#onUnfocus()
*/
protected void onUnfocus()
{
_currentPicture = _offPicture;
// setFont(getFont().derive(Font.PLAIN));
invalidate();
}
/**
* Field implementation.
* #see net.rim.device.api.ui.Field#drawFocus(Graphics, boolean)
*/
protected void drawFocus(Graphics graphics, boolean on)
{
// Do nothing
}
/**
* Field implementation.
* #see net.rim.device.api.ui.Field#layout(int, int)
*/
protected void layout(int width, int height)
{
setExtent(Math.min( width, getPreferredWidth()),
Math.min( height, getPreferredHeight()));
}
/**
* Field implementation.
* #see net.rim.device.api.ui.Field#paint(Graphics)
*/
/**
* Overridden so that the Event Dispatch thread can catch this event
* instead of having it be caught here..
* #see net.rim.device.api.ui.Field#navigationClick(int, int)
*/
protected boolean navigationClick(int status, int time)
{
fieldChangeNotify(1);
return true;
}
/*protected void paint(Graphics graphics) {
// TODO Auto-generated method stub
}*/
protected void paint(Graphics graphics)
{
graphics.drawBitmap(0, 0, getWidth(), getHeight(), _currentPicture, 0, 0);
graphics.setBackgroundColor(Color.BLACK);
graphics.drawText(_label, 2, 0,
(int)( getStyle() & DrawStyle.ELLIPSIS | DrawStyle.HALIGN_MASK ),
getWidth() - 6 );
}
}