Question

I have a background image, and overlay 2 LabelFields, a BasicEditField, and a ButtonField overlayed on one screen. My issue is that my background image cuts off after the bottom of the button, instead of filling the screen completely. (I removed superfluous code for ease of reading)

    VerticalFieldManager bgManager = new VerticalFieldManager(Manager.USE_ALL_WIDTH | 
                                                              Manager.NO_VERTICAL_SCROLL | 
                                                              Manager.NO_VERTICAL_SCROLLBAR) {

        //Override the paint method to draw the background image.
        public void paint(Graphics graphics)
        {
            //Draw the background image and then call super.paint
            //to paint the rest of the screen.
            graphics.drawBitmap(0, 0, Display.getWidth(), Display.getHeight(), backgroundBitmap, 0, 0);
            super.paint(graphics);
        }
    };
    this.add(bgManager);

    LabelField header = new LabelField("", LabelField.USE_ALL_WIDTH | DrawStyle.HCENTER);
    header.setText("Search by Drug Name");
    bgManager.add(header);

    LabelField subtitle = new LabelField("", LabelField.USE_ALL_WIDTH | DrawStyle.HCENTER);
    subtitle.setText("(brand name or generic)");
    bgManager.add(subtitle);

    HorizontalFieldManager hfm = new HorizontalFieldManager();

    final BasicEditField edit = new BasicEditField("", "", 50, EditField.EDITABLE | BasicEditField.NO_NEWLINE) {
        //code to make background of text box white
        }
    };
    hfm.add(edit);

    ButtonField search = new ButtonField("Search");
    search.setChangeListener(new FieldChangeListener() {

        public void fieldChanged(Field field, int context) {
            //do something
        }
    });

My background image fills the screen completely if I add Manager.USE_ALL_HEIGHT to bgManager, but then my entire screen becomes scrollable infinitely. Without Manager.USE_ALL_HEIGHT, my screen is not scrollable at all (correct), but the background image cuts off at the end of the content.

How can I build this screen so it is not scrollable and has a background image that takes up the entire visible screen?

Here is what it looks like wrong:

Here is what it looks like correct (but scrolls incorrectly):

Here is the background image I am using:

Answer 1

I believe that the easiest way to change your code is to in fact use the USE_ALL_HEIGHT flag.

  VerticalFieldManager bgManager =
    new VerticalFieldManager(Manager.NO_VERTICAL_SCROLL | 
                             Manager.NO_VERTICAL_SCROLLBAR | 
                             Manager.USE_ALL_WIDTH | 
                             Manager.USE_ALL_HEIGHT) {

Which will fill your screen with the background image.

You don’t show this code, but I’m guessing the problem is not that bgManager is actually allowing scrolling, but that the Screen that it’s in is allowing vertical scrolling. So, make sure the container you put your code in disables scrolling. Something like this:

public class BgCropScreen extends MainScreen {

   public BgCropScreen() {
      super(MainScreen.NO_VERTICAL_SCROLL);  // <<<<<< THIS IS THE CRITICAL LINE !!!!!!

      VerticalFieldManager bgManager = new VerticalFieldManager(Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR | Manager.USE_ALL_WIDTH | Manager.USE_ALL_HEIGHT) {
         // to draw the background image.
         public void paint(Graphics graphics) {
            graphics.drawBitmap(0, 0, Display.getWidth(), Display.getHeight(), backgroundBitmap, 0, 0);
            super.paint(graphics);
         }                
      };
      this.add(bgManager);

Here is the documentation for doing this. It points out that in newer versions of the OS, it’s probably easier to use the BackgroundFactory methods for creating backgrounds, using Bitmaps, gradients, colors, etc. Just another option, though.