Question

I made one horizontalfieldmaanger which will take full width and 10% height of screen. Now I want to add 3 fields to this manager respectively. First will be BitmapField(10% width of screen), second will be LabelField(80% width of screen), third will be BitmapField(10% width of screen).

Its all done thing that is remaining is centering contents of these fields to centre within field itself.

Here is code:-

public final class MyScreen extends MainScreen
{
public MyScreen()
{   
    final int disWidth = Display.getWidth();
    final int disHeight = Display.getHeight();
    final int heightHFM = (disHeight*10)/100;

    HorizontalFieldManager hfm = new HorizontalFieldManager(){
        protected void sublayout(int maxWidth, int maxHeight) {
            // TODO Auto-generated method stub
            super.sublayout(maxWidth, maxHeight);
            this.setExtent(disWidth,heightHFM);

    }
    };
    hfm.setBackground(BackgroundFactory.createSolidBackground(Color.GRAY));

    BitmapField bmp_leftArrow = new BitmapField(Bitmap.getBitmapResource("arrow_left.png")){
        protected void layout(int width, int height) {
            // TODO Auto-generated method stub
            super.layout(width, height);
            this.setExtent((disWidth*10)/100, height);
        }
    };
    bmp_leftArrow.setBackground(BackgroundFactory.createSolidBackground(Color.BLUE));

    LabelField lbl_tit = new LabelField("Current Date"){
        protected void layout(int width, int height) {
            // TODO Auto-generated method stub
            super.layout(width, height);
            this.setExtent((disWidth*80)/100, height);
        }
    };
    lbl_tit.setBackground(BackgroundFactory.createSolidBackground(Color.RED));
    BitmapField bmp_rightArrow = new BitmapField(Bitmap.getBitmapResource("arrow_left.png")){
        protected void layout(int width, int height) {
            // TODO Auto-generated method stub
            super.layout(width, height);
            this.setExtent((disWidth*10)/100, height);
        }
    };
    bmp_rightArrow.setBackground(BackgroundFactory.createSolidBackground(Color.GREEN));
    hfm.add(bmp_leftArrow);
    hfm.add(lbl_tit);
    hfm.add(bmp_rightArrow);
    add(hfm);

}
}

Need to achieve same output when we use gravity of any view in android

Answer 1

For custom positioning and alignment of the child fields, A dedicated FieldManger with specified layout and field positioning is useful. You can try the following CustomHorizontalFieldManager which extends Manager.

Generated Output

Using the Manager

public class MyScreen extends MainScreen
{
    public MyScreen()
    {        
        CustomHorizontalFieldManager chfm = new CustomHorizontalFieldManager();
        Background bg = BackgroundFactory.createSolidBackground(Color.BROWN);
        chfm.setBackground(bg);

        BitmapField bmf0 = new BitmapField(Bitmap.getBitmapResource("img0.png"));
        BitmapField bmf1 = new BitmapField(Bitmap.getBitmapResource("img1.png"));

        CutomLabelField lblf = new CutomLabelField("Current Date");

        bg = BackgroundFactory.createSolidBackground(Color.GREEN);
        lblf.setBackground(bg);

        bg = BackgroundFactory.createSolidBackground(Color.GREEN);
        bmf0.setBackground(bg);

        bg = BackgroundFactory.createSolidBackground(Color.GREEN);
        bmf1.setBackground(bg);

        chfm.add(bmf0);
        chfm.add(lblf);
        chfm.add(bmf1);

        add(chfm);
    }
}

Implementation of the Manager

class CustomHorizontalFieldManager extends Manager {

    public CustomHorizontalFieldManager() {
        super(0);
    }

    private int width0, width1, width2;
    private Field f0, f1, f2;
    int x0, x1, x2, y0, y1, y2;

    protected void sublayout(int width, int height) {
        if (getFieldCount() == 3) {
            // calculate total width, total height
            width = Display.getWidth();
            height = getPercentage(Display.getHeight(), 10);

            // calculate field's width
            width0 = getPercentage(width, 10);
            width1 = getPercentage(width, 80);
            width2 = getPercentage(width, 10);

            f0 = getField(0);
            f1 = getField(1);
            f2 = getField(2);

            // layout all the child
            layoutChild(f0, width0, height);
            layoutChild(f1, width1, height);
            layoutChild(f2, width2, height);

            // Specify position of the child.           
            // Alignment of the fields can be adjusted here.
            // Following lines will align them
            // on center, both vertically and horizontally.
            x0 = (width0 - f0.getWidth()) / 2;
            x1 = width0 + (width1 - f1.getWidth()) / 2;
            x2 = width0 + width1 + (width2 - f2.getWidth()) / 2;

            y0 = (height - f0.getHeight()) / 2;
            y1 = (height - f1.getHeight()) / 2;
            y2 = (height - f2.getHeight()) / 2;

            setPositionChild(f0, x0, y0);
            setPositionChild(f1, x1, y1);
            setPositionChild(f2, x2, y2);

            setExtent(width, height);
        } else {
            // The manager contains some
            // invalid number of fields.

            // Make manager invisible.
            setExtent(0, 0);
        }
    }   

    int getPercentage(int value, int percent) {
        return (value * percent) / 100;
    }
}

Draft implementation of CustomLabelField

class CutomLabelField extends Field {
    private String text;

    public CutomLabelField(String text) {
        this.text = (text == null) ? "" : text;
    }

    int xText;
    int yText;  
    int availableWidth;

    protected void layout(int width, int height) {      
        // positioning text.
        int textWidth = getFont().getAdvance(text);
        availableWidth = width - getPaddingLeft() - getPaddingRight();
        if (availableWidth < textWidth) {
            xText = getPaddingLeft();
        } else {
            xText = getPaddingLeft() + (availableWidth - textWidth) / 2;
        }
        yText = (height - getFont().getHeight()) / 2;

        // using all width and height
        setExtent(width, height);
    }

    protected void paint(Graphics graphics) {
        // set text color
        graphics.setColor(Color.BLACK);
        graphics.drawText(text, xText, yText, DrawStyle.ELLIPSIS, availableWidth);
    }

    public void setText(String text) {
        this.text = (text == null) ? "" : text;
        updateLayout();
    }

    public String getText() {
        return this.text;
    }
}