Android渐变浮雕效果

Question

I am trying to achieve from code the following: (can't post images unfortunatelly)

A rectangle with rounded corners, with an emboss effect (the light comes from top left corner). In the middle there is a circle engraved in the rectangle. Imagine a water surface, and a drop of water hits the surface. It creates a dent in the surface. That circle is also painted with some linear gradient.

The problem is I could only use the EmbossMaskFilter from Android to raise the surface, to make it closer to the user eye, but I don't know how to implement the opposite. Anyone can help me with that?

Thank you very much.

Answer 1

Use a composite drawable, or drawables in layers.

To create a drawable with rounded corners and a gradient within, use something like this:

<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <corners android:radius="10dp"/>
    <gradient android:startColor="@color/gradientstart" android:endColor="@color/gradientend" android:angle="315"/>
</shape>

Create two such drawables and put them on top of each other to create the required effect.

Answer 2

Unless you use a pretty good number of layer-list items as a drawable you probably won't get the effect you are looking for easily with XML drawables. A better solution would be to create a 9-patch image. See how it works at draw9patch.com , which is a tool to create 9 patch images from a standard images.

NinePatch documentation: here .

In case, you still really want to use xml drawables you can still achieve the effect (although performance might take a hit) using a layer-list with multiple gradients stacked ontop of each other.