As we all know, the Android team is constantly releasing new updates and improvements to the Android Framework. One of the components that received major updates is ViewPager2. ViewPager2 is the replacement of ViewPager and got few performance improvements and additional functionalities. In order to use ViewPager2, you should consider using androidx artifacts in your project.
In my earlier tutorial, I have explained Building Intro Sliders to your App using ViewPager. In this article, we are going to try the same but using ViewPager2. We’ll also go through the additional interesting functionalities provided by ViewPager2.
To get started with ViewPager2, add the dependency to app/build.gradle.
Usually, ViewPager is used to achieve a tabbed view by combining the TabLayout and collection of Fragments. But if you want to have static views without the Fragment class, you can do it using RecyclerView adapter class.
Below is an example of implementing Intro Slides using ViewPager2. The designs are taken from my older example How to Build Intro Slider for your App but the implementation part varies due to changes in ViewPager2 and in adapter class.
Add the ViewPager2 to your layout file. You can see namespace is uses androidx package androidx.viewpager2.widget.ViewPager2.
This creates horizontally swipeable views that are created using static XML layouts. The full code of this example can be found here.
If you want to create swipeable views with Tabs, you can combine ViewPager2, TabLayout and Fragments.
To use TabLayout, add Material Components to your package. This makes the material TabLayout available in your project.
Add TabLayout and ViewPage2 to your layout.
Create required test Fragment classes MoviesFragment, EventsFragment and TicketsFragment.
Finally, create an adapter class that provides Fragments to ViewPager. Here we can see ViewPagerFragmentAdapter extends FragmentStateAdapter.
In a few scenarios, you might want to provide vertical swiping instead of traditional horizontal swiping. To enable vertical swiping, add android:orientation to ViewPager2 element.
Vertical orientation can also be enabled programmatically by calling setOrientation() method.
Another great feature of ViewPager2 is, page transformations i.e the page transition animation from one page to another. Traditionally, we see a sliding animation between two screens. This animation can be customized by providing page transformers to ViewPage2.
To set a custom transformation, use setPageTransformer() method. Below example creates Flip animation between pages.
This creates beautiful vertical flip animation when swiping the pages.
Below are a set of ViewPager transitions that I have collected from different sources (All the credits goes to original authors).
Transformations References:
Viewpager-Transformation
Loginworks
Hi there! I am Founder at androidhive and programming enthusiast. My skills includes Android, iOS, PHP, Ruby on Rails and lot more. If you have any idea that you would want me to develop? Let’s talk: [email protected]
Github link doesn’t work. Can you update?
I forgot to make the project public. Pls check now.
Thanks for notifying me:)
I can’t find the ActivityViewsSliderBinding class
You have to enable view binding in your gradle. Refer the example project.
precise and great explanation !!!!!
Thank You.
Hi Ravi, thank you for these tutorials they help me a lot, quick off topic question. Do you have a Graph QL + Android tutorial in the pipeline?
No Thato, I haven’t planned any.
You don’t like Kotlin?
import info.androidhive.viewpager2.databinding.ActivityFragmentViewPagerBinding;
in part2 AS telling ‘unkown’
Clean your project and build again. Also make sure, viewBinding is enabled in your gradle file.
https://github.com/ravi8x/ViewPager2-Examples/blob/master/app/build.gradle#L31
Is it possible reference the views inside those layout from an activity?
I added some views and I want to reference them and obviously i’m
getting NPE
@Ravi Tamada:disqus please answer
I follow this tutorial but the BottomDots don’t show on lunch the app first screen, but if I swipe right to second screen and back to first screen, or just pause and resume the app, the BottomDots can be seen on first screen. So wired. Can you give me some advices?
WHAT THE HELL IS “ActivityFragmentViewPagerBinding”
Thanks a lot for this amazing Tutorial !
I can’t find the class
where I can find it ?
The file will be generated based on your activity xml file name. For this you need to enable data binding in your project.
https://developer.android.com/topic/libraries/data-binding
I can’t find the class
could you please send it to me?
[email protected]
I mean when you enable data binding in your project, the file will be generated automatically while you build / run the project.
AndroidHive
(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = “//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.9”;
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));
copyright © 2017 Droid5 Informatics Pvt Ltd
www.droid5.com
