How to build a Intro Slider with ViewPager

A lot of apps have a landing screen with images and logos where you can slide through various screens. There are various third party libraries in the open source world that makes this easy, but none of them are highly customizable. In this post, I’ll go over how to build one of these slideshows from scratch.

Just so that we’re on the same page, an example library that lets you easily build an Intro Slider is https://github.com/apl-devs/AppIntro. In one of the apps I’m working on, I had to build out something similar, but with two static buttons in the bottom of the page that the user can interact with. Needless to say, none of the libraries I could find was able to accommodate this. So, I had to build my own.

What we will be building

The repository for the code is here

https://github.com/chrisjeon/IntroSliderDemo

And here’s the video of the intro slider that we’ll be building

1 – Define the slider position dots and various colors

Open your colors.xml and define two colors for our slider dots, one for an inactive state and one for an active state. Also, go ahead and define a color for the white color and colors for the three background images that we’ll have. These colors will come into play later.

You can change those color definitions to however you want them.

2 – Remove the Toolbar and then hide the notification bar in MainActivity

We want to remove the Toolbar that comes with the standard MainActivity and then hide the notification bar to give more prominence to our intro slider.

For removing the Toolbar, we need to add two style definitions to our AppTheme. So open up styles.xml and then add these two lines into your main app theme.

Adding those two lines with the windowActionBar and windowNoTitle will set an application wide theme where the Toolbar (or ActionBar for those of you who want to proper naming) will be hidden by default.

Now, we want to hide the notification bar. This has to be done in code and isn’t available in all versions of Android. Open up your MainActivity file (or whatever activity you are displaying your intro sliders) and add this code.

Make sure you add those two lines before you call setContentView. We want it to take effect before we set the view of the activity. What this will do is hide the notification bar if the feature is available on the device running the app (SDK version of the device is higher than 21).

3 – Creating the slides

We want to create the 3 slides that the user will be able to swipe through (you can create more if the app you’re building requires more slides). Under your res/layouts folder, create three layout files named landing_slide_1.xml, landing_slide_2.xml, and landing_slide_3.xml respectively.

landing_slide_1.xml
landing_slide_2.xml
landing_slide_3.xml
All of the slides are practically the same with the exception of the texts and the background colors that we’re displaying. This is to distinguish the slides from each other so that you will be able to see that different slides are displaying as you are swiping through the ViewPager that we’ll be building. You can also replace the texts with ImageViews and other components as you see fit.

4 – Build the MainActivity XML layout

We want the above landing slide layout files to display in our activity_main layout file. We also want them to be displayed inside a ViewPager. Finally, we want to have two static buttons at the bottom that stay in place as the user swipes through. Open up your activity_main.xml file and copy/paste this in.

We three main components in our activity_main.xml file: ViewPager, two Buttons, and the LinearLayout that will be holding the dots.

We’re finally finished with our layout files. We’re now ready to hook everything up in our MainActivity.

5 – Wire up the Intro Slider in MainActivity

Open up your MainActivity and add additional code to reflect what’s below.

I’ll go over the important parts of this code step by step.

First important parts are the mLayouts array containing various layout ids and the addBottomDots method. The mLayouts integer array holds all of the layout files that you’ll be displaying in your intro app slider. In our case, we have three: landing_slide_1, landing_slide_2, and landing_slide_3. We then have our addBottomDots method that will programmatically add the slider dots to our layout file. These dots will help indicate to the user exactly which slide he/she is in.

When we are defining these in our onCreate method, we want to pass in “0” into our addBottomDots method so that when the user first opens the app, the first dot will be highlighted. In our addBottomDots method, you can see at the bottom of the method that we retrieve the current dot with the currentPage integer passed in to set the text color of that dot to R.color.dot_slider_active that we defined in our color definitions at the beginning of this tutorial.

The next (and last) important parts of our MainActivity is the ViewPagerAdapter and the ViewPager ChangeListener. Let’s go over the ViewPager ChangeListener first.

The sole reason for us to even have this OnPageChangeListener is to call the addBottomDots method with our current position so that the correct dot is highlighted as the user swipes through the various slides. As you can see, we call our addBottomDots method in the overridden onPageSelected method, passing in the current position of the ViewPager page. This will dynamically activate the correct dot and inactivate the rest of the dots with appropriate colors as the user swipes through the various landing screens.

Second piece of code that we need to write is our ViewPagerAdapter. We define it as SliderViewPagerAdapter in our sample app and it extends itself from the PagerAdapter class. This part of the code is pretty simple. The adapter determines which view to inflate using the mLayouts array we defined above (the one that contains the various layout ids).

After all this, we finish setting up our MainActivity by setting an instance of our SliderViewPagerAdapter to our ViewPager and then setting our viewPagerPageChangeListener as our ViewPager’s OnPageChangeListener.

And that’s it! Enjoy your new slider intro 🙂

About the Author Chris Jeon

Software developer currently focusing on Android development.