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:

Answer 1

I'll start by saying that my opinion is the most efficient method of reproducing something like the iPhone screenshot you linked is to create an image like they did instead of doing all the drawing in code (doesn't have to be a 9-patch either, because I don't see where it would need to stretch if you create the whole piece).

I'm not so sure about doing all the shadows, that would probably take manipulating some Paint objects with a series of BlurMaskFilters. But the sharp gradient could be done in XML using a Layer List. The basic concept would be to put the base background drawable and a partially transparent overlay drawable together layered on top of each other. If you can define the exact height of the overall image, the overlay can be set at 50% of that height. If the whole thing is to stretch, you could create the overlay as a Clip Drawable with "top" gravity and a level of 5000 (50% of the 0-10000 scale). This would always draw the overlay on the top half regardless of size.

If you needed to apply a second overlay to create another bottom gradient, you could do the same with yet a third layer in the list. But typically a gradient on the base with a single overlay to create the sharp edge is enough.

Here's a reference link to the different items I'm describing, which you have probably already seen: http://developer.android.com/guide/topics/resources/drawable-resource.html

Hope that helps!

Answer 2

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);