Easy Intro Slides using ViewPager2 and Fragment for Android

Intro slides is one of way to introduce audience/user on our application’s features for the new users. In this post, we will learn how to code an intro slides with edit text to input your name or email. We will use ViewPager2, fragment and dots indicator from tommybuonomo that will bring easy way to build intro slides.

Project Setup

First, create an Android Studio project first. To create new project, use an empty activity which we will name SlidePage :

Screenshot create new project: Author

Then, add a Gradle dependency for the library in the build.gradle app file, add the following implementation:

After that, click Sync Now:

Screenshot Sync Now: Author

Wait until the Sync process is complete. After the sync has completed, we will be ready to start coding.

Our first step will be adding an xml file to use as string resource, which we will name string.xml, and two more for a text editing and a button, which we will name ic_button_background.xml and ic_et_background.xml. Fill the files with the following codes:

string.xml

ic_button_background.xml

ic_et_background.xml

Create Layout

Before we continue to layout, we will be using dots indicator from this GitHub link:

tommybuonomo/dotsindicator

In this tutorial, we will be using the dots indicator below:

Dots Indicator by tommybuonomo on GitHub

Create an xml file named activity_slide.xml, then add the code below into the file:

Look at the code above!

The ViewPager2 on the code, which we use the id of slideVP, will be used later. If you do the steps correctly, it should look like the picture below:

Screenshot activity_slide.xml: Author

Next, please create Fragment for this.

Create Fragment

Create one fragment activity with named FragmentSlide This will be a page that we will display in the activity. Please click New-> Fragment-> Blank Fragment:

Screenshot create new fragment: Author

Then, the fragment layout is fragment_slide.xml, fill it like this:

The layout is only for displaying text, image, and edit text for our fragment.

Screenshot fragment_slide.xml: Author

Then we continue to fill code in FragmentSlide.kt. In this fragment, we can specify which Fragment to display the text or edit text that displayed.

Done with the fragment, then we will create an adapter.

Create Adapter

Here, we create an adapter class to associate the view pager with a fragment. We will be creating a custom adapter that extends from the FragmentPagerAdapter class.

Image by petanikode

In this custom adapter, we can specify which Fragments will be opened on page one to the last page. Now we create a new class called ViewPagerAdapter.kt, then fill it with the following code:

Create Second Activity

Don’t forget to create new activity to show our data name from edit text in fragment and naming it with MainActivity. Please click New-> Activity-> Empty Activity:

Screenshot create new activity: Author

Next, we fill in the layout in activity_main.xml as follows:

This layout used to show image and text from edit text in fragment before.

Screenshot activity_main.xml: Author

We continue to fill code in MainActivity.kt like this :

Add adapter for pager

After creating a custom Adapter, then we can use the adapter in the ViewPager.

Please open SlidePage.kt, then add the following code :

Done!

Now try running the application.

Easy isn’t it …

Conclusion

Finally, here is the repo that you can use and share with others.

reinaldoriant/SlidePage-use-ViewPager2

I hope you enjoyed this article, and it helps you start to create own intro slides.