开发者

Android gradient emboss effect

开发者 https://www.devze.com 2023-02-09 13:55 出处:网络
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).

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 wi开发者_StackOverflowth 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.


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.


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.

0

精彩评论

暂无评论...
验证码 换一张
取 消