Blackberry add border to image when focus

Question

I'm trying to make touchable image which can focus when I scroll it by touchable button on device this is my code for touchable image:

class TouchBitmapField extends BitmapField {
    Bitmap bitmap;
    boolean second;
    int width;
    public TouchBitmapField(Bitmap startBitmap, long style, int width, boolean second) {
        super(startBitmap, style);
        this.second = second;
        bitmap = startBitmap;
        this.width = width;
    }

    protected void drawFocus(Graphics g, boolean on){
        g.setDrawingStyle(Graphics.DRAWSTYLE_FOCUS, true );
        if(on){
           drawHighlightRegion(g, Field.HIGHLIGHT_FOCUS, on, width-(bitmap.getWidth()/2), 0, bitmap.getWidth(), bitmap.getHeight());
        }

        paint(g);
    }
    protected boolean touchEvent(TouchEvent message) {
        if (TouchEvent.CLICK == message.getEvent()) {
            FieldChangeListener listener = getChangeListener();
            if (null != listener)
                listener.fieldChanged(this, 1);
        }
        return super.touchEvent(message);
    }
}

But the problem is that only transparent part of image can focus and I'm resising this Bitmap before create TouchBitmapField and as you maybe know resising bitmap remove transparent part and replace it with black. I tried this class http://www.patchou.com/2010/10/resizing-transparent-bitmaps-with-the-blackberry-jde/ to resize image but I have 25 images on my screen and it's inefficient. Any idea how to make border on image? Any efficient way to draw border in drawFocus(Graphics g, boolean on) method?

Answer 1

The reason why you can only focus the transparent parts of an image is because (as far as I know) drawFocus is fired before paint, causing the bitmap to be drawn last.

I think this solution is what you're looking for. If you want something other than a solid colour as the border, you can play around with the BorderFactory.

class TouchBitmapField extends BitmapField
{
    Bitmap bitmap;
    Border defaultBorder;
    Border focusBorder;

    public TouchBitmapField(Bitmap startBitmap, long style)
    {
        super(startBitmap, style | FOCUSABLE);
        bitmap = startBitmap;

        XYEdges thickness = new XYEdges(5, 5, 5, 5);
        XYEdges colours = new XYEdges(0xff0000, 0xff0000, 0xff0000, 0xff0000);
        XYEdges alpha = new XYEdges(0, 0, 0, 0);

        // Transparent border used by default, so that adding the focus border does not resize the view
        defaultBorder = BorderFactory.createSimpleBorder(thickness, colours, alpha, Border.STYLE_SOLID); 
        focusBorder = BorderFactory.createSimpleBorder(thickness, colours, Border.STYLE_SOLID);

        setBorder(defaultBorder);
    }

    protected void drawFocus(Graphics graphics, boolean on)
    {
        // Override default blue highlight
    }

    protected void onFocus(int direction)
    {
        super.onFocus(direction);
        setBorder(focusBorder);
    }
    protected void onUnfocus()
    {
        super.onUnfocus();
        setBorder(defaultBorder);
    }
}

If you want your border to be overlapping your image, you can override your paint method and draw as you want.

protected void paint(Graphics graphics)
    {
        super.paint(graphics);

        if(isFocus())
        {
            int tempCol = graphics.getColor();
            int tempAlpha = graphics.getGlobalAlpha();

            graphics.setColor(0xff0000);
            graphics.setGlobalAlpha(128);

            for(int i = 0; i < 5; i++)
            {
                graphics.drawRect(i, i, getWidth() - i * 2, getHeight() - i * 2);
            }

            // Reset back to original state
            graphics.setColor(tempCol);
            graphics.setGlobalAlpha(tempAlpha);
        }
    }