Onboarding screen in Android Application

An onboarding screen is like a walkthrough to introduce what an app does to a user and how to use it. An onboarding screen needs to be designed in the most simple, welcoming, and user-friendly way possible.

The onboarding screen is important as it helps the user understand why they are using the application and how it will benefit them. This will increase user engagement with the application. Furthermore, it also increases the user experience with the application.

We will be building a basic onboarding screen in this tutorial, as shown below.

There are many libraries that help implement the onboarding screen. In this tutorial, we will be implementing a basic onboarding screen (consisting of 3 intro screens) using ViewPager and SharedPreferences.

First of all, we design the onboarding screen.

Add the colors in colors.xml as shown below. One may add more screens, but we are considering only three intro screens here.

Let's assume that the launcher activity is WelcomeActivity, which is shown only on the first-time launch, and the second activity is MainActivity.

The app flow is : WelcomeActivity -> MainActivity

First, we design activity_welcome.xml.

activity_welcome.xml consists of a Button for the next screen, another Button to skip the onboarding screen, a dots layout - to keep track of which screen the user is on, and a ViewPager to hold the screens, as shown below.

Create a new layout resource file for every intro screen. Let the intro screens be - screen1.xml, screen2.xml, and screen3.xml. Each screen consists of an ImageView (which may be replaced by a VideoView or some view for animation, etc.), a TextView for the title, and another TextView for the description. All the screens have a similar code as shown below, with different ids for attributes.

Copy the image files to the drawable folder and use them accordingly in sceenx.xml, where x = 1,2,3...

Declare the strings used in the strings.xml as shown below.

Now, create a dimens.xml file to declare all the margins.

One may change the screen layouts/designs as per the application/ user need.

Now, the design of the onboarding screen is complete. Let us move to the backend.

First, we implement a way to check if it is a first-time launch of the application, as the onboarding screen should be displayed only on the first-time launch.

SharedPreferences are used to check the first-time launch of the application.

We create a Preferences class, as shown below.

Inside the WelcomeActivity.java, we will check for the first-time app launch using isFirstTimeLaunch() method. MainActivity will be launched if it returns true, skipping the intro activity. In the launchHomeScreen() method, we set IS_FIRST_TIME_LAUNCH to false, so that when the app is launched again, prefManager.isFirstTimeLaunch() method would return false, and hence the user is directed to MainActivity, skipping the intro activity.

We will make the notification bar transparent as shown below. The changeStatusBarColor() method will be called in the onCreate() method in WelcomeActivity.java.

Now create a MyViewPagerAdapter class that the ViewPager can use to display the onboarding screens. getCount() method returns the number of onboarding screens.

Declare everything (all the attributes and elements) inside the WelcomeActivity.

The layouts array contains the layouts of all welcome sliders/screens - screen1xml, screen2.xml, and screen3.xml.

Add onClickListener to btnSkip and btnNext as shown below. btnSkip directly skips the intro screen and launches the MainActivity. btnNext checks if it's the last page and then launches the MainActivity; else, it just moves to the next page.

getItem() method returns the index of the next ith page from the current page.

addBottomDots() method sets the bottom dots - active and inactive depending upon the current page. Intially call addBottomDots(0); inside onCreate() method in WelcomeActivity.java.

Initialize myViewPagerAdapter and add onPageChangeListener as shown below.

Now, run the app. In this way, we can easily create a simple Onboarding screen using ViewPager and SharedPreferences.

The complete code can be found here.