Android imitation simple book dynamic searchview search bar effect

The dynamic search bar effect of Jianshu is like this, which is very tall.

ezgif.com-resize.gif

Think about it carefully. In fact, it is very simple to realize. This is the effect I did. It is basically perfect.

ezgif.com-resize (2).gif

To achieve this effect, just focus on a few points

1. Animation effect of search bar extension and contraction 2. Timing of search bar extension and contraction 3. Gradient of top transparency

Search bar stretch and shrink animation effects:

As long as we make it clear that we can easily implement it by using the transition framework provided by the system. First, we need to introduce the dependency compile 'com. Android. Support: Design: 25.3.1'. We need to know that the transition effect we use only encapsulates the content of attribute animation, which can be compatible before 5.0.

Msearchlayout is the layout of the search box. You only need to dynamically set the size of the expanded and contracted layout and the text displayed in it. Leave the rest to transition ~ so that the search box can swing back and forth..

When to stretch and shrink the search bar:

Observe the effect. The extension time starts when the top completely covers the banner, and the contraction time is triggered when rolling to the top. We need to monitor the scrolling status of the sclerview. At the top, I use a custom layout toolbar, and then use an ImageView instead of banner.

Of course, the whole layout of Jane book is based on recyclerview. Here I use scrollerview for convenience. Recyclerview only needs to monitor the corresponding scrolling status.

Gradient for top transparency

Direct code

Note that the changetoolbaralpha () method is called when listening to the scroll event just now, and it needs to be initially set to fully transparent toolbar. Getbackground(). Mutate(). Setalpha (0);

Well, that's all the key code~

The complete code is attached below

Layout file

Just one activity

More complete here https://github.com/yanyiqun001/dymicSearchview I hope you can give me more support

The above is the whole content of this article. I hope it will be helpful to your study, and I hope you can support programming tips.