Blackberry - Small Up Down Arrow Button

Question

i want to create 2 buttons for blackberry which look like this...

and the second one inverted of the above

i wanted to do this without using images (for efficiency) and the buttons should appear only when there is focus on them and dis sapper when focus goes off..

Answer 1

You can create a custom Field object, then implement a custom paint() method that draws the geometric shapes you require. Take a look at the Graphics class - your field's paint method is passed the Graphics object and you can make use of that to draw filled rectangles, polygons, etc.

Answer 2

ArrowButtonField as a Field extention:

class ArrowButtonField extends Field {
    public static final int TYPE_UP = 0;
    public static final int TYPE_DOWN = 1;

    private int mBackgroundColor = Color.WHITE;
    private int mFillColor = Color.CRIMSON;
    private int mWidth = 20;
    private int mHeight = 12;
    private int mArrowType = TYPE_UP;

    public ArrowButtonField(int bgColor, int fillColor, int arrowType) {
     super(FOCUSABLE);
     setMargin(0, 0, 0, 0);
     setPadding(0, 0, 0, 0);
     mArrowType = arrowType;
     mBackgroundColor = bgColor;
     mFillColor = fillColor;
    }

    // cancel theme border and background style
    protected void applyTheme(Graphics arg0, boolean arg1) {
    }

    protected boolean navigationUnclick(int status, int time) {
     fieldChangeNotify(0);
     return true;
    }

    protected void onUnfocus() {
     invalidate();
     super.onUnfocus();
    }

    protected void paint(Graphics graphics) {
     graphics.clear();
     graphics.setColor(mBackgroundColor);
     graphics.fillRect(0, 0, mWidth, mHeight);
     if (isFocus()) {
      graphics.setColor(mFillColor);
      int xc = 10;
      int y1 = 0, y2 = 0, x2 = xc - 9, x1 = xc + 9;

      switch (mArrowType) {
      case TYPE_DOWN:
       y1 = 11;
       y2 = 1;
       break;
      case TYPE_UP:
       y1 = 1;
       y2 = 11;
       break;
      default:
       break;
      }
      int[] xPts = new int[] { x1, x2, xc };
      int[] yPts = new int[] { y1, y1, y2 };
      graphics.drawFilledPath(xPts, yPts, null, null);
     }
    }

    public int getPreferredWidth() {
     return mWidth;
    }

    public int getPreferredHeight() {
     return mHeight;
    }

    protected void layout(int width, int height) {
     setExtent(mWidth, mHeight);
    }
}

Classes for Up and Down Arrow:

class UpArrowButtonField extends ArrowButtonField {
    public UpArrowButtonField(int backgroundColor, int fillColor) {
     super(backgroundColor, fillColor, TYPE_UP);
    }
}

class DownArrowButtonField extends ArrowButtonField {
    public DownArrowButtonField(int backgroundColor, int fillColor) {
     super(backgroundColor, fillColor, TYPE_DOWN);
    }
}

Sample of use:

class Scr extends MainScreen implements FieldChangeListener {
    UpArrowButtonField arrowUp;
    DownArrowButtonField arrowDown;

    public Scr() {
     arrowUp = new UpArrowButtonField(Color.WHITE, Color.RED);
     arrowUp.setChangeListener(this);
     add(arrowUp);
     arrowDown = new DownArrowButtonField(Color.WHITE, Color.RED);
     arrowDown.setChangeListener(this);
     add(arrowDown);
    }

    public void fieldChanged(Field field, int context) {
     if (field == arrowUp) {
      Dialog.inform("UP");
     } else if (field == arrowDown) {
      Dialog.inform("DOWN");
     }
    }
}