Android Onboarding screen example using ViewPager

Almost each and every application has an onboarding screen. It gives an overview of the application. Android applications can have a lot of functionalities. The end-user might not able to understand these features. Using the onboarding screen we can explain these features when the end-user starts the application for the first time. Always consider using the onboarding screen for your application. In this article, you will learn to create a Material android onboarding screen example using ViewPager.

Demo

Watch this video on YouTube

Source Code

SOURCE CODE

APK

Android Onboarding screen example

Below are the dependencies used in this project.

dependencies {
    implementation 'androidx.appcompat:appcompat:1.2.0'
    implementation 'androidx.legacy:legacy-support-v4:1.0.0'
    implementation 'com.google.android.material:material:1.2.0'
}

We are using the ViewPager widget to create an onboarding screen. Place ViewPager inside the activity layout. create or open an existing android studio project. Now create a new activity MainActivity.java. Add the below lines into it.

import androidx.appcompat.app.AppCompatActivity;
import androidx.fragment.app.Fragment;
import androidx.fragment.app.FragmentManager;
import androidx.fragment.app.FragmentPagerAdapter;
import androidx.viewpager.widget.ViewPager;
import android.os.Bundle;
import com.google.android.material.tabs.TabLayout;
import java.util.ArrayList;
import java.util.List;

public class MainActivity extends AppCompatActivity {

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

        // Initialize ViewPager view
        ViewPager viewPager = findViewById(R.id.viewPagerOnBoarding);
        // create ViewPager adapter
        ViewPagerAdapter viewPagerAdapter = new ViewPagerAdapter(getSupportFragmentManager());

        // Add All Fragments to ViewPager
        viewPagerAdapter.addFragment(new StepOneFragment());
        viewPagerAdapter.addFragment(new StepTwoFragment());
        viewPagerAdapter.addFragment(new StepThreeFragment());
        viewPagerAdapter.addFragment(new StepFourFragment());

        // Set Adapter for ViewPager
        viewPager.setAdapter(viewPagerAdapter);

        // Setup dot's indicator
        TabLayout tabLayout = findViewById(R.id.tabLayoutIndicator);
        tabLayout.setupWithViewPager(viewPager);
    }

    // ViewPager Adapter class
    class ViewPagerAdapter extends FragmentPagerAdapter {

        private final List<Fragment> mList = new ArrayList<>();

        public ViewPagerAdapter(FragmentManager supportFragmentManager) {
            super(supportFragmentManager, BEHAVIOR_RESUME_ONLY_CURRENT_FRAGMENT);
        }
        @Override
        public Fragment getItem(int i) {
            return mList.get(i);
        }
        @Override
        public int getCount() {
            return mList.size();
        }
        public void addFragment(Fragment fragment) {
            mList.add(fragment);
        }
    }
}

Create layout activity_main.xml. Add ViewPager and TabLayout in that as shown below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/viewPagerOnBoarding"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <com.google.android.material.tabs.TabLayout
        android:id="@+id/tabLayoutIndicator"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="56dp"
        app:tabGravity="center"
        app:tabIndicatorHeight="0dp"
        app:tabBackground="@drawable/tab_selector" />

</RelativeLayout>

Now we will create an indicator as shown in the below image. This indicator will indicate which step is active on the screen. Here in the image pink dot indicates the first step is active. The Gray dot indicates an inactive step.

To achieve this we will change the default display style of TabLayout. First, we will create a layout of the Pink dot. Create a new XML drawable in res->drawable->selected_dot.xml. Paste the below code into it.

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@color/colorAccent"/>
        </shape>
    </item>
</layer-list>

res->drawable->default_dot.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item>
        <shape
            android:innerRadius="0dp"
            android:shape="ring"
            android:thickness="8dp"
            android:useLevel="false">
            <solid android:color="@android:color/darker_gray"/>
        </shape>
    </item>
</layer-list>

Now we will create a selector. This selector will decide which dot to show. We are handling two states selected and default as shown in the below code. Create new XML drawable res->drawable->tab_selector.xml. Add the below code to it.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">

    <!--State Selected show pink dot-->
    <item android:drawable="@drawable/selected_dot" android:state_selected="true" />
    <!--Default State show gray dot-->
    <item android:drawable="@drawable/default_dot" />
</selector>

we will create four onboarding steps In this example, We will show the end-user one SVG image and some text. Both image and the text will explain one feature of the application. Download these four images from this link. Add these files under the res->drawable folder.

Create four fragments. Each fragment will contain information that you want to tell the end-user. StepOneFragment.java.

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class StepOneFragment extends Fragment {
    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_step_one, container, false);
    }
}

fragment_step_one.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="320dp"
        android:layout_height="320dp"
        android:layout_gravity="center"
        android:layout_margin="16dp"
        android:src="@drawable/ic_phone" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Welcome"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textStyle="bold"
        app:fontFamily="@font/montserrat" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Onboarding screen example"
        android:textAppearance="@style/TextAppearance.AppCompat.Small"
        android:textStyle="bold"
        app:fontFamily="@font/montserrat" />

</LinearLayout>

StepTwoFragment.java

import android.os.Bundle;
import androidx.fragment.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
public class StepTwoFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_step_two, container, false);
    }
}

fragment_step_two.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_margin="16dp"
        android:layout_width="320dp"
        android:layout_height="320dp"
        android:layout_gravity="center"
        android:src="@drawable/ic_workplace" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Customizable"
        app:fontFamily="@font/montserrat"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textStyle="bold" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Easy to customize"
        android:textAppearance="@style/TextAppearance.AppCompat.Small"
        android:textStyle="bold"
        app:fontFamily="@font/montserrat" />

</LinearLayout>

StepThreeFragment.java

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class StepThreeFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_step_three, container, false);
    }
}

fragment_step_three.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_margin="16dp"
        android:layout_width="320dp"
        android:layout_height="320dp"
        android:layout_gravity="center"
        android:src="@drawable/ic_coding" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Optimized code"
        app:fontFamily="@font/montserrat"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textStyle="bold" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Template with clean and optimized code"
        android:textAppearance="@style/TextAppearance.AppCompat.Small"
        android:textStyle="bold"
        app:fontFamily="@font/montserrat" />

</LinearLayout>

StepFourFragment.java.

import android.os.Bundle;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import androidx.fragment.app.Fragment;
public class StepFourFragment extends Fragment {

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container,
                             Bundle savedInstanceState) {
        // Inflate the layout for this fragment
        return inflater.inflate(R.layout.fragment_step_four, container, false);
    }

}

fragment_step_four.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="320dp"
        android:layout_height="320dp"
        android:layout_gravity="center"
        android:layout_margin="16dp"
        android:src="@drawable/ic_web_page" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Clen UI"
        android:textAppearance="@style/TextAppearance.AppCompat.Large"
        android:textStyle="bold"
        app:fontFamily="@font/montserrat" />

    <TextView
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:gravity="center"
        android:text="Clean material user interface"
        android:textAppearance="@style/TextAppearance.AppCompat.Small"
        android:textStyle="bold"
        app:fontFamily="@font/montserrat" />

</LinearLayout>

Finally run the application and you will see professional looking material onboarding screen.