Posted on

Android Animated ViewPager Tabs


android animated viewpager tabs

Designed by Freepik

 

Hi, today I’ll implement this kind of design. It doesn’t look too complicated. Let’s do it!

 

One of the best principles of programming I learned: don’t reinvent the wheel. What are two obvious parts here? ViewPager and tabs, right? Implementing any of those yourself would take more than 12 hours for sure. That’s what we’ll get in result

android animated viewpager tabs

 

ViewPager

I’m just going to use Android SDK ViewPager, no need to do any changes here

Tab Layout

SmartTabLayout library is the most customizable library up there with bunch of out of the box features. Exactly what we need.

So first we need to have tabs without any background and indicator. There’s no background if you don’t put TabLayout inside AppBarLayout. One thing done, indicator is easy to remove by setting its thinkness

Always At Start

Next one is keep tabs always at start, even when it’s the last one. Library doesn’t have this in particular, but something similar – indicator always centered

android animated viewpager tabs

So we need to modify it. Since library has some package private classes, I need to clone the whole library and add it as a module dependency to change it. I added custom attribute

Which behaves almost like always centered and how that one works at the first place is it adds padding to start and end tabs and indicator itself we don’t need. So I just add double padding to last tab, that’s it.

Circle Tab

As a simple circle placeholder I have view with circle shape background. That’s the only code I needed to add in my Activity. And remove titles from ViewPager adapter if any were.

Animate First Tab

Now since we’re using a library, everything is already written there. There’s a ViewPager.OnPageChangeListener implementation already there, just need to add some code for scaling tabs and translating them.

1.7f is a final scale size. That’s actually all the code we need to write and just few lines for initial scaling, translating first tab.

Tab Layout

Finally default circle size is 48 dp, it has margins on sides which gives room for scaling and that’s basically it. It was very easy to implement because we used a library as a core.

I also wrap ViewPager and TabLayout in FrameLayout where tabs overlay pager to give this cool look.

 

That’s is you can get source code here. For the most part it’s all in tab.xml and library module modifications described above. Thanks for reading, don’t forget to subscribe, follow me on Twitter, Facebook, G+ and share with friends if you think they will benefit from it!