Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Java Development

Reply
Contributor
Posts: 32
Registered: ‎02-22-2011
My Device: Not Specified
Accepted Solution

How to add background image to grid field manager

Hi to all,

              Hope you all will be fine. I read the book Beginning black berry development. In this book the author showed that how you create grid field manager. I used the code and created grdi field manager with 2 columns and added 8 image buutom with labels. every thing is working fine upto now.

              But the background is white. Now i want to add some background image on my grid gield manager. How can i do it. Please tell me. Thanks

BlackBerry Development Advisor
Posts: 15,727
Registered: ‎07-09-2008
My Device: BlackBerry PRIV
My Carrier: Bell

Re: How to add background image to grid field manager

This should help get you started.

 

Use a background image in application screens

http://supportforums.blackberry.com/t5/Java-Development/Use-a-background-image-in-application-screen...

Mark Sohm
BlackBerry Development Advisor

Please refrain from posting new questions in solved threads.
Problem solved? Click the Accept As Solution button.
Found a bug? Report it using Issue Tracker
Developer
Posts: 112
Registered: ‎09-23-2009
My Device: Not Specified

Re: How to add background image to grid field manager

Correct me if I'm wrong.

 

I propose a little different solution. Don't draw the background at paint(), do it on paintBackground().

 

Bitmap backgroundBitmap = Bitmap.getBitmapResource("background.png");

HorizontalFieldManager horizontalFieldManager = new
HorizontalFieldManager(HorizontalFieldManager.USE_ALL_WIDTH |
HorizontalFieldManager.USE_ALL_HEIGHT){

  //Override the paintBackground method to draw the background image.
  public void paintBackground(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);

  }
};

 

 

 

Contributor
Posts: 32
Registered: ‎02-22-2011
My Device: Not Specified

Re: How to add background image to grid field manager

[ Edited ]

Hi Smiley Happy

    Thank you to you both. I was thinking days have been passed and no reply. You can't imagine how please i am to see the reply on black berry forum , because this is my first post.  and i am a newbie working on my first black berry application. Anyways i have done this and is working fine

 

import net.rim.device.api.ui.container.VerticalFieldManager;

import net.rim.device.api.system.Bitmap;
import net.rim.device.api.system.Display;

import net.rim.device.api.ui.Graphics;


/**
 * Setting background image using VerticalFieldManager
 */
class BGVerticalFieldManager extends VerticalFieldManager {
    
    Bitmap mBgBitmap = null;
    int mBgWidth = -1;
    int mBgHeight = -1;
    int mBgX = -1;
    int mBgY = -1;
    
    //Constructor
    public BGVerticalFieldManager(Bitmap background) { 
    
        super(USE_ALL_WIDTH | USE_ALL_HEIGHT );
        mBgBitmap = background;
        mBgWidth = mBgBitmap.getWidth();     // 240
        mBgHeight = mBgBitmap.getHeight();   // 320
        mBgX = (Display.getWidth() - mBgWidth) >> 1;      // >> means divided by 2 is to power 1
        mBgY = (Display.getHeight() - mBgHeight) >> 1;
    
    } // end of constructor
    
    protected void paintBackground(Graphics graphics) {
        
        paintBackgroundBitmap(graphics);
        super.paintBackground(graphics);
        
    } // end of paintBackground()
    
    private void paintBackgroundBitmap(Graphics graphics) {
        
        if (null != mBgBitmap) {
            
            graphics.drawBitmap(mBgX, mBgY, mBgWidth, mBgHeight, mBgBitmap, 0, 0);
        }
        
    } // end of paintBackgroundBitmap
       
} // end of class BGVerticalFieldManager

 

 

Then i use it like this.

 

import net.rim.device.api.ui.container.MainScreen;

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


/**
 *
 */
public class MyScreen extends MainScreen {
   
    private static final String SPLASH_FNM = "images/backgroundtheme.png";
   
    //MyButton userProfileButton;
   
    /**
     * BitmapField takes a Bitmap object as an argument in it's constructor, so we'll need to load the image
     * before constructinr the field. We'll import net.rim.device.api.system.Bitmap and add the following line
     * to load the bitmap from the image resource.
     * The path for loading bitmaps, and all other resources, is relative to the location of your project
     * definiton file(the .jdp file)
     */
    private Bitmap titleImage = Bitmap.getBitmapResource(SPLASH_FNM);
   
