Blackberry User Interface Design - Customizable UI

Question

I am trying to design a Blackberry Application and I am wondering if there are any resources on how to create custom user interface elements, skin existing ones and what other possibilities are there?

I have developed a few iPhone applications with custom UI and stuff, so not sure what BB world offers in terms of UI development.

Any tips, suggestions or ideas would be great.

Answer 1

The resources aren't very good unfortunately. The best source of information is usually Google linking to blogs with the specific topic you're looking for.

If you're just beginning to write BB GUI code, I would highly recommend getting to know the Manager and Field classes since you'll probably have to write many custom extensions of them.

Answer 2

There are no skins in Blackberry, two ways I know to achive skin effect are

• create own theme
• create custom controls

Create BlackBerry Theme

removed dead Imageshack link - BlackBerry Theme Builder

What can you do with Theme Builder? Some of its main features allow you to:

• Customize the BlackBerry application icons
• Change the Home screen banner image and icon/indicator colors
• Create your own buttons
• Customize the look of dialog and pop up screens
• Customize an idle screen
• Customize the look of menus and lists
• Customize the phone application screens
• Customize fonts used on the BlackBerry device

How To Create Your Own Personal Blackberry Themes by BrileyKenney
bb dev journal - Just Theme It!
BlackBerry Themes & Animated Graphics

Bad news - theme is applied to whole device OS and each application
Althought created theme may be a standalone software design product, I don't think it's a great idea to create own theme for developed application.

Design Mockup

Programming gui may take some time and in case you want to resolve some questions in GUI planning without coding, you may want to draw GUI mockup.

You can use free BlackBerry UI Prototyping Visio Stencils - v1.0 from ArtfulBits.

removed dead Imageshack link
removed dead Imageshack link

Creating custom control

By creating custom control you can configure

• control size
• control shape
• control background (color, image)
• control font (size, style, color)
• control border (size, style, color)

All of this for states

• disabled
• normal
• focused
• active (clicked)

In the end you can simply skinn your control by setting background image

Basics

devsushi.com: Blackberry JDE API - User Interface Field Reference will basically give the idea of existent blackberry ui controls, with codesnippets and screenshots.

SO: Add items to a ListField ( BlackBerry )
SO: Embedded HTML control for Blackberry?
SO: Blackberry - how to get datetime value from DateField?
SO: Styling a BlackBerry Application to Look Like an iPhone

Managers, layout

Even using standard controls, we need to layout and group the way we want, thus we need custom managers:
Thinking BlackBerry: BlackBerry UI - Creating a basic field manager
Thinking BlackBerry: Simple BlackBerry Grid Layout Manager
Thinking BlackBerry: Making a Custom Screen, Vertically Scrolling and more
SO: Scrolling problem in Blackberry application
SO: How to set a ScrollBar to the VerticalFieldManager in Blackberry?
Wireless: Create a custom layout manager for a screen
SO: Blackberry - get all child fields of control
SO: Cancel scrolling in Layout Manager
SO: Creating custom layouts in BlackBerry
SO: Blackberry setting the position of a RichtextField in FullScreen
SO: Fun with Field Managers
SO: BlackBerry - Custom menu toolbar
SO: BlackBerry - Custom centered cyclic HorizontalFieldManager

Custom controls

Set of articles about writing custom controls:
Thinking BlackBerry: BlackBerry UI - A simple custom field
Coderholic: Blackberry Custom Button Field
Wireless: Create your own VirtualKeyboard for BBStorm
Wireless: ListField with check boxes
CodeProject: Creating a XY Chart/Plot as a BlackBerry Custom Field
SO: Blackberry - Custom size EditField
SO: Blackberry - How to add border to BasicEditField?
SO: Blackberry - Setting LabelField background color
SO: Blackberry change color of child fields on horizontal manager focus
SO: Setting background and font colors for RichTextField, TextField
SO: Blackberry Java: TextField without the caret?
SO: Image Map-like Blackberry Control - CLDC Application
SO: Blackberry - single line BasicEditField with large text
SO: Blackberry - custom BubbleChartField
SO: Blackberry - get checked items from list with checkboxes
SO: BlackBerry - Creating custom Date Field
SO: BlackBerry - How to create sub menu?
SO: BlackBerry - How can i show a Label with emoticons??
SO: BlackBerry - Show typing mode indicator programmatically

Graphics, animation

SO: BlackBerry - draw image on the screen
SO: Blackberry - background image/animation RIM OS 4.5.0
SO: Blackberry - Loading screen with animation
SO: How to set Anti Aliasing in Blackberry Storm?
SO: Blackberry setting a clipping region/area
SO: Is it better to use Bitmap or EncodedImage in BlackBerry?
SO: Blackberry - fields layout animation

Fonts

Wireless: Change fonts in a BlackBerry application
Developer Journals: Fonts
SO: How do I create a custom font for a blackberry application
SO: How to set a font to LabelField text in Blackberry?
SO: How to make Blackberry UI more attractive?
SO: How to change the font color of blackberry label field dynamically?
SO: BlackBerry - Unicode text display

Answer 3

Example of standard Media application skin on Bold 9000

removed dead ImageShack link - sliced Media application

removed dead ImageShack link - Sliced images

Use extention of ButtonField to map images with buttons:

class BitmapButtonField extends ButtonField {
    Bitmap mNormal;
    Bitmap mFocused;
    Bitmap mActive;

    int mWidth;
    int mHeight;

