Tutorials Blackberry Custom Image ButtonField in Blackberry

Custom Image ButtonField in Blackberry

The Blackberry SDK provided ButtonField class doesn’t allow much customization. It is Grey when not selected, and when selected it is highlighted. The highlight color depends on the current theme. Because the ButtonField doesn’t allow you to customize its appearance you must create your own custom field if you wish to do so. CustomImageButtonField class below is almost identical to the standard ButtonField, it allows you to specify the the highlight color and background image. And also it is capable of event handling.

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

public class CustomImageButtonField extends Field implements DrawStyle {
    private Bitmap _currentPicture;
    private Bitmap _onPicture; 
    private Bitmap _offPicture; 
    private int backgroundColor;
    private int height, width;

    public CustomImageButtonField(String onImage, String offImage, int backgroundColor) {
        _offPicture = Bitmap.getBitmapResource(offImage);
        _onPicture = Bitmap.getBitmapResource(onImage);
        _currentPicture = _offPicture;
        height = _offPicture.getHeight();
        width = _offPicture.getWidth();

    public CustomImageButtonField(String onImage, String offImage, int backgroundColor, XYEdges padding) {
        this(onImage, offImage, backgroundColor );

    public int getPreferredHeight() {
        return height;

    public int getPreferredWidth() {
        return width;

    public boolean isFocusable() {
        return true;

    protected void onFocus(int direction) {
        _currentPicture = _onPicture;

    protected void onUnfocus() {
        _currentPicture = _offPicture;

    protected void layout(int width, int height) {
        setExtent(Math.min(width, getPreferredWidth()), Math.min(height,getPreferredHeight()));

    protected void fieldChangeNotify(int context) {
        try {
            this.getChangeListener().fieldChanged(this, context);
        } catch (Exception exception) {

    protected boolean navigationClick(int status, int time) {
        return true;

    protected void paint(Graphics graphics) {
        graphics.fillRect(0, 0, getWidth(), getHeight());
        graphics.drawBitmap(0, 0, getWidth(), getHeight(), _currentPicture, 0, 0);

Newest Most Voted
Inline Feedbacks
View all comments
Javin @ FIX Protocol Tutorial
Javin @ FIX Protocol Tutorial
11 years ago

Thanks for sharing information dude. your blog will certainly help SCJP aspirants.keep the good work going.

How to setup remote debugging in Eclipse

10 years ago

Hey Javatechig, if you respond to these posts, i’ve used ur code above to add a few buttons to a grid field manager. however on touch events are triggered even if the touch is not on the custom button field. any idea y that happens? however, extending your class to ButtonField instead of Field solves the problem but leaves a ugly button under the image. Can you pls give this problem a look. Thank you for the wonderful code though. JDE 4.7 is what i’m working on.

Previous Post
Android Tutorials Javatechig

What is Android Virtual Device

Next Post
Android Tutorials Javatechig

Image Picker Using Intent.ACTION_PICK in Android

Related Posts
By clicking “Allow All”, you agree to the storing of cookies on your device to enhance site navigation, analyze site usage, and assist in our marketing efforts. Cookie Notice
Allow All