How do I make my custom bitmap button field use a transparent background?

Question

I have a custom bitmap buttonfield that completely works, however, the background behind the image is showing a white rectangle. I've found where it makes the color white, but I cannot figure out how to make it completely transparent. Any ideas? I'm programming in blackberry java JDE 5.0

FYI The button image is a rounded corner png file that uses transparency on the corners

Code:

public class BitmapButtonField extends Field 
{

    Bitmap _currentPicture;
    private Bitmap _onPicture;
    Bitmap _offPicture;
    private int id;


    public BitmapButtonField (Bitmap  onImage, Bitmap offImage)
    {
       super(Field.FOCUSABLE|Field.FIELD_HCENTER);
       _offPicture = offImage;
       _onPicture = onImage;
       _currentPicture = _onPicture;
    }

    public void setButtonImage (Bitmap onImage, Bitmap offImage)
    {
        _offPicture = offImage;
        _onPicture = onImage;
        _currentPicture = _onPicture;
     }

    public void setButtonId(int id)
    {
        this.id = id;
    }
    public int getButtonId()
    {
        return this.id;
    }    

    public int getPreferredHeight()
    {
        return _onPicture.getHeight();
    }


    public int getPreferredWidth()
    {
        return _onPicture.getWidth();
    }

    protected void onFocus(int direction)
    {
        _currentPicture = _offPicture;
       invalidate();
    }

    protected void onUnfocus()
    {
        _currentPicture = _onPicture;
       invalidate();
    }

    protected void drawFocus(Graphics g, boolean on)
    {        
        g.setBackgroundColor(Color.BLACK);
    }

    protected void layout(int width, int height) 
    {
        setExtent(Math.min( width, getPreferredWidth()), Math.min( 
                            height, getPreferredHeight()));
    }

    protected void paintBackground(Graphics g) {
          int prevColor = g.getColor();
          int prevAlpha = g.getGlobalAlpha();
          g.setColor(Color.YELLOW);
          g.setGlobalAlpha(0);
          g.fillRect(0, 0, getWidth(), getHeight()); // or g.getClippingRect()
          g.setColor(prevColor);
          g.setGlobalAlpha(prevAlpha);
        }

        protected void paint (Graphics graph){

        graph.setColor(Color.WHITE);
        //super.paint(graph);

        graph.fillRect(0, 0, getWidth(), getHeight());
        graph.drawBitmap(0, 0, getWidth(), getHeight(), 
                             _currentPicture, 0, 0);    
        }


    protected boolean navigationClick(int status, int time)
    {
        fieldChangeNotify(0);
        return true;
    }

    public boolean keyChar(char key, int status, int time)
    {
        if (key == Characters.ENTER)
        {
            fieldChangeNotify(0);
            return true;
        }
        return false;
    }
}

You have implemented `protected void drawFocus(Graphics g, boolean on)` and `protected void paintBackground(Graphics g)`. And you have also specified the background image for focused state. You can remove the implementation of `paintBackground` and `drawFocus`. Also the line which set the graphics color to white and fills a rectangle can be deleted from the method `paint`. That is you need to only paint the bitmap image on the `paint` method. I have modified your code here, http://pastebin.com/g9n8bqYc. You can check that (I didn't test it). — Rupak, Apr 23 '12 at 04:28
Rupak that worked perfectly! Thanks so much man. I'm trying to give you kudos here but its not letting me:( — Joey John John, Apr 23 '12 at 16:18

score 0 · Answer 1 · edited May 23 '17 at 10:24

0

Make sure your paint() method uses drawARGB to draw the bitmap on screen. I had a similar problem, "Scale a Bitmap and preserve alpha, on BlackBerry", and it turned out that drawRGB and drawBitmap don't make use of the alpha channel, so won't leave anything transparent.

edited May 23 '17 at 10:24

Community

1
1

answered Apr 23 '12 at 00:41

Michael Donohue

11,776
5
31
44

I'm not using drawRGB though, I'll post my code so you can get a better idea of what I'm using: – Joey John John Apr 23 '12 at 03:59
You're using 'graph.drawBitmap(...)' which I believe ultimately uses drawRGB. You need to implement the pixel drawing directly - use getARGB(...) on the bitmap, and then use graph.drawARGB(...) – Michael Donohue Apr 23 '12 at 04:05
@MichaelDonohue, normally If I use a transparent PNG image, the `drawBitmap` method works well and handles alpha channel information while drawing. Also the method works if I manipulate the data (transparency) of the image (through `getARGB()` and `setARGB()`). – Rupak Apr 23 '12 at 04:31

score 0 · Answer 2 · answered Apr 23 '12 at 07:31

your are using

graph.setColor(Color.WHITE);

 graph.fillRect(0, 0, getWidth(), getHeight());

method in your code (in paint() and paintBackground() method) which will create a white rectangle.

I think you need to remove this code.

if you still not able to find issue then i will provide another Custom BitmapField example.

score 0 · Accepted Answer · edited Oct 09 '12 at 10:48

You have implemented

protected void drawFocus(Graphics g, boolean on)

and

protected void paintBackground(Graphics g)

And you have also specified the background image for focused state. You can remove the implementation of paintBackground() and drawFocus(). Also the line which set the graphics color to white and fills a rectangle can be deleted from the method paint. That is you need to only paint the bitmap image on the paint method. I have modified your code here, You can check that (I didn't test it).

How do I make my custom bitmap button field use a transparent background?

3 Answers3