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));
}
}
