To change the ButtonField background during click event in BlackBerry

Question

In BlackBerry, how to change the ButtonField background color during the click event? For example, for the long press the background color needs to change. For me it takes the default color blue. How to change it?

This is our custom buttton field. But it shows the default blue color for the button click event.

public class CustomButtonField extends ButtonField implements GlobalConstant {
int mHeight;
int mWidth;
public final static int DEFAULT_BACKGROUND_COLOR_NORMAL = 0x167c9c;
public final static int DEFAULT_BACKGROUND_COLOR_ON_FOCUS = 0x188118;
private int backgroundColorNormal = DEFAULT_BACKGROUND_COLOR_NORMAL;
private int backgroundColorOnFocus = DEFAULT_BACKGROUND_COLOR_ON_FOCUS;
private Background noraml_bg;
private Background focus_bg;
private boolean isFocusable;
private boolean isround_button = false;


public CustomButtonField(int height, int width, String label) {
    super(label, CONSUME_CLICK);

    noraml_bg = menuButton_bgNormal;
    focus_bg = menuButton_bgFocus;

    mHeight = height;
    mWidth = width;
    this.isFocusable = true;
    setBorder(BorderFactory.createSimpleBorder(new XYEdges(0, 0, 0, 0)));
    setBorder(VISUAL_STATE_ACTIVE,
            BorderFactory.createSimpleBorder(new XYEdges(0, 0, 0, 0)));

}

public CustomButtonField(int height, int width, String label, boolean isround_button) {
    super(label, CONSUME_CLICK);

    this.isround_button = isround_button;
    noraml_bg = roundButton_bgNormal;
    focus_bg = roundButton_bgFocus;
    mHeight = height;
    mWidth = width;
    this.isFocusable = true;

    XYEdges padding = new XYEdges(1,1,1,1);
    XYEdges color = new XYEdges (Color.BLACK,Color.BLACK,Color.BLACK,Color.BLACK);
    int lineStyle = Border.STYLE_SOLID;

   Border roundedBorder = BorderFactory.createSimpleBorder(padding, color, lineStyle);
    setBorder(roundedBorder);

}

/*
 * (non-Javadoc)
 * 
 * @see net.rim.device.api.ui.component.ButtonField#getPreferredHeight()
 */
public int getPreferredHeight() {
    return mHeight;
}

/*
 * (non-Javadoc)
 * 
 * @see net.rim.device.api.ui.component.ButtonField#getPreferredWidth()
 */
public int getPreferredWidth() {
    return mWidth;
}

/*
 * (non-Javadoc)
 * 
 * @see net.rim.device.api.ui.component.ButtonField#layout(int, int)
 */
protected void layout(int width, int height) {
    super.layout(mWidth, mHeight);
    setExtent(mWidth, mHeight);
}

/*
 * (non-Javadoc)
 * 
 * @see
 * net.rim.device.api.ui.component.ButtonField#paint(net.rim.device.api.
 * ui.Graphics)
 */
protected void paint(Graphics graphics) {

    String label = getLabel();
    int x = (getPreferredWidth() - getFont().getAdvance(label)) >> 1;
    int y = (getPreferredHeight() - getFont().getHeight()) >> 1;
    if (isFocus() == false) {
        this.setBackground(noraml_bg);
        if(isround_button){
            graphics.setColor(0x666666);
        }else{
            graphics.setColor(Color.WHITE);
        }

        graphics.drawText(label, x, y);
    } else {
        this.setBackground(focus_bg);
        graphics.setColor(Color.WHITE);

        graphics.drawText(label, x, y);
    }
}

protected void drawFocus(Graphics graphics, boolean on) {
    if (on) {
        graphics.setColor(backgroundColorOnFocus);
    } else {
        graphics.setColor(backgroundColorNormal);
    }
}

public boolean isFocusable() {
    return isFocusable;
}

}

Rupak · Accepted Answer · 2012-06-20T16:17:35.713

8

Using visual states indicator of the Field, and BackgroundFactory you can set Background for following visual states:

