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
Developer
arsenk01
Posts: 91
Registered: ‎06-21-2011
My Device: Blackberry Torch 9800

ToolbarManager : set button focused effect

Hi All,

can I make toolbar button focus effect like in below pic:

PT_Mockups Last 1.png

Regards,
Arsen
Super Contributor
pp
Posts: 278
Registered: ‎11-04-2010
My Device: 4.5 and above

Re: ToolbarManager : set button focused effect

Hi,

 If that image has to be changed on focus then u have to provide two image one for focus and another for unfocused and override onFocus() and onUnFocus() method for that buttons.

Bitmap image,focused_image , unfocused_image;

public void onFocus(int direction) {
        super.onFocus(direction);

        image = focused_image;
        this.invalidate();
    }
    public void onUnfocus() {
        super.onUnfocus();

        image = unfocused_image;
        this.invalidate();
    }

invalidate means painting the screen once more...

 

in paint  drawBitmap the image.

Thanks & Regards

              pp

Contributor
saggi
Posts: 10
Registered: ‎11-11-2011
My Device: NA

Re: ToolbarManager : set button focused effect

hi. can you please post the code for the layout of ToolbarManager in the image.

thanks in advance.

New Contributor
sivashankar
Posts: 3
Registered: ‎12-06-2011
My Device: BB-9800

Re: ToolbarManager : set button focused effect

HI 

 

can u post ur code for the toolbar manager....because i am not able to write text below the image in toolbar....

Super Contributor
pp
Posts: 278
Registered: ‎11-04-2010
My Device: 4.5 and above

Re: ToolbarManager : set button focused effect

 

Hi,

 

create a custom VerticalFieldManger so that you can place both image and label.

 

Background is a HorizontalFieldManager and add those VerticalFieldManger to this.

public class BottomMenuManager extends VerticalFieldManager implements EYConnectConstants {
    private Bitmap background = null;
    private int lastWidth;
    private ClickbleImage exit, contacts, directpry, recent;
   private LabelField label = new LabelField("",LabelField.FIELD_HCENTER) {
        protected void paint(Graphics graphics) {
        graphics.setColor(Color.WHITE); 
        super.paint(graphics);
    }
    };
    
    BottomMenuManager() {   
        super (NO_HORIZONTAL_SCROLL | USE_ALL_WIDTH);
        TableLayoutManager hfm = new TableLayoutManager(new int[] {TableLayoutManager.SPLIT_REMAINING_WIDTH, TableLayoutManager.SPLIT_REMAINING_WIDTH,
                                        TableLayoutManager.SPLIT_REMAINING_WIDTH, TableLayoutManager.SPLIT_REMAINING_WIDTH}, Manager.FIELD_VCENTER | Manager.HORIZONTAL_SCROLL | Manager.USE_ALL_WIDTH);
        exit = new ClickbleImage(exitMenu,exitFocusMenu,FOCUSABLE,"Exit");
        hfm.add(exit );
        contacts = new ClickbleImage(ContactsMenu,ContactsFocusMenu,FOCUSABLE,"RecentCalls List");
        hfm.add(contacts);
        directory = new ClickbleImage(DirectoryMenu,DirectoryFocusMenu,FOCUSABLE,"Register");
        hfm.add(directory);
        recent = new ClickbleImage(RecentMenu,RecentFocusMenu,FOCUSABLE,"Conference");
        hfm.add(recent);
        add(hfm);
    }
public void paint(Graphics graphics) {
        graphics.setColor(Color.BLACK);
        graphics.fillRect(0,0,Display.getWidth(),Display.getHeight); 
        super.paint(graphics);
    }

here clickableImage is a class extending VerticalFieldManager with image and LabelField.

Thanks & Regards

              pp

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

Re: ToolbarManager : set button focused effect

I suspect the 'buttons' that you see are actually specially written and paint themselves.  They will also have three 'styles', (1) focus, (2) not in focus and (3) selected, so that the user can tell which is the currently selected toolbar option.

 

To create such a 'button' requires a little thought and there are a number of complications.   

 

The easiest place to start is with a BitmapField.  Have this so that you can supply three background images (one for each of the states) an overlay image and the text..  In this Fields layout, you need to size it so that the height allows for space for the overlay image with he text below.  Then in paint you need to decide which background image should be painted, paint it, then paint the overlay image and the text in positions that you choose based on the height.

 

Basically two drawBitmaps and a drawText in your paint. 

 

Things will rapidly become complicated once you start factoring in the different sizes for touch screen *large enough for fingers to hit) and non touch screen (which can be much smaller)  To get this right you need to scale all your Bitmaps appropriately.  Do this in layout, not  at paint time, so you only do it once.

 

And then what happens when the user tilts the device into landscape mode?  Is it appropriate to put the Labels beside the overlay image rather than underneath.....

 

And finally you have to make it clickable....

 

Good luck. 

 

 

New Contributor
sivashankar
Posts: 3
Registered: ‎12-06-2011
My Device: BB-9800

Re: ToolbarManager : set button focused effect

Thank u so much....i got it thru ur idea....