The use of field background colors and rounded borders is a great way to enhance the user experience in your BlackBerry applications.
Let’s examine how to create a screen with a nice linear background, and a rounded border for the region that contains the input fields, as shown in the following picture:
Setting a field’s background color in a BlackBerry application
We will use the setBackground family of functions of the Field Class to specify a field’s background for the different states of the field; and we will use the BackgroundFactory Class to create the type of background we need (BackgroundFactory provides solid, linear and bitmap backgrounds).
To set the background of our screen, we set the background of its main manager like so:
class MyScreen extends MainScreen { public MyScreen() { this.setTitle("My Screen"); // Set the linear background. this.getMainManager().setBackground( BackgroundFactory.createLinearGradientBackground(0x0099CCFF, 0x0099CCFF,0x00336699,0x00336699) ); } }
Now it’s time to work on the rounded border.
Creating fields with rounded borders
The BorderFactory Class has a variety of functions that create different types of borders. We will use the createBitmapBorder function to specify the rounded border for the region that contains the input fields on the screen:
class MyScreen extends MainScreen { public MyScreen() { this.setTitle("My Screen"); // Linear background goes here... // Create a vertical field manager with a rounded border. Bitmap borderBitmap = Bitmap.getBitmapResource("rounded.png"); VerticalFieldManager m = new VerticalFieldManager(); m.setBorder( BorderFactory.createBitmapBorder( new XYEdges(12,12,12,12), borderBitmap ) ); } }
Here’s the rounded.png image used for the border bitmap:
With the background and border ready, we can add fields to the vertical field manager:
class MyScreen extends MainScreen { public MyScreen() { this.setTitle("My Screen"); // Set the linear background. this.getMainManager().setBackground( BackgroundFactory.createLinearGradientBackground(0x0099CCFF, 0x0099CCFF,0x00336699,0x00336699) ); // Create a vertical field manager with a rounded border. Bitmap borderBitmap = Bitmap.getBitmapResource("rounded.png"); VerticalFieldManager m = new VerticalFieldManager(); m.setBorder( BorderFactory.createBitmapBorder( new XYEdges(12,12,12,12), borderBitmap ) ); Border fieldBorder = BorderFactory.createSimpleBorder(new XYEdges(5,5,5,0),Border.STYLE_TRANSPARENT); java.util.Date today = new java.util.Date(); DateField dateField = new DateField("Date:", today.getTime(),DateField.DATE | DrawStyle.LEFT); m.add(dateField); m.add(new SeparatorField()); AutoTextEditField projectField = new AutoTextEditField("Project:", "",1024,EditField.FILTER_DEFAULT); m.add(projectField); projectField.setBorder(fieldBorder); m.add(new SeparatorField()); EditField hoursField = new EditField("Hours:", "",4,EditField.FILTER_DEFAULT); m.add(hoursField); hoursField.setBorder(fieldBorder); m.add(new SeparatorField()); AutoTextEditField notesField = new AutoTextEditField("Notes:", "",1024,EditField.FILTER_DEFAULT); notesField.setBorder(fieldBorder); m.add(notesField); add(m); } }
Conclusion
This has been a simple example of how to use backgrounds and borders to enhance the user experience in your BlackBerry applications. (You can find more information in the BlackBerry Support Forums.)
Is this something you do in your applications? What approaches do you follow?
Thanks a lot for this code.
This make my life easier !!!!!!!!!!
Thanx a lot yar…
it helped me a lot.. 🙂
Thanks a lot. This was very very helpful for beginners like me!!
Hello Friend. I am newbie for blackberry application. how to bind data from sqlite using table view .? plz hep me
Thanks a lot.
Jorge. Soy Marcos Escudero de Arngetina. Quisiera hacerte algunas preguntas. Muchas gracias
Thanks for this it will help me alot.
I have a query how doe the image corners relate to the amount of padding. If i wanted to create my own image how do I get the amount of padding needed
Thank you for sharing this code. It gave me idea on a design I’ve been working on for a while. The line between the fields, I found, as a really brilliant idea – the whole screen looks nicer.
Thanks! I’m glad this article helped you.
Hello jorge,
Thank you very much man. This was really cool stuff. keep posting some more Ui concepts. God bless you my friend.
Thanks, This article very help full in my project.
thanks a lot Jorge..
very very nice codes!
You’re welcome!
nice, appreciated!
When i fill background color my already label’s background showing white color i need complete background color…..
Hi it really helped me a lot. But i am not getting the full background color. I am not getting the background color for round border vertical manager. Can you help me in this?
Please can You explain the use of XYEdges in setting the border when i changed the value to (1, 1, 1, 1)
than it showed lots of images..
wow cool(y) thanks a lot 😉