VISUAL_STATE_ACTIVE - Active visual state. The user is interacting with the field.
VISUAL_STATE_DISABLED - Disabled visual state. There is no possible interaction with the field.
VISUAL_STATE_DISABLED_FOCUS - Disabled, but focused visual state. The field is highlighted, but there is no other possible interaction with the field.
VISUAL_STATE_FOCUS - Focus visual state. The field has focus (is highlighted).
VISUAL_STATE_NORMAL - Normal visual state. There is no current interaction with the field.

Check following code snippet:

ButtonField bfTest = new ButtonField("Button Field");

Background commonBgOne = BackgroundFactory.createSolidBackground(Color.RED);
Background commonBgTwo = BackgroundFactory.createSolidBackground(Color.GREEN);

bfTest.setBackground(VISUAL_STATE_ACTIVE, commonBgOne);
bfTest.setBackground(VISUAL_STATE_DISABLED, commonBgTwo);
bfTest.setBackground(VISUAL_STATE_DISABLED_FOCUS, commonBgTwo);
bfTest.setBackground(VISUAL_STATE_FOCUS, commonBgOne);
bfTest.setBackground(VISUAL_STATE_NORMAL, commonBgTwo);

Cancelling default border

Border commonBorder = BorderFactory.createSimpleBorder(new XYEdges());

bfTest.setBorder(VISUAL_STATE_ACTIVE, commonBorder);
bfTest.setBorder(VISUAL_STATE_DISABLED, commonBorder);
bfTest.setBorder(VISUAL_STATE_DISABLED_FOCUS, commonBorder);
bfTest.setBorder(VISUAL_STATE_FOCUS, commonBorder);
bfTest.setBorder(VISUAL_STATE_NORMAL, commonBorder);

edited Jun 20 '12 at 16:17

answered Jun 19 '12 at 10:50

Rupak

3,674
15
23

Hi Rupak, your answer is for changing the background color for normal and focus state.... But I have to show one more color during the button click event.... Thankz for your previous response.... – M Vignesh Jun 19 '12 at 12:01
Actually In our application,For customized Button Field we are setting 0x2e7594 & 0x134f74 gradient color code for normal. 0x8cc10b & 0x4e7500 color gradient color codes for focus. But for button click event it shows default blue color as 3rd color. So we have to change that default blue color to our focus gradient color(0x8cc10b & 0x4e7500). How to change the button default blue color for the click event. – M Vignesh Jun 19 '12 at 12:12
Did you try the code posted above? It is an example, and it also sets background to a ButtonField for every possible visual states of a Field. And if you don't post your code, it's not possible to help regarding this issue. And I think you are talking about the state, `VISUAL_STATE_ACTIVE`. – Rupak Jun 19 '12 at 15:09
2

@Signare, `when you click a button, its same as VISUAL_STATE_FOCUS.` and `Both Focused and clicked treated as same.` are not true. When a button get focus it is the state VISUAL_STATE_FOCUS, but when you click on it, it changes its state to VISUAL_STATE_ACTIVE until unclick event occurs. – Rupak Jun 19 '12 at 15:24
Yes I have tried your example, is working fine except, it sets the background for the button texts not to the whole button. Displays button with combination of two colors. Green or red surrounded with blue. why its been painted like this? – M Vignesh Jun 20 '12 at 09:51
Because of it's own border. Need to set border for different visual states also. Check updated answer. – Rupak Jun 20 '12 at 16:16

score 2 · Answer 2 · answered Jun 19 '12 at 10:31

2

Have you tried using setBackground property of a button?

answered Jun 19 '12 at 10:31

Achsah

543
4
16

Hi Achsah,Yes I have tried it... we r setting 3 different color for thee background. 1 for normal, 2nd for during click, 3rd one for focus. We have done the background color change for normal and focus. But not able to set the color dring click event. – M Vignesh Jun 19 '12 at 10:36

To change the ButtonField background during click event in BlackBerry

2 Answers2

Linked