center object in GridFieldManager on 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 );
}

}