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
Android Onboarding screen example using ViewPager
Source Code
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.
If you still have any queries, please post them in the comments section below, I will be happy to help you.
1 Comment
Thank you