Custom Radio Button

We can make a custom radio button with picture images and other drawing  methods. please have a look on the code and improve accordingly!!



package customradio;

import net.rim.device.api.ui.component.RadioButtonField;
import net.rim.device.api.ui.component.RadioButtonGroup;

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

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

/**
 *
 */
public class CustomRadioButton extends RadioButtonField {

private String label;
private Bitmap _currentPicture;
private Bitmap _onPicture; // image for "in focus"
private Bitmap _offPicture; // image for "not in focus"
private int width;
private int height;

// Constructor
public CustomRadioButton(String offImage, String onImage, String label,
RadioButtonGroup group, boolean selected) {

super(label, group, selected);
this.label = label;
_offPicture = Bitmap.getBitmapResource(offImage);
_onPicture = Bitmap.getBitmapResource(onImage);
_currentPicture = _offPicture;

} // end of constructor

public CustomRadioButton(String label) {

this.label = label;

}

/**
* The getPreferredHeight() and getPreferredWidth() methods return 45 since
* the images for custom buttons are 45 x 45 pixel
*
* @return <description>
*/
public int getPreferredHeight() {

/**
* If image not null then set height is equal to image height plus
* label. getFont().getHeight() + 8 shows that left 8 pixels from top
* and bottom of image so label not stick with image
*/
if (_currentPicture != null) {

return Math.max(getFont().getHeight(), _currentPicture.getHeight());

} else {

return getFont().getHeight() + 8;

}

} // end of getPreferredHeight()

public int getPreferredWidth() {

int width = Display.getWidth();
return width;

} // end of getPreferredWidth()

protected void layout(int width, int height) {

super.layout(getPreferredWidth(), getPreferredHeight());

setExtent(getPreferredWidth(), Math.min(height, getPreferredHeight())+20);

} // end of layout()

/**
* These functions set the currentPicture variable to the correct image when
* the user rolls over the button using the paint() method. The image is
* redrawn after the change by calling the invalidate() method.
*
*/
protected void onFocus(int direction) {

super.onFocus(direction);
_currentPicture = _onPicture;
invalidate();

}

protected void onUnfocus() {

super.onUnfocus();
_currentPicture = _offPicture;
invalidate();

}

protected void paint(Graphics graphics) {

/**
* If the Bitmap is taller than the font, we want the text centerd
* vertically. Similarly, if the font is taller, we want the bitmap
* centered vertically. The algorithm in both cases is the same position
* = (Field height - item height) / 2;
*/
int textY = (getHeight() - getFont().getHeight()) / 2;

if (_currentPicture != null) {

int imageY = (getHeight() - _currentPicture.getHeight()) / 2;

if (_currentPicture == _onPicture) {

graphics.setColor(Color.GREEN);

}

if (isSelected()) {

graphics.setColor(Color.RED);
graphics.drawRoundRect(2, 2, getWidth() - 4, getHeight() - 2,
15, 15);
// graphics.drawRect(5, getHeight() / 4, 20, 20);
graphics.drawArc(5, getHeight() / 4, 20, 20, 0, 360);
graphics.fillArc(5 + 2, (getHeight() / 4) + 2, 16, 16, 0, 360);
graphics.drawBitmap(24, imageY, _currentPicture.getWidth(),
_currentPicture.getHeight(), _currentPicture, 0, 0);
graphics.drawText(label, 65, textY);

} else { // end of if (isSelected())

graphics.drawRoundRect(2, 2, getWidth() - 4, getHeight() - 2,
15, 15);
// graphics.drawRect(5, getHeight() / 4, 20, 20);
graphics.drawArc(5, getHeight() / 4, 20, 20, 0, 360);
graphics.drawBitmap(24, imageY, _currentPicture.getWidth(),
_currentPicture.getHeight(), _currentPicture, 0, 0);
graphics.drawText(label, 65, textY);

} // end of if / else (isSelected())

} else { // end of if (_currentPicture != null)

if (isFocus()) {

graphics.setColor(Color.GREEN);

} // end of if (isFocus())

if (isSelected()) {

graphics.setColor(Color.RED);
graphics.drawRoundRect(2, 2, getWidth() - 4, getHeight() - 2,
15, 15);
graphics.drawArc(5, getHeight() / 4, 16, 16, 0, 360);
graphics.fillArc(5 + 2, (getHeight() / 4) + 2, 12, 12, 0, 360);
graphics.drawText(label, 24, textY);

} else {

graphics.drawRoundRect(2, 2, getWidth() - 4, getHeight() - 2,
15, 15);
graphics.drawArc(5, getHeight() / 4, 16, 16, 0, 360);
graphics.drawText(label, 24, textY);

}

} // end of if / else (_currentPicture != null)

} // end of paint()

/**
* We'll disable the default focus so that the blue rectangle isn't drawn.
* To do this, we just override drawFocus() and have it to do nothing
*/
protected void drawFocus(Graphics graphics, boolean on) {

} // end of drawFocus()

} // end of class BasitCustomRadioButton


and we can use it with the following code


package customradio;

import net.rim.device.api.ui.*;
import net.rim.device.api.ui.component.*;
import net.rim.device.api.ui.container.*;

public class RadiScreen extends MainScreen {
public RadiScreen() {
setTitle("Radio Button Demo");
RadioButtonGroup rbg = new RadioButtonGroup();
add(new CustomRadioButton("on.png","off.png","Option 1", rbg, true));
add(new CustomRadioButton("on.png","off.png","Option 2", rbg, false));
}
}