centrally two button not looking good blackberry

Question

I am developing one app in which I want to create two buttons. These buttons should be center aligned custom buttons with bitmap fill backgrounds. Each should also contain text that is centered in that button.

The problem is that those two buttons are not set properly. The second button is gone behind the first and its bitmap height is also decreased compared to the first button.

For both custom buttons I have the same CustomButton class.

Here is code:

 CustomButtonField aboutM1 = new CustomButtonField(0,"About G1",registerbg,registerbg,Field.FOCUSABLE,0x324F85);
                    add(new RichTextField(Field.NON_FOCUSABLE));

                  //  CustomButtonField2 ForgotPass = new CustomButtonField2("Forgot Password?",0x324F85);
                    CustomButtonField ForgotPass = new CustomButtonField(0,"Forgot Password?",registerbg,registerbg,Field.FOCUSABLE,0x324F85);

                    add(new RichTextField(Field.NON_FOCUSABLE));

                    VerticalFieldManager bottomVFM = new VerticalFieldManager(USE_ALL_WIDTH);
                    HorizontalFieldManager bottomHFM = new HorizontalFieldManager(FIELD_HCENTER);

                    bottomHFM.add(aboutM1);
                    bottomHFM.add(ForgotPass);
                    bottomVFM.add(bottomHFM);
                    add(bottomVFM);

Custom Button:

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.ui.*;

public class CustomButtonField extends Field
{
    Bitmap Unfocus_img, Focus_img, current_pic;
    int width;
    String text;
    Font font;   
    int custColor;
    CustomButtonField(int width, String text, Bitmap onFocus, Bitmap onUnfocus, long style,int custColor)
    {
        super(style);
        Unfocus_img = onUnfocus;
        Focus_img = onFocus;
        current_pic = onFocus;
        this.text = text;
        this.width = width;
        this.custColor = custColor;
    }
    protected void layout(int width, int height) 
    {
        setExtent(current_pic.getWidth(), current_pic.getHeight());        
    }
    protected void paint(Graphics graphics) 
    {
        try
        {
                FontFamily fntFamily = FontFamily.forName("BBAlpha Sans");
                font = fntFamily.getFont(Font.BOLD,20);              
        }
        catch(Exception e)
        {
            font = Font.getDefault();

        }
        graphics.setFont(font);


        graphics.setColor(custColor); 

        int xText = (getWidth() - font.getAdvance(text)) / 2;
        int yText = (getHeight() - font.getHeight()) / 2;

        graphics.drawBitmap(0, 0, current_pic.getWidth(), current_pic.getHeight(), current_pic , 0 , 0);
        graphics.drawText(text, xText, yText);

       /* graphics.drawBitmap(0, 0, current_pic.getWidth(), current_pic.getHeight(), current_pic , 0 , 0);
        graphics.drawText(text, width , 7);*/
        graphics.setDrawingStyle(Graphics.HCENTER | Graphics.VCENTER, true);
    }
    protected void onFocus(int direction) 
    {
        super.onFocus(direction);
        current_pic = Unfocus_img;
        this.invalidate();
    }
  protected void drawFocus(Graphics graphics, boolean on) 
  {

    }
    protected void onUnfocus() 
    {
        super.onUnfocus();
        current_pic = Focus_img;
        invalidate();
    }
    public boolean isFocusable() {
        return true;
    }
    protected boolean navigationClick(int status, int time) {
        fieldChangeNotify(0);
        return true;
    }
} 

Answer 1

The code you used is correct , the only drawback is that you are centering your text according to your bitmap width & text length is more than bitmap width . You may need to change your approach . Have a look on Blackberry UI samples in this below URL & check for EmbossedButtonField Demo

https://github.com/blackberry/Samples-for-Java

Its a good approach to create a custom button , once we are not sure by the button label length.