How to Create an Onboarding Screen in Android?

Hello geeks, today we are going to learn that how we can add Onboarding Screen to our android application in the android studio so that we can provide a better user experience to the user of the application.

What is Onboarding Screen?

The onboarding screen can be understood as a virtual unboxing of an application. Users go through a series of screens which finally directs users to the application interface. Goals or purposes of Onboarding screen:

• Welcomes user and excite them about application ahead.
• Tell the features or functions of the application.
• Allow users to register or log in.
• Collect information about the interests of the user(for example – when we open the Spotify application for the first time it asks the user to select singers which he/she likes).

What we are going to build in this article?

Here is the sample video of the onboarding screen which we are going to create in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a new project

• Open a new project.
• We will be working on Empty Activity with language as Java. Leave all other options unchanged.
• You can change the name of the project at your convenience.
• There will be two default files named activity_main.xml and MainActivity.java.

If you don’t know how to create a new project in Android Studio then you can refer to How to Create/Start a New Project in Android Studio?  

Step 2: Navigate to Build scripts -> build.gradle(module) file and add the following dependency in it

implementation 'com.ramotion.paperonboarding:paper-onboarding:1.1.3'

After adding this dependency click on sync now to save all the changes.

Step 3: Working with the activity_main.xml file

Navigate to the app > res > layout > activity_main.xml and add the below code to that file. Below is the code for the activity_main.xml file. 

XML

<?xml version="1.0" encoding="utf-8"?>
<!-- Here frame layout is used so that different
     fragments of our onboarding screen can be
     changed within the same layout-->
<FrameLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/frame_layout"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">
</FrameLayout>

Step 4: Working with the MainActivity.java file

Go to the MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java

import android.graphics.Color;
import android.os.Bundle;

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentTransaction;

import com.ramotion.paperonboarding.PaperOnboardingFragment;
import com.ramotion.paperonboarding.PaperOnboardingPage;

import java.util.ArrayList;

public class MainActivity extends AppCompatActivity {
    private FragmentManager fragmentManager;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        fragmentManager = getSupportFragmentManager();

        // new instance is created and data is took from an
        // array list known as getDataonborading
        final PaperOnboardingFragment paperOnboardingFragment = PaperOnboardingFragment.newInstance(getDataforOnboarding());
        FragmentTransaction fragmentTransaction = fragmentManager.beginTransaction();

        // fragmentTransaction method is used
        // do all the transactions or changes
        // between different fragments
        fragmentTransaction.add(R.id.frame_layout, paperOnboardingFragment);

        // all the changes are committed
        fragmentTransaction.commit();
    }

    private ArrayList<PaperOnboardingPage> getDataforOnboarding() {

        // the first string is to show the main title ,
        // second is to show the message below the
        // title, then color of background is passed ,
        // then the image to show on the screen is passed
        // and at last icon to navigate from one screen to other
        PaperOnboardingPage source = new PaperOnboardingPage("Gfg", "Welcome to GeeksForGeeks", Color.parseColor("#ffb174"),R.drawable.gfgimg, R.drawable.search);
        PaperOnboardingPage source1 = new PaperOnboardingPage("Practice", "Practice questions from all topics", Color.parseColor("#22eaaa"),R.drawable.practice_gfg, R.drawable.training);
        PaperOnboardingPage source2 = new PaperOnboardingPage("", " ", Color.parseColor("#ee5a5a"),R.drawable.gfg_contribute, R.drawable.contribution);

        // array list is used to store
        // data of onbaording screen
        ArrayList<PaperOnboardingPage> elements = new ArrayList<>();

        // all the sources(data to show on screens)
        // are added to array list
        elements.add(source);
        elements.add(source1);
        elements.add(source2);
        return elements;
    }
}

Congratulations, we have successfully made the Onboarding screen for our application. The final output is shown below.

Output: