Android Application Post Installation Wizard Using ViewPager

In many applications we download from Google Play Store, they show user wizard sort of walkthrough or asking user to accept license and signup etc for the first time after installation. User is shown current page on screen with strip of circled at bottom highlighted for current page. We will create an Android Application Post Installation Wizard Using ViewPager and add functionality of page indicator using circle strip at the bottom. allows the user to flip left and right through pages of data. We need to set adapter for views to be shown as pages. We will use FragmentPagerAdapter for our ViewPager which will have Fragment as its data item. As soon as Page of ViewPager is changed, we will update page indicator.

Sample Android Application with ViewPagerIndicator

In this tutorial, I have not covered sign in with Facebook and Google+. If interested, you would like to check our posts for social login integration.

Facebook login in Android apps – Using latest SDK

Integrating Google Plus Sign In into your Android Application

1. Create a new Android Application Project with com.androidsrc.viewpagerindicator as package name.

2. Preparing Application Manifest File

I have set theme as no title bar and fullscreen for Wizard. If you don’t want title war to appear, set android:theme attribute for your wizard activity as @android:style/Theme.NoTitleBar.Fullscreen.

3. Create shape drawable for background of Page Indicator

Create a new file /res/drawble/indicator_bg.xml. Define shape as oval with solid white color.

Also Read: Fastest Android Launchers

4. Preparing Layout Files

Our main activity layout will have FrameLayout as parent view so that we can show Page Indicators on top of ViewPager. In my sample, I have used four pages in ViewPager. For this I have used four different View’s wrapped in LinearLayout with horizontal orientation as parent.

/res/layout/activity_main.xml will be as below after including these views.

Layout for Page 1 incorporates ImageView and TextView. Create file /res/layout/page1.xml.

Similarly create layout files for other three pages as per your design requirements. I have named them as page2.xml, page3.xml and page4.xml. If you want to keep same, you can get source for these layouts by downloading complete application source code above.

5. Preparing Source Files

Create a new class which will extend Fragment. We will pass page number to constructor in order to inflate corresponding layout in onCreateView().

Your should extend FragmentActivity in order to use getSupportFragmentManager() from Support Library. Define a local class ViewPageAdapter which extends FragmentPagerAdapter. It will return new instance of WizardFragment for that item position.

Define a local class WizardPageChangeListener which will implement OnPageChangeListener. From onPageSelected, we will update page indicators.

override onBackPressed() to handle back key events for navigating back to previous pages in ViewPager.

For updating Page Indicator Views, update on change of page. Set current page indicator width and height relatively larger than other views.

Final complete code for after incorporating above changes will be as below.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *