I want to implement something like this in my application:
That is, each image contains one heart icon. I want to handle the click event on heart click and for that I have the following code
list.setEmptyString("No Image Available", DrawStyle.HCENTER);
list.setRowHeight(Display.getHeight() - 100);
list.setSize(data.size());
if (listVManager != null && listVManager.getFieldCount() > 0) {
listVManager.deleteAll();
}
list.setCallback(new ListFieldCallback() {
public void drawListRow(ListField list, Graphics graphics,
int index, int y, int w) {
int yPos = y + list.getRowHeight() - 1;
graphics.setColor(0x434343);
graphics.fillRect(0, y, w, list.getRowHeight());
if (logoThumbnailImage != null
&& logoThumbnailImage.length > index
&& logoThumbnailImage[index] != null) {
EncodedImage img = logoThumbnailImage[index];
graphics.drawImage(0, y + 10, Display.getWidth(),
Display.getHeight() - 100, img, 0, 0, 0);
graphics.drawText("Hello", 10,
Display.getHeight() - 150);
graphics.drawImage(Display.getWidth() - 70,
Display.getHeight() - 150 + 300,
heart.getWidth(), heart.getHeight(), heart,
0, 0, 0);
} else {
graphics.drawImage(
15,
y + 10,
Display.getWidth(),
Display.getHeight() - 100,
sizeImage(iconImage, Display.getWidth(),
Display.getHeight() - 100), 0, 0, 0);
}
graphics.drawText("Hello", 10,
Display.getHeight() - 150);
graphics.drawLine(0, yPos, w, yPos);
}
public Object get(ListField listField, int index) {
return null;
}
public int getPreferredWidth(ListField listField) {
return Display.getWidth();
}
public int indexOfList(ListField listField, String prefix,
int start) {
return 0;
}
});
listVManager.add(list);
loadImages = new LoadImages(80, 80);
loadImages.start();
}
});
here load image is thread that load images in background and store them in logoThumbnailImage array and invalidate list from there when the it loads the image.
The Load image thread class:
private class LoadImages extends Thread {
int widthL;
int heightL;
LoadImages(int width, int height) {
this.widthL = width;
this.heightL = height;
}
public void run() {
logoThumbnailImage=new EncodedImage[numberOfItem];
if (object != null) {
for (int i = 0; i < numberOfItem; i++) {
try {
String text=object[i].getJSONArray("UrlArray").getString(0).toString();
EncodedImage encodedImg = JPEGEncodedImage.encode(connectServerForImage(text), quality); //connectserverForImage load Images from server
logoThumbnailImage[i] = sizeImage(encodedImg, Display.getWidth(), Display.getHeight()-100);
list.invalidate();
} catch (Exception e)
{
e.printStackTrace();
}
}
} else {
UiApplication.getUiApplication().invokeLater(new Runnable() {
public void run() {
Dialog.alert("No Data Found");
}
});
}
}
}
The application runs smoothly but I got the following output:
I have the following problem
1. The heart and description is displayed on only one list row. Can any one tell me what I am missing?
2. How to perform the click event on heart
Having looked at this only briefly, the problem appears to be that you are, in places, ignoring the 'y' position that is passed in to your drawListRow() method:
public void drawListRow(ListField list, Graphics graphics,
int index, int y, int w) {
Effectively the 'canvas' that you should be using to paint the current row (the row identified using int index) is bounded by the rectangle
(0, y, w, list.getRowHeight()).
In fact, you can actually paint anywhere in the extent that belongs to the ListField, i.e. the area you can paint onto is actually the rectangle
(0, 0, list.getWidth(), list.getHeight()).
You can do this, but you shouldn't. If you go outside your row's rectangle you will be painting over another row.
In your case, painting outside the selected row is exactly what your code does. You do this:
graphics.drawText("Hello", 10,
Display.getHeight() - 150);
This will actually be positioned on the ListField, 10 pixels in from the left and Display.getHeight() - 150 down from the top. It will be positioned at this point in the ListField, regardless of which row you are painting. So every row will put the Hello text in the same place.
So when coding your drawListRow(), make sure you offset all the positions to stay within the bounds of the row you are supposed to be painting. The origin of the area you are painting is (0, y), so offset all vertical positions using y. Do not use Display.getHeight(), use list.getRowHeight() to get the height you can paint (starting at y), and do not use Display.getWidth(), use the w variable that is passed in to get the width that you can paint. All your graphics actions should occur within these bounds.
Related
I am trying to achieve a flat look for blackberry controls, namely objectchoicefield and buttonfield.
The following code does not seem to do the trick. (The width setting does work, but not the border setting.)
public static ObjectChoiceField GetDropdownList(String label, String[] data)
{
ObjectChoiceField ocf = new ObjectChoiceField(null, data, 0, Field.FIELD_LEFT);
ocf.setBorder(BorderFactory.createSimpleBorder(new XYEdges(0,0,0,0)));
ocf.setMinimalWidth(Display.getWidth()-61);
return ocf;
}
I get the same appearance with or without the setBorder statement. Basically I do not want any 3D look or shadow or shine or rounded corners.
Thanks
This might not do everything you want, but you can try looking at this custom ObjectChoiceField that I built for OS 4.6 and lower devices. I wanted to add a glossy, 3D look, but you could change the custom paint() code I used to make a simpler, flatter look.
Taking my example, changing the rounded corner radius to 1, and removing the call to super.paint(g) gives something like this:
public class CustomChoiceField extends ObjectChoiceField {
private int _bgWidth = 0;
private int _bgHeight = 0;
private int _numChoices = 0;
private boolean _hasFocus = false;
private static final int HIGHLIGHT_COLOR = 0xFF185AB5; // blue-ish
private static final int RADIUS = 1; // rounded corner radius in pixels
private static final int DFLT_PADDING = 20;
public CustomChoiceField(Object[] choices, int initialIndex) {
super("", choices, initialIndex);
_numChoices = choices.length;
}
public int getPreferredHeight() {
return _bgHeight;
}
public int getPreferredWidth() {
return _bgWidth;
}
protected void layout(int width, int height) {
if (_bgWidth == 0 || _bgHeight == 0) {
if (height <= Display.getHeight()) {
// probably using custom Manager to specify size
_bgWidth = width;
_bgHeight = height;
} else {
// use default sizing
_bgHeight = DFLT_PADDING + getHeightOfChoices();
for (int i = 0; i < _numChoices; i++) {
_bgWidth = Math.max(_bgWidth, DFLT_PADDING + getWidthOfChoice(i));
}
}
}
super.layout(_bgWidth, _bgHeight);
super.setExtent(_bgWidth, _bgHeight);
}
protected void applyTheme(Graphics arg0, boolean arg1) {
// do nothing
}
protected void drawFocus(Graphics g, boolean on) {
// do nothing .. handled manually in paint(g)
}
protected void onFocus(int direction) {
_hasFocus = true;
super.onFocus(direction);
invalidate();
}
protected void onUnfocus() {
_hasFocus = false;
super.onUnfocus();
invalidate(); // required to clear focus
}
protected void paint(Graphics g) {
int oldColor = g.getColor();
// field color depends on whether we have focus or not
int bgColor = (_hasFocus) ? HIGHLIGHT_COLOR : Color.BLACK;
// when the field has focus, we make it a little less transparent
int alpha = (_hasFocus) ? 0xDD : 0xBB;
g.setColor(bgColor);
g.setGlobalAlpha(alpha);
g.fillRoundRect(0, 0, _bgWidth, _bgHeight, RADIUS, RADIUS);
// draw a plain white line as a border
g.setColor(Color.WHITE);
g.setGlobalAlpha(0xFF);
g.drawRoundRect(0, 0, _bgWidth, _bgHeight, RADIUS, RADIUS);
// draw the currently selected choice's text (also in white)
String text = (String)getChoice(getSelectedIndex());
int y = (_bgHeight - getFont().getHeight()) / 2;
g.drawText(text, 0, y, DrawStyle.HCENTER | DrawStyle.TOP, _bgWidth);
g.setColor(oldColor);
}
}
And you use the CustomChoiceField like this:
private ObjectChoiceField[] ocf = new ObjectChoiceField[3];
public ObjectChoiceScreen() {
super(MainScreen.VERTICAL_SCROLL | MainScreen.VERTICAL_SCROLLBAR);
Object[] choices1 = new Object[] { "one", "two", "three" };
ocf[0] = new CustomChoiceField(choices1, 0);
Object[] choices2 = new Object[] { "ichi", "ni", "san" };
ocf[1] = new CustomChoiceField(choices2, 0);
Object[] choices3 = new Object[] { "uno", "dos", "tres" };
ocf[2] = new CustomChoiceField(choices3, 0);
for (int i = 0; i < ocf.length; i++) {
ocf[i].setMargin(new XYEdges(10, 10, 10, 10));
}
getMainManager().addAll(ocf);
This isn't production code, so you'll need to test it yourself. For example, it doesn't handle changing the choices with setChoices(). But, it's a start, and will get you something like this:
You'll notice the difference in color between the first two object choice fields, and the bottom one, which is focused.
My code has the same popup for selecting choices as the normal ObjectChoiceField. So, you still may get rounded corners that way. In my case, I didn't need to change that look and feel, so I'm not sure how you might change that, too.
I am developing an application which requires me to create a progress bar moving from right to left.
I tried using GaugeField by filling startVal as 100 and then on decrementing it but I couldn't achieve it.
Is there any way in BlackBerry say paint() method or drawRect() using timer where we can fill it from right to left?
Check following code for an implementation of Custom GaugeField.
Output
Implementation of CustomGaugeField
class CustomGaugeField extends GaugeField {
// Default constructor, need improvement
public CustomGaugeField() {
super("", 0, 100, 0, GaugeField.PERCENT);
}
// Colors
private static final int BG_COLOR = 0xd6d7d6;
private static final int BAR_COLOR = 0x63cb52;
private static final int FONT_COLOR = 0x5a55c6;
protected void paint(Graphics graphics) {
int xProgress = (int) ((getWidth() / 100.0) * getValue());
int xProgressInv = getWidth() - xProgress;
// draw background
graphics.setBackgroundColor(BG_COLOR);
graphics.clear();
// draw progress bar
graphics.setColor(BAR_COLOR);
graphics.fillRect(xProgressInv, 0, xProgress, getHeight());
// draw progress indicator text
String text = getValue() + "%";
Font font = graphics.getFont();
int xText = (getWidth() - font.getAdvance(text)) / 2;
int yText = (getHeight() - font.getHeight()) / 2;
graphics.setColor(FONT_COLOR);
graphics.drawText(text, xText, yText);
}
}
How to use
class MyScreen extends MainScreen {
public MyScreen() {
setTitle("Custom GaugeField Demo");
GaugeField gField;
for (int i = 0; i < 6; i++) {
gField = new CustomGaugeField();
gField.setMargin(10, 10, 10, 10);
add(gField);
}
startProgressTimer();
}
private void startProgressTimer() {
TimerTask ttask = new TimerTask() {
public void run() {
Field f;
for (int i = 0; i < getFieldCount(); i++) {
f = getField(i);
if (f instanceof CustomGaugeField) {
final CustomGaugeField gField = (CustomGaugeField) f;
final int increment = (i + 1) * 2;
UiApplication.getUiApplication().invokeLater(
new Runnable() {
public void run() {
gField.setValue((gField.getValue() + increment) % 101);
}
}
);
}
}
}
};
Timer ttimer = new Timer();
ttimer.schedule(ttask, 1000, 300);
}
}
Here is what I recommend you do. Download the BlackBerry Advanced UI Samples ... select the Download as Zip button.
Take a look at some screenshots of what the samples have here. The one you need to use is the Bitmap Gauge Field:
What you can do is modify the BitmapGaugeField class that they have in the sample folder, under Advanced UI -> src/com/samples/toolkit/ui/component
In BitmapGaugeField.java, you will only need to change the drawHorizontalPill() method:
private void drawHorizontalPill( Graphics g, Bitmap baseImage, Bitmap centerTile, int clipLeft, int clipRight, int width )
{
int yPosition = ( _height - baseImage.getHeight() ) >> 1;
width = Math.max( width, clipLeft + clipRight );
// ORIGINAL IMPLEMENTATION COMMENTED OUT HERE:
// Left
//g.drawBitmap( 0, yPosition, clipLeft, baseImage.getHeight(), baseImage, 0, 0);
// Middle
//g.tileRop( _rop, clipLeft, yPosition, Math.max( 0, width - clipLeft - clipRight ), centerTile.getHeight(), centerTile, 0, 0);
// Right
//g.drawBitmap( width - clipRight, yPosition, clipRight, baseImage.getHeight(), baseImage, baseImage.getWidth() - clipRight, 0);
int offset = _width - width;
// Left
g.drawBitmap( 0 + offset, yPosition, clipLeft, baseImage.getHeight(), baseImage, 0, 0);
// Middle
g.tileRop( _rop, clipLeft + offset, yPosition, Math.max( 0, width - clipLeft - clipRight ), centerTile.getHeight(), centerTile, 0, 0);
// Right
g.drawBitmap( width - clipRight + offset, yPosition, clipRight, baseImage.getHeight(), baseImage, baseImage.getWidth() - clipRight, 0);
}
The way you use this class is to pass in values for the background, and foreground (fill) stretchable bitmaps, the range of values, initial value, and some clipping margins.
public BitmapGaugeField(
Bitmap background, /** bitmap to draw for gauge background */
Bitmap progress, /** bitmap to draw for gauge foreground */
int numValues, /** this is the discrete range, not including 0 */
int initialValue,
int leadingBackgroundClip,
int trailingBackgroundClip,
int leadingProgressClip,
int trailingProgressClip,
boolean horizontal ) /** it looks like you could even do vertical! */
An example, if you want this gauge to go from 0 to 100, and have an initial value of 30 (this code goes in a Manager class):
Bitmap gaugeBack3 = Bitmap.getBitmapResource( "gauge_back_3.png" );
Bitmap gaugeProgress3 = Bitmap.getBitmapResource( "gauge_progress_3.png" );
BitmapGaugeField bitGauge3 = new BitmapGaugeField( gaugeBack3, gaugeProgress3,
100, 30,
14, 14, 14, 14,
true );
bitGauge3.setPadding(15,5,15,5);
add(bitGauge3);
bitGauge3.setValue(80); // change the initial value from 30 to 80
You'll find in the project some PNG images, like gauge_back_3.png and gauge_progress_3.png. If you don't like the colors or shapes, you can swap those images out for ones you draw yourself (in Photoshop, or another drawing program).
Good luck!
i need to make list of news so i have implement custom listfield with one thumb and two text and it draw with graphics object.it all gone fine and give me result as expect but there are something problem with text wraping i am basically android developer and there are wrap content file allow that set textfiled automatically but in this case there are bind one text over second. i have refer customer listfield from here
Here is screen::
Code::
public class CustomListField extends ListField implements ListFieldCallback {
private Vector _listData;
private int _MAX_ROW_HEIGHT = 80;
public CustomListField(Vector data) {
_listData = data;
setSize(_listData.size());
setSearchable(true);
setCallback(this);
setRowHeight(_MAX_ROW_HEIGHT);
}
protected void drawFocus(Graphics graphics, boolean on) {
XYRect rect = new XYRect();
graphics.setGlobalAlpha(150);
graphics.setColor(Color.BLUE);
getFocusRect(rect);
drawHighlightRegion(graphics, HIGHLIGHT_FOCUS, true, rect.x, rect.y,
rect.width, rect.height);
}
public int moveFocus(int amount, int status, int time) {
this.invalidate(this.getSelectedIndex());
return super.moveFocus(amount, status, time);
}
public void onFocus(int direction) {
super.onFocus(direction);
}
protected void onUnFocus() {
this.invalidate(this.getSelectedIndex());
}
public void refresh() {
this.getManager().invalidate();
}
public void drawListRow(ListField listField, Graphics graphics, int index,
int y, int w) {
ListRander listRander = (ListRander) _listData.elementAt(index);
graphics.setGlobalAlpha(255);
graphics.setFont(Font.getDefault().getFontFamily().getFont(Font.PLAIN,
24));
final int margin = 5;
final Bitmap thumb = listRander.getListThumb();
final String listHeading = listRander.getListTitle();
final String listDesc = listRander.getListDesc();
final String listDesc2 = listRander.getListDesc2();
final Bitmap nevBar = listRander.getNavBar();
// list border
graphics.setColor(Color.GRAY);
graphics.drawRect(0, y, w, _MAX_ROW_HEIGHT);
// thumbnail border & thumbnail image
graphics.setColor(Color.BLACK);
graphics.drawRoundRect(margin - 2, y + margin - 2,
thumb.getWidth() + 2, thumb.getHeight() + 2, 5, 5);
graphics.drawBitmap(margin, y + margin, thumb.getWidth(), thumb
.getHeight(), thumb, 0, 0);
// drawing texts
//graphics.setFont(FontGroup.fontBold);
graphics.drawText(listHeading, 2 * margin + thumb.getWidth(), y
+ margin);
graphics.setColor(Color.GRAY);
//graphics.setFont(FontGroup.smallFont);
graphics.drawText(listDesc, 2 * margin + thumb.getWidth(), y + margin
+ 20);
graphics.drawText(listDesc2, 2 * margin + thumb.getWidth(), y + margin
+ 32);
// draw navigation button
final int navBarPosY = y
+ (_MAX_ROW_HEIGHT / 2 - nevBar.getHeight() / 2);
final int navBarPosX = Graphics.getScreenWidth() - nevBar.getWidth()
+ margin;
graphics.drawBitmap(navBarPosX, navBarPosY, nevBar.getWidth(), nevBar
.getHeight(), nevBar, 0, 0);
}
public Object get(ListField listField, int index) {
String rowString = (String) _listData.elementAt(index);
return rowString;
}
public int indexOfList(ListField listField, String prefix, int start) {
for (Enumeration e = _listData.elements(); e.hasMoreElements();) {
String rowString = (String) e.nextElement();
if (rowString.startsWith(prefix)) {
return _listData.indexOf(rowString);
}
}
return 0;
}
public int getPreferredWidth(ListField listField) {
return 3 * listField.getRowHeight();
}
}
/*
* protected boolean trackwheelClick (int status, int time) {
*
* invalidate(getSelectedIndex());
*
* Dialog.alert(" U have selected :" + getSelectedIndex());
*
* return super.trackwheelClick(status, time);
*
* }
Update:
new screen ::
You need to do it programmatic , We don't have label field in a list because we are rendering it using graphics.
So i used to do a workaround to do so , i calculate the no of pixels availabale for my custom font for text , then how much space it will take i will give with three period signs.
You can use this code if , it can help you, use it under drawListRow method
String name =(String)ht.get("title");
xTotal= f2.getAdvance(name);
xAvail= Display.getWidth() - <bitmap>.getWidth() - 30;
if(xTotal > xAvail)
{
forLabel= name.length() * xAvail / xTotal ;
name = name.substring(0, forLabel - 3) + "...";
}
use name string variable in place of graphics.drawText.
In my app i have to show list of items in list field when i click on specific item in the list field the background color for a particular row change to grey color.How to develop this type of custom list field in Blackberrry.Any one please give ideas.
Thank You
you should draw rectangle in listfield row which is selected.. some thing like this. Here i have done it for on focus..
public void drawListRow(ListField list, Graphics g, int index, int y,int w) {
if (g.isDrawingStyleSet(Graphics.DRAWSTYLE_FOCUS))
{
g.setBackgroundColor(0x00572000);
//g.setBackgroundColor();
g.clear();
//g.setColor(Color.BLACK);
// g.fillRect(0,list.getWidth(),list.getWidth(),80);
g.setColor(Color.ORANGE);
g.fillRect(94,y+0,400,30);
//g.setColor(0x000000);
g.setColor(Color.WHITE);
g.drawText(text, 95, y+10, (DrawStyle.LEFT ), w );
}
else
{
g.setColor(0x00906966);
g.fillRect(94,y+0,400,30);
g.setColor(Color.ORANGE);
g.drawText(text, 95, y+10, (DrawStyle.LEFT ), w );
}}
Try this ...
private class MyListField extends ListField{
//0,ListField.MULTI_SELECT
private boolean hasFocus = false;
public void onFocus(int direction){
hasFocus = true;
}
public void onUnfocus()
{
hasFocus = false;
super.onUnfocus();
invalidate();
}
public void paint(Graphics graphics)
{ int width = Display.getWidth();
//Get the current clipping region
XYRect redrawRect = graphics.getClippingRect();
if(redrawRect.y < 0)
{
throw new IllegalStateException("Error with clipping rect.");
}
//Determine the start location of the clipping region and end.
int rowHeight = getRowHeight();
int curSelected;
//If the ListeField has focus determine the selected row.
if (hasFocus)
{
curSelected = getSelectedIndex();
}
else
{
curSelected = -1;
}
int startLine = redrawRect.y / rowHeight;
int endLine = (redrawRect.y + redrawRect.height - 1) / rowHeight;
endLine = Math.min(endLine, getSize() - 1);
int y = startLine * rowHeight;
//Setup the data used for drawing.
int[] yInds = new int[]{y, y, y + rowHeight, y + rowHeight};
int[] xInds = new int[]{0, width, width, 0};
//Set the callback - assuming String values.
ListFieldCallback callBack = this.getCallback();
//Draw each row
for(; startLine <= endLine; ++startLine)
{
//If the line we're drawing is the currentlySelected line then draw the fill path in LIGHTYELLOW and the
//font text in Black.
if(startLine == curSelected){
graphics.setColor(Color.LIGHTYELLOW);
graphics.drawFilledPath(xInds, yInds, null, null);
graphics.setColor(Color.BLACK);
graphics.drawText((String)callBack.get(this, startLine), 0, yInds[0]);
}
else{
//Draw the odd or selected rows.
graphics.setColor(Color.LIGHTGREY);
graphics.drawText((String)callBack.get(this, startLine), 0, yInds[0]);
}
//Assign new values to the y axis moving one row down.
y += rowHeight;
yInds[0] = y;
yInds[1] = yInds[0];
yInds[2] = y + rowHeight;
yInds[3] = yInds[2];
}
//super.paint(graphics);
}
}
.
.
.
refer this [LINK] : http://berrytutorials.blogspot.com/2009/11/create-custom-listfield-change.html
i developed the code as below.in this i used listfield ,one bitmapfield and one label field,when i will run it ,it displays only text on the list field row,but not the image
i don't know where i did mistake,so,plz,any one help me to know where i did mistake
thanks for any help
class TaskListField extends MainScreen implements ListFieldCallback {
private Vector rows;
private Bitmap p1;
ListField list;
TableRowManager row;
public TaskListField() {
super();
list=new ListField() {
protected void drawFocus(Graphics graphics, boolean on) {
}
};
list.setRowHeight(40);
list.setEmptyString("Hooray, no tasks here!", DrawStyle.HCENTER);
list.setCallback(this);
p1 = Bitmap.getBitmapResource("res/images/10.png");
rows = new Vector();
for (int x = 1; x < 13; x++) {
row = new TableRowManager();
LabelField task = new LabelField("" + String.valueOf(x),
DrawStyle.ELLIPSIS);
row.add(task);
row.add(new BitmapField(p1));
rows.addElement(row);
}
list.setSize(rows.size());
add(list);
}
// ListFieldCallback Implementation
public void drawListRow(ListField listField, Graphics g, int index, int y,
int width) {
TableRowManager rowManager = (TableRowManager) rows
.elementAt(index);
rowManager.drawRow(g, 0, y, width, list.getRowHeight());
}
private class TableRowManager extends Manager {
public TableRowManager() {
super(0);
}
public void drawRow(Graphics g, int x, int y, int width, int height) {
layout(width, height);
setPosition(x, y);
g.pushRegion(getExtent());
// Paint this manager's controlled fields.
subpaint(g);
g.setColor(0x00CACACA);
g.drawLine(0, 0, getPreferredWidth(), 0);
// Restore the graphics context.
g.popContext();
}
protected void sublayout(int width, int height) {
int preferredWidth = getPreferredWidth();
Field field = getField(0);
layoutChild(field, 30, 30);
setPositionChild(field, 0, 0);
field = getField(1);
layoutChild(field, 40, 25);
setPositionChild(field, 120, 10);
setExtent(preferredWidth, getPreferredHeight());
}
// The preferred width of a row is defined by the list renderer.
public int getPreferredWidth() {
return Graphics.getScreenWidth();
}
// The preferred height of a row is the "row height" as defined in the
// enclosing list.
public int getPreferredHeight() {
return list.getRowHeight();
}
}
public Object get(ListField listField, int index) {
// TODO Auto-generated method stub
return null;
}
public int getPreferredWidth(ListField listField) {
// TODO Auto-generated method stub
return 0;
}
public int indexOfList(ListField listField, String prefix, int start) {
// TODO Auto-generated method stub
return 0;
}
Are you sure the bitmap is not null? I would check that first -- perhaps it's not finding the resource.
Could the LabelField be taking the entire width of the screen (it does that on certain situations)? When you only set the image without setting the label, does the image show?
The image path is not necessary as you put it
p1 = Bitmap.getBitmapResource (" res/images/10.png ");
only needs
p1 = Bitmap.getBitmapResource (" 10.png ");