Create a Parallax Scrolling Header with Tabs in Android
Material Design has seen the rise in on-scroll animations in Android apps. Certain designs include a parallax scroll effect with a header images, along with Tabs. In this post, we’ll look at just that.
Some examples of popular scrolling patterns include the Flexible Space with Image and Quick Return pattern. Parallax scrolling is yet another scrolling technique. In this post, we’ll look at making parallax scrolling Tabs using Android Design Support Library.
Parallax scrolling has been very popular in web design and now in app development as well. I’ve seen quite a few people wanting to implement this and I wanted to provide a solution without using a third party library. So here it is.
Creating Parallax Scrolling on Android is nothing but the Flexible Space with Image pattern, with an added TabLayout.
Parallax Scrolling Tabs in Android
Have you read the android tutorial for creating the Flexible Space with Image Pattern? If you have, then you would immediately recognise that all this needs is a TabLayout.
For those who haven’t read it, don’t worry. I’ll walk you through everything in this article.
But wait, hold your horses! I just threw in the TabLayout and this is what I got.
Unlike the typical Material Design Tabs, Tabs here are transparent. So clearly, the plug and play solution doesn’t work here.
It looks like some tweaks are required.
So before I straight away paste the entire code, let’s look at the layout skeleton.
<android.support.design.widget.CoordinatorLayout>
<android.support.design.widget.AppBarLayout> <android.support.design.widget.CollapsingToolbarLayout>
<ImageView />
<android.support.v7.widget.Toolbar />
<android.support.design.widget.TabLayout />
</android.support.design.widget.CollapsingToolbarLayout></android.support.design.widget.AppBarLayout>
</android.support.design.widget.CoordinatorLayout>
The CollapsingToolbarLayout is like a super FrameLayout. So take note of the ordering of elements inside. Whatever element you place last, is what appears on the top. This positioning is important to get the parallax scrolling to work.
Moreover, the ImageView is what makes the parallax scrolling possible. We can tell the ImageView to parallax scroll with a single attribute. More on this later.
So now that you have an idea of the layout structure, behold the full XML layout code!
I know the code is really long. But it takes twice the effort to attempt a parallax effect using Java. So if you’ve recovered from the shock, let’s see what’s going on in the above code.
Layout Breakdown
Some of the attributes here are what make the parallax scroll work. Let’s go through them, one by one.
21. The total height that we want our collapsible header View to have. 256dp is a good number.
25. This is not the Flexible Space with Image pattern. We don’t want the Toolbar title to collapse. We want it fixed at the top. So we disable the ‘collapsible’ title.
34. Flag which triggers the parallax effect upon scrolling.
36–41 A Scrim that makes Tab text more readable against the busy header background.
47. Remember that CollapsingToolbarLayout is an extension of FrameLayout. This attribute ensures the Toolbar stays on top.
48. TabLayout by default has a height of 48dp. Telling our Toolbar to have a bottom margin of the same, avoids the overlap issue that we saw above.
49. Makes sure the Toolbar is consistently pinned to the top. Otherwise when you start scrolling, the Toolbar will scroll off-screen.
56. Ensures the TabLayout sticks to the bottom of the header.
A visual breakdown of the layout will give you a better idea.
Set up the ViewPager
In case you forgot, the Tabs need a ViewPager to work with, so let’s take care of that in our Activity.java.
Start by creating a dummy Fragment. For the sake of displaying some content, the Fragment will display a RecyclerView.
Additionally, the Fragment’s background colour will change depending on it’s position in the ViewPager.
Note that DummyFragment is just a placeholder which I’m using with a different background colour for each of my Tabs. DessertAdapter is a RecyclerView.Adapter I wrote to display scrollable content that can demonstrate the parallax effect.
You on the other hand, must define a distinctFragment accordingly, for each of your Tabs.
ViewPager Adapter
A minimal Adapter for our ViewPager (to hold 3 Fragments).
Hooking up ViewPager with TabLayout
Finally we’ll attach the ViewPager to our TabLayout in the Activity’s onCreate() method. We use the OnTabSelectedListener to take care of switching Fragments on tap.
...
tabLayout.addOnTabSelectedListener(new TabLayout.OnTabSelectedListener() {
@Override
public void onTabSelected(TabLayout.Tab tab) { viewPager.setCurrentItem(tab.getPosition());
switch (tab.getPosition()) {
case 0:
// TODO
break;
}
} @Override
public void onTabUnselected(TabLayout.Tab tab) { } @Override
public void onTabReselected(TabLayout.Tab tab) {}});
...
Don’t forget to populate your ViewPager Adapter with your Fragments. I’m adding 3 Fragments to the Adapter, each named after it’s background colour.
private void setupViewPager(ViewPager viewPager) {
ViewPagerAdapter adapter = new ViewPagerAdapter(
getSupportFragmentManager()); adapter.addFrag(new DummyFragment(
ContextCompat.getColor(this, R.color.cyan_50)), "Cyan"); adapter.addFrag(new DummyFragment(
ContextCompat.getColor(this, R.color.amber_50)), "Amber"); adapter.addFrag(new DummyFragment(
ContextCompat.getColor(this, R.color.purple_50)), "Purple"); viewPager.setAdapter(adapter); }
The setupViewPager() method simply initialises my Fragment and adds them to the ViewPager.
Dynamic Tab colour with Palette API
The colour you see the Toolbar + TabLayout take, is picked from the header image. Courtesy of the Palette API. This is dynamic and the colour varies depending upon the image.
Using the Palette API, we’ll set colours for the Toolbar, TabLayout and Status Bar. This is easily done by the following code snippet:
Notice that the actual Palette API calls reside in the try block. But it is good practice to always handle the fail case. Here, the Palette API can fail if we’re unable to get a Bitmap. So as a fallback, we resort to using our app’s primary colours.
Final Output
With everything in place, run your app and scroll to watch that beautiful parallax scrolling.
We have a neat TabLayout that plays nice with our Toolbar. Our header image scrolls nicely and fades into our image’s primary vibrant colour.
As you can see this is a neat pattern in use which many of you would have seen. A perfect use case for this would be in apps that have categories. Like the Play Store app that have sub-categories.
Before you go
Did you notice the parallax scroll in that GIF? It’s really subtle and adds a layer of depth. If you want parallax to be more prominent, you can do so using a simple attribute.
Simply add this line to your ImageView.
...
<ImageView
app:layout_collapseParallaxMultiplier="0.75"
...
/>
....Just keep in mind the multiplier should range between 0.0 and 1.0. — Android docs.
Source Code Available on GitHub
So how are you using the Design Support Library? Do you have your own take on parallax scrolling? Let me know in the comments below.
Suleiman is an Android developer with an eye for design. He loves creating apps that people can use with ease. He actively writes such articles on his blog. Say hi on LinkedIn or Twitter.
Originally published at blog.iamsuleiman.com on September 15, 2015.
