4 Replies Latest reply: Jan 24, 2012 6:26 AM by peter_strange RSS

Background Image on User Interface

workhorse Novice

I am trying to place a background image behind my application screen. So instead of the usual white there would be a "background.png". I am following this thread along with the blackberry API set 

 

drawing bitmap in Mainscreen background

 

So far I have tried to implement it inside my own app, with the beginning code as follows: 

 

final class UserInterfaceScreen extends MainScreen {
 HorizontalFieldManager _fieldManagerTop;
 VerticalFieldManager _fieldManagerMiddle;
 HorizontalFieldManager _fieldManagerBottom;
 BitmapField _bitmap;
 Bitmap _canadaImage, _ukImage, _usImage, _backgroundBitmap, _fieldBitmap;
 LabelField _label;
 BasicEditField _input;
 String _canadaCapital, _ukCapital, _usCapital, _capital;
 int displayed = 0;

 public UserInterfaceScreen() {
  super();
  LabelField title = new LabelField("User Interface Sample",
    LabelField.ELLIPSIS | LabelField.USE_ALL_WIDTH);
  setTitle(title);

  HorizontalFieldManager _horizontalFieldManager = new HorizontalFieldManager(HorizontalFieldManager.USE_ALL_WIDTH | HorizontalFieldManager.USE_ALL_HEIGHT){
            
            //Override the paint method to draw the background image.
            public void paint(Graphics graphics)
            {
                //Draw the background image and then call paint.
                graphics.drawBitmap(0, 0, 640, 900, _backgroundBitmap, 0, 0); //240
                super.paint(graphics);
            }            
            
        };
        _backgroundBitmap = Bitmap.getBitmapResource("background.png");
  _fieldManagerTop = new HorizontalFieldManager();
  _fieldManagerMiddle = new VerticalFieldManager();
  _fieldManagerBottom = new HorizontalFieldManager();

   add(_horizontalFieldManager);
   add(_fieldManagerTop);
   add(new SeparatorField());
   add(_fieldManagerMiddle);
   add(new SeparatorField());
   add(_fieldManagerBottom);

 

Basically I am trying to combine the above thread with the user interface tutorial.

 

User Interface

 

The issue is when I run the code, I just get the background picture, none of the other content is showing up in the foreground. Am I approaching this correctly?

  • Re: Background Image on User Interface
    shism2 Novice

    Well, it won't work with the code as it is now. The OP has to remove the overridng of the horizontal field manager and the flags it has too.

  • Re: Background Image on User Interface
    shism2 Novice

    1. Set NO_VERTICAL_SCROLL to the super constructor

    2. Use getMainManager().setBackground and BackgroundFactory for the background image

    3. Add another vertical field manager to the screen with the Flag VERTICAL_SCROLL

    4.Add every other field to that new vertical field manager

  • Re: Background Image on User Interface
    peter_strange Master

    I'm not sure the solution you have been given will work - it may well do, but the approach taken is different to what I do.  I base my background image processing around the comments in this KB article:

    MainScreen explained

     

    But if you look at what you have told your MainScreen, you will see why you  don't see any of your real Fields.

     

    The first thing you add to your Screen is this:

     

    HorizontalFieldManager _horizontalFieldManager = new HorizontalFieldManager(HorizontalFieldManager.USE_ALL_WIDTH | HorizontalFieldManager.USE_ALL_HEIGHT){

     

    You have told this Manager to use the whole height and width.  So what space is left over for any other Manager/Field.

     

    You are only adding this to provide abackground.  So in fact, for this to work, you shoud add all your Fields and managers to this HFM.  Otherwise that will be displaying after this one (which as noted means they have no space to display in). I think  you will see something, if you replace this:

       add(_horizontalFieldManager);
    add(_fieldManagerTop);
    add(new SeparatorField());
    add(_fieldManagerMiddle);
    add(new SeparatorField());
    add(_fieldManagerBottom);

     

    with

       add(_horizontalFieldManager);
    _horizontalFieldManager.add(_fieldManagerTop);
    _horizontalFieldManager.add(new SeparatorField());
    _horizontalFieldManager.add(_fieldManagerMiddle);
    _horizontalFieldManager.add(new SeparatorField());
    _horizontalFieldManager.add(_fieldManagerBottom);

     

    But it will probably not be right, so you should follow the advice given in the previous Post and/or review the KB article.