Netflix Toolbar Scroll Effect
Recently I was with of group of Android developers which were talking about the Netflix Android application. Even if the Netflix Design Team has done a nice work there with the transparent toolbar for the content but at the same time opaque for the horizontal scroll view, the team was astonished by the implementation of it! That was enough, I had to give it a try!
First Thoughts
I had to decide how I want to implement it. Legacy XML or fresh Jetpack Compose. I could not decide so I did it in both! Unfortunately for the legacy people, I am going to present the Jetpack Compose approach. If you need the legacy go to the end of this article, but please don’t because Jetpack Compose is here to stay!
Implementation
While I was keep scrolling the Netflix application I thought that it look like a CoordinatorLayout with some tweaks here and there. Since I am an expert in Jetpack Compose I started by search in Google “CoordinatorLayout functionality in Compose” and I was redirected there. It is always good to have this experience in Jetpack Compose and who is more experienced in Jetpack Compose than Google itself?!
Since we have the scroll effect now we have to work on creating the whole screen and have it as reusable as possible. After some time of rearranging items I concluded in this code.
Apart from the Mathematics that are happening in NestedScrollConnection and there is nothing more to be explained by me, since they are ̶s̶t̶o̶l̶e̶n̶ borrowed for the link I mentioned above there are other things that I would like to share with you.
I think I started to love the wrappers around other Composables because I feel free to change things without modifying the public API. This kind of wrappers are MainContent, SecondaryAppBar, PrimaryAppBar. The developers are free to use these as parameters in the NetflixLazyScreen or they can use their own to ̶b̶r̶e̶a̶k̶ ̶e̶v̶e̶r̶y̶t̶h̶i̶n̶g̶ create a unique experience for their users!
The other thing that I started to love is the Settings parameter. In case I want to add values which could be changed by the user I have to create a new Composable function for every time I remember to add something new. But the settings parameter (here is NetflixLazyScreenSettings) let me free to do whatever I want and whenever I want without affecting my public API!
The settings parameter in a
Composablefunction let you do whatever you want and whenever you want without affecting your public API!
Integration
Since we have the API we have to integrate it to our code. We can do this like any regular Composable function!
I think the example is really simple and our subcomponents (MainContent, SecondaryAppBar, PrimaryAppBar) truly improve readability. Tell me in the comments if you disagree with any of the above approaches and if you used something better share your thoughts.
‘Nough Code…
The screen you are going to see is this:
…code is never enough!
In case you want to just install this as a dependency through Gradle you can see details here.
As I promised this also a legacy implementation using xml, but it is not as robust as the Compose implementation. The project can be found here. Unfortunately this is part of a bigger repository of mine! I already feel sorry that you have to download all of these stuff! Do you want a separate article presenting the XML implementation?
If you want to read more like this, how about a double header LazyColumn?
