ViewPager Animations In Android Studio

The Android ViewPager has gained a lot of traction and has become a very interesting concept among Android apps. It enables users to switch smoothly between fragments which have a common UI and it’s a great way to make your app stand out from the crowd.

ViewPager is a widget(android.support.v4.view.ViewPager ) that is used to swipe screens horizontally. This doesn’t mean that it can’t be used for vertical swiping but to do that you require a custom VerticalViewPager. To implement it one must have basic knowledge of PageAdapter and Fragments. The usage of a page adapter depends on whether you’re dealing with dynamic data or static data. In case a user wants to handle dynamic data, FragmentStatePageAdapter is used whereas FragmentPageAdapter is used for static data.

ViewPagers are mainly used in applications because it provides visual continuity. They basically keep track of which page is visible and then ask PageAdapter to display the next page in the hierarchy. Not just this, it even allows you to create all sorts of awesome slide effects and animations!

So, how do you implement it?

There are 3 basic components for the full implementation of ViewPager :

1. An activity which contains ViewPager and chief UI.
2. A set of fragments that are viewed as separate pages in ViewPager.
3. FragmentPageAdapter or FragmentStatePageAdapter which returns the correct fragment which needs to be displayed next.

We use PageTransformer for handling Animations in ViewPager. As you make progress using PageTransformer, you need to define 3 basic positions for animations :

• Position = 0 : Signifies current page.
• Position = 1 : Signifies page offset to right side.
• Position = -1 : Signifies page offset to left side.

By default, it takes a minimum of two pages at a time. If a user scrolls halfway between Page1 and Page2, then Page1 takes a value of -0.5 and Page2 takes a position of +0.5. It can get tiresome and quite complicated to look for the positive and negative signs each time. Thus, we only check the absolute value and ignore the sign Math.abs(position).

Now, let’s cut back on the intricacies and dive into the world of beautiful animations that you can create inside ViewPager.

So let’s start building some fascinating Animations:-

CUBE-IN-SCALING-ANIMATION -

CUBE-OUT-SCALING ANIMATION -

HINGE ANIMATION -

TOSS-ANIMATION -

GATE ANIMATION -

FIDGET SPINNER ANIMATION -

Applications of these Animations:

1. Mainly these animations are used in Video Makers. For example:- Live applications like VidArt, Video Editor, Scoompa Video, etc.
2. Viewpagers with embedded Media players can also be used for making feed screen transitions in applications like tiktok and musically.
3. Animations like a cube in Scaling, Cubeout scaling, etc. can be used in making applications that are used for building Presentations for eg. Visme, Beautiful.ai, Prezi, etc.
4. We can use Viewpagers for onboarding screens that showcase features of applications as we have in Slack, Reddit, MasterClass, Weather app, etc.
5. We can implement horizontal Viewpagers for informative banners also on screens as we have in MyJio, Book My show app, etc.
6. Games like Magic Cube puzzles, Magic Cubes of Rubik, etc can use Cube Transitions to make it more appealing.

I hope you found this blog interesting. UI is one of the most important parts in any application and the use of transitions can make them even more captivating. Good functional transitions make a user interface significantly more appealing and usable.ViewPagers act as a mini onboarding tool and are very delightful and appealing. In many applications, we can see the use of ViewPagers as an introduction window. Animations help you make a very impactful first impression on your users. In today’s world, every user wants something easy, and winsome and ViewPager is a solution to such demands.