Blackberry Custom Scrollable Bottom menu

In this blog i will show you how to implement Custom Scrollable Bottom Menu.

Screen Shots1:-

 

Screen Shots2) After Clicking menu item button open PopUp dialog

 

Download full Source Code Click CustomBottomMenu


Steps are given below:-

1) Create a Blackberry Project.

public final class MenuScreen extends MainScreen implements FieldChangeListener {

    private String simpleLableText = "Welcome to Amit Blackberry Blog\n Here i use Popup menu and \n CustomHoriziontalField that provide rotation effect\n i added custom popup\n and add CustomHoriziontalField in it \n i hope you like this example and \n it is useful for you,\n thanks \n Amit Gupta";
    private CustomHorizontalField menuField = null;
    private boolean isPopUpInDisplay = false;
    // MENU BUTTONS ----START
    Bitmap bitmapHome = null;
    Bitmap bitmapNext = null;
    Bitmap bitmapBack = null;
    Bitmap bitmapToc = null;
    Bitmap bitmapSettings = null;

    CustomBitmapButtomField btnHome = null;
    CustomBitmapButtomField btnNext = null;
    CustomBitmapButtomField btnBack = null;
    CustomBitmapButtomField btnToc = null;
    CustomBitmapButtomField btnSettings = null;

    PopupScreen popupScreen = null;

    public MenuScreen() {

        add(new LabelField(simpleLableText));
        addItems();
    }

    private void addItems() {
        menuField = new CustomHorizontalField();
        menuField.setBorder(BorderFactory.createBevelBorder(new XYEdges(4, 0,
                0, 0), new XYEdges(Color.DARKBLUE, 0, 0, 0), new XYEdges(
                Color.WHITE, 0, 0, 0)));
        menuField.setBackground(BackgroundFactory
                .createLinearGradientBackground(Color.DARKBLUE, Color.DARKBLUE,
                        Color.LIGHTBLUE, Color.LIGHTBLUE));
        createMenu();
    }

    private void createMenu() {

        bitmapHome = Bitmap.getBitmapResource("img/home.png");
        bitmapNext = Bitmap.getBitmapResource("img/nn.png");
        bitmapBack = Bitmap.getBitmapResource("img/ff.png");
        bitmapToc = Bitmap.getBitmapResource("img/toc.png");
        bitmapSettings = Bitmap.getBitmapResource("img/si.png");

        btnHome = new CustomBitmapButtomField(bitmapHome, bitmapHome,
                bitmapHome);
        btnNext = new CustomBitmapButtomField(bitmapNext, bitmapNext,
                bitmapNext);
        btnBack = new CustomBitmapButtomField(bitmapBack, bitmapBack,
                bitmapBack);
        btnToc = new CustomBitmapButtomField(bitmapToc, bitmapToc, bitmapToc);
        btnSettings = new CustomBitmapButtomField(bitmapSettings,
                bitmapSettings, bitmapSettings);

        btnHome.setChangeListener(this);
        btnNext.setChangeListener(this);
        btnBack.setChangeListener(this);
        btnToc.setChangeListener(this);
        btnSettings.setChangeListener(this);

        addButtonsToMenu();

        popupScreen = new PopupScreen(menuField) {
            protected void sublayout(int width, int height) {
                super.sublayout(width, height);
                super.setExtent(width, height);
                setPosition(0, Display.getHeight() - menuField.getHeight());
            };

            protected boolean keyDown(int keycode, int time) {

                if ((Keypad.key(keycode) == (Keypad.KEY_ESCAPE))
                        || Keypad.key(keycode) == (Keypad.KEY_MENU)) {
                    UiApplication.getUiApplication().popScreen(this);
                    MenuScreen.this.isPopUpInDisplay = false;
                    return true;
                } else
                    return super.keyDown(keycode, time);
            };
        };

        popupScreen.setBackground(BackgroundFactory
                .createSolidTransparentBackground(Color.BLACK, 50));
        popupScreen.setBorder(BorderFactory.createSimpleBorder(new XYEdges(0,
                0, 0, 0)));
        isPopUpInDisplay = false;

    }

    public void fieldChanged(Field field, int context) {

        UiApplication.getUiApplication().popScreen(popupScreen);
        isPopUpInDisplay = false;
        menuField.enableMoving = false;

        if (field == btnHome) {
            Dialog.inform("Home Button clicked");
        } else if (field == btnNext) {
            Dialog.inform("Next Button clicked");
        } else if (field == btnBack) {
            Dialog.inform("Back Button clicked");
        } else if (field == btnSettings) {
            Dialog.inform("Settings Button clicked");
        } else if (field == btnToc) {
            Dialog.inform("Toc Button clicked");
        }

    }