    //Create custom vertical field manager by passing a backgroungd image
   // private BGVerticalFieldManager manager = new BGVerticalFieldManager(titleImage);
   private BGVerticalFieldManager manager;
   
   
    public MyScreen() {  
   
        super();
        manager = new BGVerticalFieldManager(titleImage);
        //add(manager);
        //super();
        //BGVerticalFieldManager manager = new BGVerticalFieldManager(titleImage);
        //add(manager);
       
        //userProfileButton = new MyButton("images/userprofile.png", "images/roll_userprofile.png" );
        //searchButton = new MyButton("images/search.png", "images/roll_search.png");
   
        //manager.add(userProfileButton);
       
       
   
    } // end of constructor
   
    public BGVerticalFieldManager getMyManager() {
   
        return manager;
       
    }
   
} // end of MyScreen

 

and finally

 

 

class SmsChatMainScreen extends MyScreen implements FieldChangeListener  {
   
    private BGVerticalFieldManager manager;
    private GridFieldManager gridFieldManager;
   
    //MyButton userProfileButton;
    //MyButton searchButton;
   
    CustomButtonField userProfileButton;
    CustomButtonField searchButton;
    CustomButtonField chatButton;
    CustomButtonField buddyListButton;
    CustomButtonField blockUserButton;
    CustomButtonField unBlockUserButton;
    CustomButtonField deactivateButton;
    CustomButtonField aboutButton;
   
    //Constructor
    public SmsChatMainScreen() { 
   
        // Calling super class constructor so the BGVerticalFieldManager instance is created
        super();
  
        try {
            FontFamily alphaSansFamily = FontFamily.forName("BBAlpha Serif");
            Font appFont = alphaSansFamily.getFont(Font.PLAIN, 4, Ui.UNITS_pt);
                   
            //changing the screen's font
            setFont(appFont);
        } catch (ClassNotFoundException e) {
                  
        }
   
        // get the manger so we can add items to this manager
        manager = getMyManager();
       
        add(new CustomLabelField("Mobile Chat", 0xFFFFFF, 0xFFFFFF, "images/strip.png", 0));
   
        createButtons();
       
        // Handling the buttons
        setListenersForButtons();
        createGridFieldManager();
   
        //adding GridField manager to our BGVerticalFieldManager so the background image is shown
        manager.add(gridFieldManager);
       
        //Now add manager to screen
        add(manager);
   
    } // end of constructor

 

 

But i have one problem after adding buttons to my gridfield manager and adding grid field manager to my vertical field manager my screen is scrolling. And show white background if i scroll my screen by pressing down ket. Image is shown but if i scroll down the image is finished and white background show. . I am attaching picture. Can you tell me why this is happening. I have another query but i think i should post other post for it Smiley Wink

 

Thanks

Developer
Posts: 19,636
Registered: ‎07-14-2008
My Device: Not Specified

Re: How to add background image to grid field manager

If you want the background image to be always showing, the the easiest option is to anchor it in the Screen rather than the Manager.  Alternatively you can anchor it in a non scrolling Manager and have your gridFieldManager scroll infront of it.  With either option, this article by one of our fellow posters, makes for interesting reading:

 

http://supportforums.blackberry.com/t5/Java-Development/MainScreen-explained/ta-p/606644

 

 

Contributor
Posts: 32
Registered: ‎02-22-2011
My Device: Not Specified

Re: How to add background image to grid field manager

Hi thanks,

                 This line fixed my problem. I used this line in my BGVerticalFieldManager

 //Constructor
    public BGVerticalFieldManager(Bitmap background) { 
    
        //super(USE_ALL_WIDTH | USE_ALL_HEIGHT );
        super(USE_ALL_WIDTH);
        ....
    } //end of constructor

 now my screen scrolling is working fine just as i was expecting

Developer
Posts: 19,636
Registered: ‎07-14-2008
My Device: Not Specified

Re: How to add background image to grid field manager

Excellent.  Can you mark this as solved then?

Contributor
Posts: 32
Registered: ‎02-22-2011
My Device: Not Specified

Re: How to add background image to grid field manager

Hi

                   Hope you will be fine. Sorry for late reply. Yup sure, but how can i mark it solve

Developer
Posts: 112
Registered: ‎09-23-2009
My Device: Not Specified

Re: How to add background image to grid field manager

Click on the Options at top right of the most usefull reply. Then, select from the popup menu. It's something like 'Accept this as solution'.

Contributor
Posts: 32
Registered: ‎02-22-2011
My Device: Not Specified

Re: How to add background image to grid field manager