How to make EditText stick to top of screen while scrolling the view below it?

Question

I have worked with CoordinatorLayout and know how to make TabLayout stick to the top of the page when it is beneath the Toolbar.

However, I am working on a new app now, which has the following screen in a fragment. So the toolbar remains fixed at the top, but I want to achieve a scroll effect which moves the EditText from the center of the blue image region to the top of the page (below the Activity's Toolbar).

This is the layout that I am aiming for (taken from Trucaller app) :

1) On launch :

2) On scrolling :

I have tried numerous techniques using CoordinatorLayout and NestedScrollView, but my EditText (SearchBar) always scrolls up along with the entire blue image region (AppBarLayout).

Thanks.

Answer 1

Got it working, thanks to StickyScrollViewItems library. Still need to achieve the fade out effect when scrolling up, and fade in when scrolling back down.