Thursday, July 23, 2009

How to set Background Image in Blackberry

For setting image in the background of the Blackberry screen we need to do the following.

First create a VerticalFieldManager and override the paint method of that manager and then draw Bitmap inside paint() method with the device width and height. Disable vertical scrolling of this manager.

Now create another VerticalFieldManager with vertical scroll enabled. This will be the main manger where screen component have to add. Set the width and height of this manager as Screen width and height by overriding sublayout() method.


Here is the example code with above implemented.


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.*;

public class TestScreen extends MainScreen
{

private VerticalFieldManager mainManager;
private VerticalFieldManager subManager;
private Bitmap _backgroundBitmap = Bitmap.getBitmapResource
("sunset.png");
private int deviceWidth = Display.getWidth();
private int deviceHeight = Display.getHeight();

public TestScreen()
{
super(NO_VERTICAL_SCROLL);

//this manager is used for the static background image
mainManager = new VerticalFieldManager(
Manager.NO_VERTICAL_SCROLL |
Manager.NO_VERTICAL_SCROLLBAR )
{
public void paint(Graphics graphics)
{
graphics.clear();
graphics.drawBitmap(0, 0, deviceWidth,
deviceHeight, _backgroundBitmap, 0, 0);
super.paint(graphics);
}
};

//this manger is used for adding the componentes
subManager = new VerticalFieldManager(
Manager.VERTICAL_SCROLL |
Manager.VERTICAL_SCROLLBAR )
{
protected void sublayout(int maxWidth, int maxHeight)
{
int displayWidth = deviceWidth;
int displayHeight = deviceHeight;

super.sublayout( displayWidth, displayHeight);
setExtent( displayWidth, displayHeight);
}
};

/// add your component to this subManager
subManager.add(new ButtonField("Test Button"));
/////////////////////////////////////////

//add subManager over the mainManager
mainManager.add(subManager);

//finally add the mainManager over the screen
this.add(mainManager);
}
}



25 comments:

  1. Thanks for the sample! Setting the extent for the subManager doesn't account for the titleBar. Any ideas of a good way to do that?

    ReplyDelete
  2. Hi and thanks for your code.

    i have some insure when i tried to split your code.

    ex:

    MScreen.java inherit from MainScreen.

    BBaseScreen.java Inherit from VerticalFieldManager.

    so then code here:
    //========================================================
    BBaseScreen

    public class BBaseScreen extends VerticalFieldManager {

    private int _deviceWidth;
    private int _deviceHeight;
    private VerticalFieldManager _contentScreen;
    private Bitmap _backgroundBitmap;

    public BBaseScreen(Bitmap image)
    {
    super(Manager.NO_VERTICAL_SCROLL | Manager.NO_VERTICAL_SCROLLBAR);
    _backgroundBitmap = image;

    _deviceHeight = 400;//Display.getWidth();
    _deviceHeight = 300;//Display.getHeight();

    _contentScreen = new VerticalFieldManager(
    Manager.VERTICAL_SCROLL |
    Manager.VERTICAL_SCROLLBAR )
    {
    protected void sublayout(int maxWidth, int maxHeight)
    {
    int displayWidth = _deviceWidth;
    int displayHeight = _deviceHeight;

    super.sublayout( displayWidth, displayHeight);
    setExtent( displayWidth, displayHeight);
    }
    };

    this.add(_contentScreen);
    }


    public void paint(Graphics graphics)
    {
    graphics.clear();
    graphics.drawBitmap(0, 0, _deviceWidth,
    _deviceHeight, _backgroundBitmap, 0, 0);
    super.paint(graphics);
    }


    public void addContent(Field obj)
    {
    _contentScreen.add(obj);
    }
    }


    //========================================================


    and MScreen
    public class MScreen extends BaseScreen {

    BBaseScreen screen;

    public MScreen()
    {
    screen = new BBaseScreen(ResourceManager.ImageManager().AppAppScreen);
    screen.addContent(new ButtonField("shit"));
    this.add(screen);
    this.add(new ButtonField("Test Button"));
    }


    }


    but it's not display any things on screen :(

    would you tell me what i was wrong in here ?

    thanks you so mach !

    ReplyDelete
  3. Hi,
    Thanks for the sample.
    But i read somewhere that getBitmapResource() looks for the resource in both the .cod file that called this method and any .cod files that it relies on. But my images are not stored in the .cod files. Instead they are stored in the SDCard and i need to pass the path of the images randomnly.

    So, how i can made this thing possible.

    Please reply

    Thanks & Regards,
    Richa Bhatia

    ReplyDelete
  4. Hi,
    where I must put image to read?
    I have workspace -> TestProject and etc.

    ReplyDelete
  5. Hi Arsen,

    You can add the image anywhere in your project.
    You don't need to add the relative path during reading the image. Just image name will do. Like:
    Bitmap.getBitmapResource("imageName");

    ReplyDelete
  6. but in simulator when I put image anywere except bin/mypackage/ where are located .class files, then NullPointer exception were thrown.

    ReplyDelete
  7. Have you added the image with your project.
    Right Click on the project -> Add File to Project

    ReplyDelete
  8. Maybe you mean project->new->file ?
    Yes,I did that and still exception occurs.

    ReplyDelete
  9. Seems like you are using eclipse.
    Ok then copy the image to the res folder. Something like:
    project/res/img/
    Make sure the image is added properly to your project. (Simple refresh (F5) should do)

    ReplyDelete
  10. Thanks Bikas,it finally turn out.

    Regards,
    Arsen

    ReplyDelete
  11. i am getting Null pointer exception so tell me that in above code whats the problem....

    ReplyDelete
  12. do the following:
    1)add your pic to your project manual by explorer to the following path : YourProject->res->img
    2)if you use eclipse then open your project and find in tree view res folder,expand it.You will find img sub folder.Right click on it and select New->File.
    3)Click Advanced button,check "Link to file..." and browse your image.
    4)click finish

    Now your application will able to see it.You can
    just type following:
    Bitmap.getBitmapResource("yourpic.png")

    Enjoy!

    ReplyDelete
  13. tell me, how can i change application icon in blackberry?
    is any any specified dimension or not???

    ReplyDelete
  14. have you any idea of Editfield and button are arrange together or in a single line?

    If you have solution tell me as soon as possible.

    Thanks in advance...

    ReplyDelete
  15. How to place the button in the center of the screen?
    I have tried writing

    ButtonField _Enterbtn=new ButtonField("Enter",Field.FIELD_HCENTER);
    subManager.add(_Enterbtn);

    but it does work.
    please help

    ReplyDelete
  16. Try with StyleField DrawStyle.
    Something like:
    ButtonField _Enterbtn=new ButtonField("Enter",Field.FIELD_HCENTER | DrawStyle.HCENTER);
    subManager.add(_Enterbtn);

    ReplyDelete
  17. i have put this code in but i want to have the buttons i have already created which take the user to a website how would i integrate this?

    here is the code i have for a button:

    ButtonField btnWebpage = new ButtonField(" google ", ButtonField.FIELD_HCENTER){
    protected boolean navigationClick( int status, int time ){
    BrowserSession session = Browser.getDefaultSession();
    session.displayPage("http://www.google.com");
    session.showBrowser();
    return true;
    }
    };

    ReplyDelete
  18. and tell me how to add one more bitmap image under this image.

    ReplyDelete
  19. Doing this but not getting the image displayed

    ReplyDelete