Blackberry User Interface Design - Customizable UI?

John Stewart picture John Stewart · Sep 18, 2009 · Viewed 28.4k times · Source

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

Maksym Gontar picture Maksym Gontar · Sep 18, 2009

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