Draw transparent gradient with alpha transparency from 0 to 1

Question

I have a dynamically generated bitmap in Android that I would like to feather from the top edge such that the border area would be fully transparent at the top and gradually change to fully opaque slightly below.

Create an evenly fully-transparent top edge

transparentPaint = new Paint(Paint.ANTI_ALIAS_FLAG);
transparentPaint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.SRC_OUT));
Shader shader = new LinearGradient(0, 0, 0, 20,
                    Color.TRANSPARENT, Color.TRANSPARENT, Shader.TileMode.CLAMP);
transparentPaint.setShader(shader);
// the bitmap is dynamically generated beforehand
Canvas c = new Canvas(bitmap);
c.drawRect(0, 0, bitmapWidth, 20, transparentPaint);

Alpha gradient instead of fully-transparent hole?

How would you achieve something like this:

[ Just the top edge in this case ]

Answer 1

Have a look at this example: Make certain area of bitmap transparent on touch

Here is a way to do it with a gradient paint:

Paint framePaint = new Paint();
for(int i = 1; i < 5; i++){
   setFramePaint(framePaint, i, imageW, imageH);
   myCanvas.drawPaint(framePaint);
}

...

private void setFramePaint(Paint p, int side, float iw, float ih){
                // paint, side of rect, image width, image height

                p.setShader(null);
                p.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.DST_IN));

                float borderSize = 0.1f; //relative size of border
                //use the smaller image size to calculate the actual border size
                float bSize = (iw > ih)? ih * borderSize: ih * borderSize; 
                float g1x = 0;
                float g1y = 0;
                float g2x = 0;
                float g2y = 0;
                int c1 = 0, c2 = 0;

                if (side == 1){
                    //left
                    g1x = 0;
                    g1y = ih/2;
                    g2x = bSize;
                    g2y = ih/2;
                    c1 = Color.TRANSPARENT;
                    c2 = Color.BLACK;

                }else if(side == 2){
                    //top
                    g1x = iw/2;
                    g1y = 0;
                    g2x = iw/2;
                    g2y = bSize;
                    c1 = Color.TRANSPARENT;
                    c2 = Color.BLACK;


                }else if(side == 3){
                    //right
                    g1x = iw;
                    g1y = ih/2;
                    g2x = iw - bSize;
                    g2y = ih/2;
                    c1 = Color.TRANSPARENT;
                    c2 = Color.BLACK;


                }else if(side == 4){
                    //bottom
                    g1x = iw/2;
                    g1y = ih;
                    g2x = iw/2;
                    g2y = ih - bSize;
                    c1 = Color.TRANSPARENT;
                    c2 = Color.BLACK;
                }

                p.setShader(new LinearGradient(g1x, g1y, g2x, g2y, c1, c2, Shader.TileMode.CLAMP));

            }

Answer 2

If you can accept white edges instead of transparent, try SCREEN mode. In PorterDuff.Mode.SCREEN mode, white pixels remain white and black pixels become invisible. Create an overlay bitmap where the edges are white fading into black in the middle and blend it with your image. This will create a bitmap with white edges fading into the photo in the middle.

Answer 3

Romain Guy used a very similar fading as to what you want to achieve , only he also added rounded corners in addition to this effect