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