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.

android.support.v4.view.ViewPager 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.

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 WizardFragment.java which will extend Fragment. We will pass page number to constructor in order to inflate corresponding layout in onCreateView().

Your MainActivity.java 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 MainActivity.java after incorporating above changes will be as below.

You may also like...

  • Jose Luis Crisostomo Sanchez

    Hello, I have a question, I would like to use your source but when I tried to call an activity and i Failed, so could you explain me how could I do this? Regards

    • AndroidSRC .

      Please share the logs so that we can find the problem.

      • Jose Luis Crisostomo Sanchez

        Thanks for your reply, and I’m a newbie in android development so I cannot understand where I have to put my intent to call the other activity, so Into my log file just say “could’nt to find inicio() ‘ and Inicio() is my class to catch when the user push the “let’s go button”

        page 4 .xml

        • AndroidSRC .

          just put this function in Activity sub class in which you have inflated that layout. It will go like this.
          public void inicio(View v){
          //perform action here
          }

  • tushar

    my WIZARD_PAGES_COUNT page goes in both case 1 and 2 at same time please help

  • tushar

    03-04 17:47:01.925 13285-13285/com.example.aam.firstscreen D/abhi: wizard_page_position in method fragment::0

    03-04 17:47:01.935 13285-13285/com.example.aam.firstscreen D/abhi: wizard_page_position in method fragment::1