Android achieves 3dtouch effect

Renderings for this blog:

A low quality dynamic diagram:

The effect of this moving picture is not very good. In fact, the blur effect should be like the first picture above. The code will be released later. If you are interested, you can try to run it to see the effect.

Let's talk about the idea first. In fact, we only need to master a few things to achieve this effect:

1. Screenshot

2. Blur (Gaussian blur)

3. Add view

4. Pop up animation

5. Handle long press events

6. Optimization (fuzzy speed and intensity)

Process: when the user long presses an item, we first intercept a picture of the current screen, then compress the picture, then perform Gaussian blur, and then overlay it on the whole layout (including the overlay toolbar), so that the effect of interface blur comes out. Then we dynamically add a cardview to the interface to present our item layout. The cardview will appear on the corresponding item we click. Finally, add a corresponding 3D touch pop-up animation.

Next, we complete the whole process step by step:

① Screenshot

This part is relatively simple because there are ready-made methods to get the bitmap of the current screen display content. The code is as follows:

Let's talk about the layout first. The layout file here is as follows:

We can see that we use a FrameLayout in the outermost layer because we need to cover a Gaussian blurred screenshot in the whole layout. We can see that the ImageView at the bottom is used for blur effect. At first, we just need to set its imagealpha to 0 to make it transparent. The bottom cardview is a pop-up control, which will be discussed later. The root of our screenshot is LinearLayout under FrameLayout, because we need to blur the toolbar.

② Gaussian blur

This has been mentioned in my last blog - how to do dynamic Gaussian blur. You can refer to it. This gives the corresponding code:

Configure the build. Of the corresponding module Gradle file:

③ Pop up view

For this view, we need to add the view of the item to the cardview, and make the position of the cardview above the corresponding item position.

Here, the item view cannot be directly loaded into the cardview, because the item view already has a parent layout, and an exception will be thrown. The solution is to re map one according to the layout, and then fill in the data. Then set the position information and size information of the card, because we want the card to be displayed on the corresponding item.

④ Pop up animation

This is a relatively simple part. We directly use propertyvaluesholder to pop up and shrink, because we need to scale X and y at the same time. Of course, we can also use other methods. The code is as follows:

⑤ Listen for long press events

Because the listview is only used to simplify this content, it can be implemented directly through the existing listener:

In the third row here, two blur methods are called to make Gauss blur on the picture. If you read the last blog, the maximum fuzzy radius of each time Gauss is 25. If you want to achieve the fuzzy effect of iOS, 25 is not enough, so you can blur the blurred picture again, and compare the graph (left side is 2 blur, the right 1 times).

⑥ Optimize

However, in fact, for a mobile phone with high resolution, it is not recommended to blur the screen for many times when the screen resolution is large. Here you can imagine if we first get the screenshot, and then whether we can compress the captured image first. After all, it still needs to be blurred in the later stage, that is, the compressed image does not affect us to blur (because it is blurred in the end). In fact, after image compression, we will find that the blur effect of the image is different under the same blur radius, as shown in the following two figures:

The reason is that the color of a point determined in the algorithm of Gaussian blur is obtained by averaging (weighted) other points near the point, and more pixels near the point are determined by the blur radius. When the image is compressed, the area sampled each time becomes larger under the same blur radius, so the blur intensity is greater.

In this way, we don't need to blur many times, and after compressing the picture, the total pixels become less and the blur speed becomes faster.

Here is also the code for image compression:

summary

The above is all about the implementation of 3dtouch effect on Android. Those who are just interested can practice it by themselves. I hope the content of this article can be helpful to you.