    private void addButtonsToMenu() {
        menuField.add(btnHome);
        menuField.add(btnToc);
        menuField.add(btnBack);
        menuField.add(btnNext);
        menuField.add(btnSettings);

        int padding = menuField.getFieldPadding(bitmapHome);

        btnHome.setPadding(new XYEdges(0, padding, 0, padding));
        btnNext.setPadding(new XYEdges(0, padding, 0, padding));
        btnBack.setPadding(new XYEdges(0, padding, 0, padding));
        btnToc.setPadding(new XYEdges(0, padding, 0, padding));
        btnSettings.setPadding(new XYEdges(0, padding, 0, padding));

    }

    protected boolean keyDown(int keycode, int time) {
        if (Keypad.KEY_MENU == Keypad.key(keycode)) {
            System.out.println("isPopupDisplay :" + isPopUpInDisplay);
            if (isPopUpInDisplay) {
                // delete(menuField);
                isPopUpInDisplay = false;
                UiApplication.getUiApplication().popScreen(popupScreen);
                menuField.enableMoving = false;

            } else {
                isPopUpInDisplay = true;
                UiApplication.getUiApplication().pushScreen(popupScreen);
                menuField.getField(2).setFocus();
                menuField.enableMoving = true;

            }
            return true;
        } else
            return super.keyDown(keycode, time);

    }

}

Step2)
Create a package called as "com.amit.custommenu.component"
inside src/com.amit.custommenu.component

Create a class CustomBitmapButtomField.java

package com.amit.custommenu.component;

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

public class CustomBitmapButtomField extends ButtonField{
   
   private     Bitmap activeBtn = null;
   private  Bitmap normalBtn = null;
   private  Bitmap focusBtn = null;
  
   private int btnHeight = 0;
   private int btnWidth = 0;
  
  
   public CustomBitmapButtomField(Bitmap normal,Bitmap focus,Bitmap active) {
       activeBtn = active;
       normalBtn = normal ;
       focusBtn = focus;
       btnWidth = normalBtn.getWidth();
       btnHeight = normalBtn.getWidth();
       setMargin(0, 0, 0, 0);
       setPadding(0,0,0,0);
       setBorder(BorderFactory.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
       setBorder(VISUAL_STATE_ACTIVE, BorderFactory.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
   }
  
   protected void paint(Graphics graphics) {
         Bitmap bitmap = null;
         switch (getVisualState()) {
        case VISUAL_STATE_NORMAL:
            bitmap = normalBtn;
            break;
        case VISUAL_STATE_FOCUS:
            bitmap = focusBtn;
            break;
        case VISUAL_STATE_ACTIVE:
            bitmap = activeBtn;
            break;
        default:
            bitmap = normalBtn;
            break;
        }
        graphics.drawBitmap(0, 0, bitmap.getWidth(), bitmap.getHeight(), bitmap, 0, 0);
    }
  
   public int getPreferredWidth() {
        return btnWidth;
    }
   public int getPreferredHeight() {
        return btnHeight;
    }
   protected void layout(int width, int height) {
        setExtent(btnHeight,btnHeight);
    }
  
  
   
}

2.1 Create class called as CustomHorizontalField.java

package com.amit.custommenu.component;

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;
import net.rim.device.api.ui.Field;
import net.rim.device.api.ui.container.HorizontalFieldManager;

public class CustomHorizontalField extends HorizontalFieldManager {

   
    public boolean enableMoving = false;
    private int focusOnIndex = 0;   
   
    public void focusChangeNotify(int arg0) {
   
        super.focusChangeNotify(arg0);
       
        if(enableMoving)
        {
            int newFocusIndex = getFieldWithFocusIndex();
            if(newFocusIndex != focusOnIndex)
            {
                if( (newFocusIndex - focusOnIndex )> 0 )
                {
                    startRotation(0, getFieldCount()-1);       
                }else
                {
                    startRotation(getFieldCount()-1, 0);
                }
            }
           
        }else
        {
            focusOnIndex = getFieldWithFocusIndex();
        }
       
    }
    public int getPreferredWidth() {
        return Display.getWidth();
    }
    public int getPreferredHeight() {
        return super.getPreferredHeight();
    }
    protected void sublayout(int maxWidth, int maxHeight) {
        super.sublayout(Display.getWidth(), getPreferredHeight());
        setExtent(Display.getWidth(), getPreferredHeight());
    }
   
    public int getFieldPadding(Bitmap bitmap)
    {
        System.out.println("Bitmap Width :"+bitmap.getWidth());
        System.out.println("getFieldCount:"+getFieldCount());
        System.out.println("Display.getWidth:"+Display.getWidth());
       
        int padding = ( Display.getWidth() - ( bitmap.getWidth() * getFieldCount() ) )/(getFieldCount()*2);
       
        if(padding < 0)
        padding = 0;
       
        return padding;
    }
    private void startRotation(int from,int to)
    {
        Field field = getField(from);
        delete(field);
        insert(field, to);
    }
   
   
}






If you have any doubt fell free to mail in
amithigh.gupta@gmail.com