Android implements built-in shadows in views - take seekbar as an example

Recently, I encountered a need for a project, which is roughly like this. At

first glance, it can be realized by an ordinary seekbar, but there are quite a lot of mysteries in it. First of all, his background is not ordinary. He also brought a Click on the shadow, and then there is a shadow near the button, the background and the progress bar have rounded corners, then this requirement can be refined into these few.

• background shadow + rounded corners
• Progress bar rounded corners
• button shadow

Let me talk about the easier to implement first: the progress bar, this is very simple, just add a shape fill directly, and add a rounded corner attribute.
The second is the realization of the button. This button is not an ordinary button, so it will be very troublesome to draw a shadow. The most convenient and fastest way is to ask an artist to ask for a picture with its own shadow to paste on it.

Finally, let me talk about how I realized the background image.
First, I thought of 3 ways.

1. Use the same method as the button to find a design with a shadow, and then use the drawable attribute to add it. Although this is simple, there is a big problem in adaptation. With the change of the screen size, the seekbar will is stretched, resulting in a very blurred background. So I gave up, and later I heard that this situation can be avoided by using the .9.png format, but I haven’t tried it (leave a pit first)
2. Using a custom seekbar method and using paint to draw gradients is achievable, but it is very unfriendly to newcomers to android, and requires a certain level of proficiency in drawing, otherwise there is no original process.
3. The last method is the most convenient and flexible, which is to use the gradient in the shape to draw the background, adjust the startcolor, endcolor, centercolor to control the style of the shadow, and then use the angle to control the angle, and centerY to control the center position of the gradient. It roughly shows the style of the shadow.

Let’s not put the code, let’s put the shape attribute I use

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:id="@android:id/background">
        <shape>
				<!--这里是背景-->
            <gradient
                android:startColor="#F1E8E8"
                android:centerColor="#ffffff"
                android:endColor="#FBF7F7"
                android:angle="270"
                android:centerY="0.4"
                />
            <corners android:radius="30dp" />
        </shape>
    </item>

    <item android:id="@android:id/progress">
        <clip>
					<!--这里是进度条-->
            <shape>
                <solid android:color="@color/red_primary" />
                <corners android:radius="30dp" />
            </shape>
        </clip>
    </item>
</layer-list>

Finally, put a picture of the finished style at the end