Blackberry Field Managers(Horizontal and Vertical)

Question

I want to make a UI like this image http://i.stack.imgur.com/bB8UM.png .I use the basic Managers like Vertical and Horizontal field managers.But My Horizontal manager is not working.I get single Image in my Horizontal Field manager instead of two.What is the reason for that?Where I am going wrong?

This is my code which I am using-

package mypackage;

import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.*;
import net.rim.device.api.system.*;

class TestScreen extends MainScreen{

    private VerticalFieldManager verticalManager;
    private BitmapField myBitmapField,tipOfTheDay,completeBitmapField,top30BitmapField;
    private FooterText mTextField;

    TestScreen() 
    {    
        super(NO_VERTICAL_SCROLL);

        verticalManager = new VerticalFieldManager(Manager.VERTICAL_SCROLL|Manager.VERTICAL_SCROLLBAR)
        {
            public void paint(Graphics graphics)
            { 
                graphics.setBackgroundColor(0x00000000);
                graphics.clear();
                super.paint(graphics);
            }            
            protected void sublayout( int maxWidth, int maxHeight )
            {
                int width = Display.getWidth();
                int height = Display.getHeight();
                super.sublayout( width, height);
                setExtent( width, height);
            }
        };

        Bitmap logoBitmap = Bitmap.getBitmapResource("mybitmap1.png");
        myBitmapField = new BitmapField(logoBitmap, Field.FIELD_HCENTER);   

        verticalManager.add(myBitmapField);

        Bitmap mytipOfTheDay  = Bitmap.getBitmapResource("tipoftheday.png");

        verticalManager.add(tipOfTheDay = new BitmapField(mytipOfTheDay,Display.getWidth()));
        String text = "Lorem ipsum dolor sit amet, consectetuer \n"
            + "adipiscing elit, sed diam nonummy nibh euismod \n"
            + "tincidunt ut laoreet dolore magna aliquam erat  \n "
            + "volutpat. Ut wisi enim ad minim veniam, quis \n"
            + "nostrud exerci tation ullamcorper suscipit \n"
            + "lobortis nisl ut aliquip ex ea commodo consequat. \n"
            + "Duis autem vel eum iriure dolor in hendrerit in \n";
        verticalManager.add(mTextField = new FooterText(text, Display.getWidth(), Display.getHeight()/2));

        HorizontalFieldManager hfm = new HorizontalFieldManager();
        Bitmap complete  = Bitmap.getBitmapResource("Complete.png");
        Bitmap top30  = Bitmap.getBitmapResource("Top30.png");

        hfm.add(new BitmapField(complete));
        hfm.add(new BitmapField(top30));

        verticalManager.add(hfm);

        this.add(verticalManager);
    }
}

Answer 1

Fields will be evenly spaced on the following HorizontalFieldManager, and the HorizontalFieldManager will accommodate its child with in maximum allowable width.

HorizontalFieldManager hfm = new HorizontalFieldManager() {
    protected void sublayout(int maxWidth, int maxHeight) {
        int w = maxWidth;
        int h = 0;
        Field f0, f1;
        if (getFieldCount() == 2) {
            f0 = getField(0);
            f1 = getField(1);

            layoutChild(f0, maxWidth / 2, maxHeight);
            layoutChild(f1, maxWidth / 2, maxHeight);

            h = Math.max(f0.getHeight(), f1.getHeight());

            setPositionChild(f0, (maxWidth/2 - f0.getWidth()) / 2, (h - f0.getHeight()) / 2);
            setPositionChild(f1, maxWidth/2 + (maxWidth/2 - f1.getWidth()) / 2, (h - f1.getHeight()) / 2);
        }
        setExtent(w, h);
    };
};

Answer 2

Try this -

    HorizontalFieldManager hfm = new HorizontalFieldManager(){
    protected void sublayout(int maxWidth, int maxHeight) 
      { 
      super.sublayout(Display.getWidth()/2,20);  
      setExtent(Display.getWidth()/2,20);
      }
    };
    Bitmap complete  = Bitmap.getBitmapResource("Complete.png");
    Bitmap top30  = Bitmap.getBitmapResource("Top30.png");

    hfm.add(new BitmapField(complete));
    hfm.add(new BitmapField(top30));