Image Button in BlackBerry

Question

How do I implement an image button in BlackBerry?

Answer 1

Use RIM's Advanced UI Pack.

http://supportforums.blackberry.com/t5/Java-Development/Implement-advanced-buttons-fields-and-managers/ta-p/488276

This contains a BitmapButton field and a great number of of useful UI tools.

(No doubt Reflogs example is good, but I think for new BB developers landing on this page the Advanced UI pack is more beneficial)

Answer 2

perfect ImageButton for Blackberry , According to user point of view a Imagebutton should have  four states 
1. Normal
2. Focus
3. Selected Focus
4. Selected unfocus

the Following code maintain all four states (Field-Change-Listener and Navigation) 
if you want to maintain all four states than use 1st Constructor, If you just want to handle Focus/Un-Focu state of the button than use 2nd one

########################################

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.Graphics;

public class ImageButton extends Field
{

    Bitmap mNormalIcon;
    Bitmap mFocusedIcon;
    Bitmap mActiveNormalIcon;
    Bitmap mActiveFocusedIcon;
    Bitmap mActiveBitmap;
    String mActiveText;
    int mHeight;
    int mWidth;

    boolean isStateActive = false;
    boolean isTextActive = false;

    public boolean isStateActive()
    {
        return isStateActive;
    }



    public ImageButton(Bitmap normalIcon, Bitmap focusedIcon)
    {
        super(Field.FOCUSABLE | FIELD_VCENTER);
        mNormalIcon = normalIcon;
        mFocusedIcon = focusedIcon;
        mActiveBitmap = normalIcon;
        mActiveFocusedIcon = focusedIcon;
        mActiveNormalIcon = normalIcon;
        // isTextActive = false;
    }

    public ImageButton(Bitmap normalIcon, Bitmap focusedIcon, Bitmap activeNormalIcon, Bitmap activeFocusedIcon)
    {
        super(Field.FOCUSABLE | FIELD_VCENTER);
        mNormalIcon = normalIcon;
        mFocusedIcon = focusedIcon;
        mActiveFocusedIcon = activeFocusedIcon;
        mActiveNormalIcon = activeNormalIcon;
        mActiveBitmap = normalIcon;
        // isTextActive = true;
    }



    protected void onFocus(int direction)
    {
        if ( !isStateActive )
        {

            mActiveBitmap = mFocusedIcon;

        }
        else
        {

            mActiveBitmap = mActiveFocusedIcon;
        }

    }

    protected void onUnfocus()
    {

        super.onUnfocus();
        if ( !isStateActive )
        {

            mActiveBitmap = mNormalIcon;

        }
        else
        {

            mActiveBitmap = mActiveNormalIcon;

        }

    }

    protected boolean navigationClick(int status, int time)
    {

        mActiveBitmap = mActiveNormalIcon;

        toggleState();
        invalidate();
        fieldChangeNotify(1);
        return true;
    }

    public void toggleState()
    {
        isStateActive = !isStateActive;
    }

    public int getPreferredWidth()
    {
        return mActiveBitmap.getWidth() + 20;

    }

    public int getPreferredHeight()
    {
        return mActiveBitmap.getHeight() + 10;

    }

    protected void layout(int width, int height)
    {

        mWidth = getPreferredWidth();
        mHeight = getPreferredHeight();
        setExtent(mWidth, mHeight);

    }

    protected void paint(Graphics graphics)
    {

        graphics.drawBitmap(0, 5, mWidth, mHeight, mActiveBitmap, 0, 0);
        // graphics.setColor(0xff0000);
        // graphics.drawText(mActiveText, ( mActiveBitmap.getWidth() -
        // this.getFont().getAdvance("ON") ) / 2, mActiveBitmap.getHeight());

    }

    protected void drawFocus(Graphics graphics, boolean on)
    {

    }

    public void activate()
    {
        mActiveBitmap = mActiveNormalIcon;

        isStateActive = true;

        invalidate();
    }

    public void deactivate()
    {

        mActiveBitmap = mNormalIcon;

        isStateActive = false;

        invalidate();
    }

}

Answer 3

easiest way to do that:

step 1:draw a image with specific coordinates(imageX,imageY). step 2:add a method in your Code:

 void pointerControl(int x, int y) {
        if (x>imageX && x<imageX+imageName.getWidth() && y>imageY && y < imageY+imageName.getHeight) {
            //to do code here
        } 

    }

    where imageName:name of image
          imageX=x coordinate of image(Top-Left)
          imageY=y coordinate of image(Top-Left)

Answer 4

here you go, complete code:

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.Graphics;
import net.rim.device.api.ui.component.ButtonField;

/**
 * Button field with a bitmap as its label.
 */
public class BitmapButtonField extends ButtonField {
        private Bitmap bitmap;
        private Bitmap bitmapHighlight;
        private boolean highlighted = false;

        /**
         * Instantiates a new bitmap button field.
         * 
         * @param bitmap the bitmap to use as a label
         */
        public BitmapButtonField(Bitmap bitmap, Bitmap bitmapHighlight) {
            this(bitmap, bitmapHighlight, ButtonField.CONSUME_CLICK|ButtonField.FIELD_HCENTER|ButtonField.FIELD_VCENTER);
        }

        public BitmapButtonField(Bitmap bitmap, Bitmap bitmapHighlight, long style) {
            super(style);
            this.bitmap = bitmap;
            this.bitmapHighlight = bitmapHighlight;
        }

        /* (non-Javadoc)
         * @see net.rim.device.api.ui.component.ButtonField#layout(int, int)
         */
        protected void layout(int width, int height) {
                setExtent(getPreferredWidth(), getPreferredHeight());
        }

        /* (non-Javadoc)
         * @see net.rim.device.api.ui.component.ButtonField#getPreferredWidth()
         */
        public int getPreferredWidth() {
                return bitmap.getWidth();
        }

        /* (non-Javadoc)
         * @see net.rim.device.api.ui.component.ButtonField#getPreferredHeight()
         */
        public int getPreferredHeight() {
                return bitmap.getHeight();
        }

        /* (non-Javadoc)
         * @see net.rim.device.api.ui.component.ButtonField#paint(net.rim.device.api.ui.Graphics)
         */
        protected void paint(Graphics graphics) {
                super.paint(graphics);
                int width = bitmap.getWidth();
                int height = bitmap.getHeight();
                Bitmap b = bitmap;
                if (highlighted)
                    b = bitmapHighlight;
                graphics.drawBitmap(0, 0, width, height, b, 0, 0);
        }

        public void setHighlight(boolean highlight)
        {
            this.highlighted = highlight;           
        }
}