android - Gradients and shadows on buttons

Question

Is it possible to programatically, or via xml configuration (and not via 9patch png), to achieve the effects as seen on Springpad widget:

If you look closely, there's a sharp border/line between the upper (brighter) and lower (darker) gradients. Also, there are inner and outer shadows for that embossed area on the right.

I know how to set gradient background on a button, but that gradient is constant, without that sharp line in the middle. Also, I couldn't find any reference on shadow creation and manipulation.

Thanks.

Answer 1

I think the best way would be to approach the issue using

android.graphics

package. Create your own Bitmap, draw over Canvas using Paint that has one type of shader linear gradient to the upper part of the image and another one to the lower part. For more complex effects you may use blur or emboss masking, combine different gradient types (e.g. linear and radial), produce nice results via XFer mode combinations of two bitmaps, or apply different color filters.

I made simple example:

using the code below. Blur was added to smear the edges.

    Bitmap bmResult = Bitmap.createBitmap(buttonWidth, buttonHeight, Bitmap.Config.ARGB_8888);
    Canvas canvas = new Canvas(bmResult); 
    Paint paint = new Paint();
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0xFF284560, 0xFF284060, TileMode.MIRROR));
    canvas.drawPaint(paint);
    paint.setShader(new LinearGradient (0, 0, 0, bmResult.getHeight()/2, 0x55FFFFFF, 0x22FFFFFF, TileMode.CLAMP));
    paint.setMaskFilter(new BlurMaskFilter(3, BlurMaskFilter.Blur.NORMAL));
    canvas.drawRect(0, 0, bmResult.getWidth(), bmResult.getHeight()/2, paint);