    public BitmapButtonField(Bitmap normal, Bitmap focused, 
        Bitmap active) {
        super(CONSUME_CLICK);
        mNormal = normal;
        mFocused = focused;
        mActive = active;
        mWidth = mNormal.getWidth();
        mHeight = mNormal.getHeight();
        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 = mNormal;
            break;
        case VISUAL_STATE_FOCUS:
            bitmap = mFocused;
            break;
        case VISUAL_STATE_ACTIVE:
            bitmap = mActive;
            break;
        default:
            bitmap = mNormal;
        }
        graphics.drawBitmap(0, 0, bitmap.getWidth(), bitmap.getHeight(),
                bitmap, 0, 0);
    }

    public int getPreferredWidth() {
        return mWidth;
    }

    public int getPreferredHeight() {
        return mHeight;
    }

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

• put HorizontalFieldManagers inside VerticalFieldManagers and vice versa
• use different images for normal, focused and active states
• if you need a custom shaped buttons, you can draw them over in manager paint() method override, after super.paint()

Rest part of code:

class Scr extends MainScreen implements FieldChangeListener {
    Bitmap mBmpHeader = Bitmap.getBitmapResource("header.png");
    Bitmap mBmpCover = Bitmap.getBitmapResource("cover.png");
    Bitmap mBmpTitle = Bitmap.getBitmapResource("title.png");
    Bitmap mBmpTimeline = Bitmap.getBitmapResource("timeline.png");
    Bitmap mBmpLeftside = Bitmap.getBitmapResource("leftside.png");
    Bitmap mBmpPrevNrm = Bitmap.getBitmapResource("btn_prev_normal.png");
    Bitmap mBmpPlayNrm = Bitmap.getBitmapResource("btn_play_normal.png");
    Bitmap mBmpPauseNrm = Bitmap.getBitmapResource("btn_pause_normal.png");
    Bitmap mBmpStopNrm = Bitmap.getBitmapResource("btn_stop_normal.png");
    Bitmap mBmpNextNrm = Bitmap.getBitmapResource("btn_next_normal.png");
    Bitmap mBmpPrevFcs = Bitmap.getBitmapResource("btn_prev_focused.png");
    Bitmap mBmpPlayFcs = Bitmap.getBitmapResource("btn_play_focused.png");
    Bitmap mBmpPauseFcs = Bitmap.getBitmapResource("btn_pause_focused.png");
    Bitmap mBmpStopFcs = Bitmap.getBitmapResource("btn_stop_focused.png");
    Bitmap mBmpNextFcs = Bitmap.getBitmapResource("btn_next_focused.png");
    Bitmap mBmpRightside = Bitmap.getBitmapResource("rightside.png");
    VerticalFieldManager mMainManager;
    HorizontalFieldManager mHeaderManager;
    HorizontalFieldManager mCoverManager;
    HorizontalFieldManager mTitleManager;
    HorizontalFieldManager mTimelineManager;
    HorizontalFieldManager mToolbarManager;
    BitmapField mHeader;
    BitmapField mCover;
    BitmapField mTitle;
    BitmapField mTimeline;
    BitmapField mLeftside;
    BitmapField mRightside;
    BitmapButtonField mBtnPrev;
    BitmapButtonField mBtnPlay;
    BitmapButtonField mBtnPause;
    BitmapButtonField mBtnStop;
    BitmapButtonField mBtnNext;
    public Scr() {
        add(mMainManager = new VerticalFieldManager());
        addHeader();
        addCover();
        addTitle();
        addTimeline();
        addToolbar();
    }
    private void addHeader() {
        mMainManager.add(mHeaderManager = new HorizontalFieldManager());
        mHeaderManager.add(mHeader = new BitmapField(mBmpHeader));
    }
    private void addCover() {
        mMainManager.add(mCoverManager = new HorizontalFieldManager());
        mCoverManager.add(mCover = new BitmapField(mBmpCover));
    }
    private void addTitle() {
        mMainManager.add(mTitleManager = new HorizontalFieldManager());
        mTitleManager.add(mTitle = new BitmapField(mBmpTitle));
    }
    private void addTimeline() {
        mMainManager.add(mTimelineManager = new HorizontalFieldManager());
        mTimelineManager.add(mTimeline = new BitmapField(mBmpTimeline));
    }
    private void addToolbar() {
        mMainManager.add(mToolbarManager = new HorizontalFieldManager());
        mToolbarManager.add(mLeftside = new BitmapField(mBmpLeftside));
        mToolbarManager.add(mBtnPrev = new BitmapButtonField(mBmpPrevNrm,
                mBmpPrevFcs, mBmpPrevFcs));
        mToolbarManager.add(mBtnPlay = new BitmapButtonField(mBmpPlayNrm,
                mBmpPlayFcs, mBmpPlayFcs));
        mBtnPlay.setChangeListener(this);
        mBtnPause = new BitmapButtonField(mBmpPauseNrm, mBmpPauseFcs,
                mBmpPauseFcs);
        mBtnPause.setChangeListener(this);
        mToolbarManager.add(mBtnStop = new BitmapButtonField(mBmpStopNrm,
                mBmpStopFcs, mBmpStopFcs));
        mToolbarManager.add(mBtnNext = new BitmapButtonField(mBmpNextNrm,
                mBmpNextFcs, mBmpNextFcs));
        mToolbarManager.add(mRightside = new BitmapField(mBmpRightside));
    }
    public void fieldChanged(Field field, int context) {
        if (mBtnPlay == field)
            play();
        else if (mBtnPause == field)
            pause();
    }
    private void pause() {
        mToolbarManager.replace(mBtnPause, mBtnPlay);
    }
    private void play() {
        mToolbarManager.replace(mBtnPlay, mBtnPause);
    }
}