Walkthrough/OnBoarding/First-Time users screen in android studio using ViewPager and ViewPager 2

In this tutorial, we will learn how to create walkthrough screens/onboarding screens in android studio using viewpager and viewpager 2. This screen is also called one time screen of an android app. One time screen because it only displays only for one-time, after that it won’t show until the application is reinstalled.

What is the Walkthrough/Onboarding Screen?

Walkthrough and onBoarding screens are screens for first-time users of the android app.

Now the question is who are the first-time users of the application?

First-time users are those users who download and install the application and use it for the first time.

It may be called a startup guide of an app. Instate of Splash Screen which we have created earlier, we have to create the onboarding screens of our android spp.

So, open your android studio, and let’s get started

Here I create four different onboarding screens just to show you how to use the viewpager and viewpager 2 in the case of creating the onboarding screens.

Add dependency

dependencies {
implementation ‘com.google.android.material:material:1.3.0’
//viewpager 2
implementation “androidx.viewpager2:viewpager2:1.0.0”
}

Example 1. First onboarding screen

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout
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=”.onboadingOne.OnBoardingDesignOne”
android:background=”@color/white”>

<com.google.android.material.button.MaterialButton
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/buttonOnBoardingAction”
android:layout_marginEnd=”20dp”
android:layout_marginBottom=”15dp”
android:textSize=”14sp”
app:cornerRadius=”20dp”
android:fontFamily=”@font/product_sans_bold”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”/>

<androidx.viewpager2.widget.ViewPager2
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/onboardingViewPager” />

<LinearLayout
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:id=”@+id/layoutOnboardingIndicators”
android:layout_marginStart=”20dp”
android:layout_marginEnd=”20dp”
android:orientation=”horizontal”
android:padding=”15dp”
app:layout_constraintBottom_toBottomOf=”@id/buttonOnBoardingAction”
app:layout_constraintEnd_toStartOf=”@id/buttonOnBoardingAction”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”@id/buttonOnBoardingAction”/>

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version=”1.0" encoding=”utf-8"?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_marginStart=”30dp”
android:layout_marginEnd=”30dp”
android:layout_marginBottom=”50dp”
android:gravity=”center”
android:orientation=”vertical”
android:padding=”20dp”>

<ImageView
android:layout_width=”260dp”
android:layout_height=”260dp”
android:id=”@+id/imageOnboarding”
android:adjustViewBounds=”true”
android:layout_margin=”15dp”
android:contentDescription=”@string/app_name” />

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/textTitle”
android:gravity=”center”
android:textColor=”@color/black”
android:textAllCaps=”true”
android:fontFamily=”@font/product_sans_bold”
android:textSize=”20sp”
android:textStyle=”bold”/>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/textDescription”
android:gravity=”center”
android:fontFamily=”@font/product_sans_regular”
android:layout_marginTop=”10dp”
android:textColor=”@color/textSecondary”
android:textSize=”17sp”/>

</LinearLayout>

package com.codewithgolap.imageslider.onboadingOne;

public class OnBoardingItem {
private int image;
private String title;
private String description;

public int getImage() {
return image;
}

public void setImage(int image) {
this.image = image;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

public String getDescription() {
return description;
}

public void setDescription(String description) {
this.description = description;
}
}

package com.codewithgolap.imageslider.onboadingOne;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.codewithgolap.imageslider.R;

import java.util.List;

public class OnboardingAdapter extends RecyclerView.Adapter<OnboardingAdapter.OnboardingViewHolder>{

private List<OnBoardingItem> onBoardingItems;

public OnboardingAdapter(List<OnBoardingItem> onBoardingItems) {
this.onBoardingItems = onBoardingItems;
}

@NonNull
@Override
public OnboardingViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return new OnboardingViewHolder(
LayoutInflater.from(parent.getContext()).inflate(
R.layout.item_container_boarding_one, parent, false
)
);
}

@Override
public void onBindViewHolder(@NonNull OnboardingViewHolder holder, int position) {
holder.setOnBoardingData(onBoardingItems.get(position));
}

@Override
public int getItemCount() {
return onBoardingItems.size();
}

class OnboardingViewHolder extends RecyclerView.ViewHolder {

private TextView textTitle;
private TextView textDescription;
private ImageView imageOnboarding;

OnboardingViewHolder(@NonNull View itemView) {
super(itemView);
textTitle = itemView.findViewById(R.id.textTitle);
textDescription = itemView.findViewById(R.id.textDescription);
imageOnboarding = itemView.findViewById(R.id.imageOnboarding);

}

void setOnBoardingData(OnBoardingItem onBoardingItem){
textTitle.setText(onBoardingItem.getTitle());
textDescription.setText(onBoardingItem.getDescription());
imageOnboarding.setImageResource(onBoardingItem.getImage());
}
}
}

package com.codewithgolap.imageslider.onboadingOne;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import androidx.viewpager2.widget.ViewPager2;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.codewithgolap.imageslider.HomeActivity;
import com.codewithgolap.imageslider.R;
import com.google.android.material.button.MaterialButton;

import java.util.ArrayList;
import java.util.List;

public class OnBoardingDesignOne extends AppCompatActivity {

private OnboardingAdapter onboardingAdapter;
private LinearLayout layoutOnboardingIndicator;
private MaterialButton buttonOnboardingAction;

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

layoutOnboardingIndicator = findViewById(R.id.layoutOnboardingIndicators);
buttonOnboardingAction = findViewById(R.id.buttonOnBoardingAction);

setOnboardingItem();

ViewPager2 onboardingViewPager = findViewById(R.id.onboardingViewPager);
onboardingViewPager.setAdapter(onboardingAdapter);

setOnboadingIndicator();
setCurrentOnboardingIndicators(0);

onboardingViewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
setCurrentOnboardingIndicators(position);
}
});

buttonOnboardingAction.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (onboardingViewPager.getCurrentItem() + 1 < onboardingAdapter.getItemCount()) {
onboardingViewPager.setCurrentItem(onboardingViewPager.getCurrentItem() + 1);
} else {
startActivity(new Intent(getApplicationContext(), HomeActivity.class));
finish();
}
}
});
}

private void setOnboadingIndicator() {
ImageView[] indicators = new ImageView[onboardingAdapter.getItemCount()];
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT
);
layoutParams.setMargins(8, 0, 8, 0);
for (int i = 0; i < indicators.length; i++) {
indicators[i] = new ImageView(getApplicationContext());
indicators[i].setImageDrawable(ContextCompat.getDrawable(
getApplicationContext(), R.drawable.onboarding_indicator_inactive
));
indicators[i].setLayoutParams(layoutParams);
layoutOnboardingIndicator.addView(indicators[i]);
}
}

@SuppressLint(“SetTextI18n”)
private void setCurrentOnboardingIndicators(int index) {
int childCount = layoutOnboardingIndicator.getChildCount();
for (int i = 0; i < childCount; i++) {
ImageView imageView = (ImageView) layoutOnboardingIndicator.getChildAt(i);
if (i == index) {
imageView.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.onboarding_indicator_active));
} else {
imageView.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.onboarding_indicator_inactive));
}
}
if (index == onboardingAdapter.getItemCount() — 1){
buttonOnboardingAction.setText(“Start”);
}else {
buttonOnboardingAction.setText(“Next”);
}
}

private void setOnboardingItem() {
List<OnBoardingItem> onBoardingItems = new ArrayList<>();

OnBoardingItem itemFastFood = new OnBoardingItem();
itemFastFood.setTitle(“Fast Delivery to your home”);
itemFastFood.setDescription(“Our delivery partner is on the way to your home!”);
itemFastFood.setImage(R.drawable.on_the_way);

OnBoardingItem itemPayOnline = new OnBoardingItem();
itemPayOnline.setTitle(“E-Pay your bill online”);
itemPayOnline.setDescription(“Electric bill payment is a feature of online, mobile and net banking!”);
itemPayOnline.setImage(R.drawable.pay_online);

OnBoardingItem itemEatTogether = new OnBoardingItem();
itemEatTogether.setTitle(“Eat together”);
itemEatTogether.setDescription(“Enjoy your meal and have a great day. Don’t forget to rate us!”);
itemEatTogether.setImage(R.drawable.eat_together);

onBoardingItems.add(itemFastFood);
onBoardingItems.add(itemPayOnline);
onBoardingItems.add(itemEatTogether);

onboardingAdapter = new OnboardingAdapter(onBoardingItems);

}

}

The output of the first onboarding screen:

Example 2: Second onboarding screen

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=”.onboardingSecond.OnBoardingTwoActivity”
android:background=”@color/white”>

<com.google.android.material.button.MaterialButton
android:id=”@+id/buttonOnBoardingAction”
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginBottom=”20dp”
android:fontFamily=”@font/ubuntu_medium”
android:textSize=”14sp”
app:cornerRadius=”20dp”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent” />

<androidx.viewpager2.widget.ViewPager2
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/onboardingViewPager” />

<LinearLayout
android:id=”@+id/layoutOnboardingIndicators”
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:layout_marginBottom=”20dp”
android:orientation=”horizontal”
android:padding=”15dp”
android:gravity=”center”
app:layout_constraintBottom_toTopOf=”@+id/buttonOnBoardingAction”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent” />

</androidx.constraintlayout.widget.ConstraintLayout>

<?xml version=”1.0" encoding=”utf-8"?>
<LinearLayout xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:layout_marginBottom=”60dp”
android:gravity=”center_horizontal”
android:orientation=”vertical”>

<ImageView
android:layout_width=”300dp”
android:layout_height=”350dp”
android:id=”@+id/imageOnboarding”
android:adjustViewBounds=”true”
android:layout_marginTop=”15dp”
android:contentDescription=”@string/app_name” />

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/textTitle”
android:gravity=”center”
android:textColor=”@color/black”
android:textAllCaps=”true”
android:layout_marginTop=”20dp”
android:fontFamily=”@font/ubuntu_bold”
android:textSize=”20sp”
android:textStyle=”bold”/>

<TextView
android:layout_width=”match_parent”
android:layout_height=”wrap_content”
android:id=”@+id/textDescription”
android:gravity=”center”
android:fontFamily=”@font/ubuntu_regular”
android:layout_marginTop=”10dp”
android:textColor=”@color/textSecondary”
android:textSize=”17sp”/>

</LinearLayout>

package com.codewithgolap.imageslider.onboadingOne;

public class OnBoardingItem {
private int image;
private String title;
private String description;

public int getImage() {
return image;
}

public void setImage(int image) {
this.image = image;
}

public String getTitle() {
return title;
}

public void setTitle(String title) {
this.title = title;
}

public String getDescription() {
return description;
}

public void setDescription(String description) {
this.description = description;
}
}

package com.codewithgolap.imageslider.onboadingOne;

import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.recyclerview.widget.RecyclerView;

import com.codewithgolap.imageslider.R;

import java.util.List;

public class OnboardingAdapter extends RecyclerView.Adapter<OnboardingAdapter.OnboardingViewHolder>{

private List<OnBoardingItem> onBoardingItems;

public OnboardingAdapter(List<OnBoardingItem> onBoardingItems) {
this.onBoardingItems = onBoardingItems;
}

@NonNull
@Override
public OnboardingViewHolder onCreateViewHolder(@NonNull ViewGroup parent, int viewType) {
return new OnboardingViewHolder(
LayoutInflater.from(parent.getContext()).inflate(
R.layout.item_container_boarding_two, parent, false
)
);
}

@Override
public void onBindViewHolder(@NonNull OnboardingViewHolder holder, int position) {
holder.setOnBoardingData(onBoardingItems.get(position));
}

@Override
public int getItemCount() {
return onBoardingItems.size();
}

class OnboardingViewHolder extends RecyclerView.ViewHolder {

private TextView textTitle;
private TextView textDescription;
private ImageView imageOnboarding;

OnboardingViewHolder(@NonNull View itemView) {
super(itemView);
textTitle = itemView.findViewById(R.id.textTitle);
textDescription = itemView.findViewById(R.id.textDescription);
imageOnboarding = itemView.findViewById(R.id.imageOnboarding);

}

void setOnBoardingData(OnBoardingItem onBoardingItem){
textTitle.setText(onBoardingItem.getTitle());
textDescription.setText(onBoardingItem.getDescription());
imageOnboarding.setImageResource(onBoardingItem.getImage());
}
}
}

package com.codewithgolap.imageslider.onboardingSecond;

import androidx.appcompat.app.AppCompatActivity;
import androidx.core.content.ContextCompat;
import androidx.viewpager2.widget.ViewPager2;

import android.annotation.SuppressLint;
import android.content.Intent;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;

import com.codewithgolap.imageslider.HomeActivity;
import com.codewithgolap.imageslider.R;
import com.codewithgolap.imageslider.onboadingOne.OnBoardingItem;
import com.codewithgolap.imageslider.onboadingOne.OnboardingAdapter;
import com.google.android.material.button.MaterialButton;

import java.util.ArrayList;
import java.util.List;

public class OnBoardingTwoActivity extends AppCompatActivity {

private OnboardingAdapter onboardingAdapter;
private LinearLayout layoutOnboardingIndicator;
private MaterialButton buttonOnboardingAction;

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

layoutOnboardingIndicator = findViewById(R.id.layoutOnboardingIndicators);
buttonOnboardingAction = findViewById(R.id.buttonOnBoardingAction);

setOnboardingItem();

ViewPager2 onboardingViewPager = findViewById(R.id.onboardingViewPager);
onboardingViewPager.setAdapter(onboardingAdapter);

setOnboadingIndicator();
setCurrentOnboardingIndicators(0);

onboardingViewPager.registerOnPageChangeCallback(new ViewPager2.OnPageChangeCallback() {
@Override
public void onPageSelected(int position) {
super.onPageSelected(position);
setCurrentOnboardingIndicators(position);
}
});

buttonOnboardingAction.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View view) {
if (onboardingViewPager.getCurrentItem() + 1 < onboardingAdapter.getItemCount()) {
onboardingViewPager.setCurrentItem(onboardingViewPager.getCurrentItem() + 1);
} else {
startActivity(new Intent(getApplicationContext(), HomeActivity.class));
finish();
}
}
});

}

private void setOnboadingIndicator() {
ImageView[] indicators = new ImageView[onboardingAdapter.getItemCount()];
LinearLayout.LayoutParams layoutParams = new LinearLayout.LayoutParams(
ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT
);
layoutParams.setMargins(8, 0, 8, 0);
for (int i = 0; i < indicators.length; i++) {
indicators[i] = new ImageView(getApplicationContext());
indicators[i].setImageDrawable(ContextCompat.getDrawable(
getApplicationContext(), R.drawable.onboarding_indicator_inactive
));
indicators[i].setLayoutParams(layoutParams);
layoutOnboardingIndicator.addView(indicators[i]);
}
}

@SuppressLint(“SetTextI18n”)
private void setCurrentOnboardingIndicators(int index) {
int childCount = layoutOnboardingIndicator.getChildCount();
for (int i = 0; i < childCount; i++) {
ImageView imageView = (ImageView) layoutOnboardingIndicator.getChildAt(i);
if (i == index) {
imageView.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.onboarding_indicator_active_two));
} else {
imageView.setImageDrawable(ContextCompat.getDrawable(getApplicationContext(), R.drawable.onboarding_indicator_inactive_two));
}
}
if (index == onboardingAdapter.getItemCount() — 1){
buttonOnboardingAction.setText(“Get Started”);
}else {
buttonOnboardingAction.setText(“Next”);
}
}

private void setOnboardingItem() {
List<OnBoardingItem> onBoardingItems = new ArrayList<>();

OnBoardingItem itemFastFood = new OnBoardingItem();
itemFastFood.setTitle(“Choose your meal”);
itemFastFood.setDescription(“You can easily choose your meal and take it!”);
itemFastFood.setImage(R.drawable.choose_your_meal);

OnBoardingItem itemPayOnline = new OnBoardingItem();
itemPayOnline.setTitle(“Choose your payment”);
itemPayOnline.setDescription(“You can pay us using any methods, online or offline!”);
itemPayOnline.setImage(R.drawable.choose_your_payment);

OnBoardingItem itemEatTogether = new OnBoardingItem();
itemEatTogether.setTitle(“Fast delivery”);
itemEatTogether.setDescription(“Our delivery partners are too fast, they will not disappoint you!”);
itemEatTogether.setImage(R.drawable.fast_delivery);

OnBoardingItem itemDayAndNight = new OnBoardingItem();
itemDayAndNight.setTitle(“Day and Night”);
itemDayAndNight.setDescription(“Our service is on day and night!”);
itemDayAndNight.setImage(R.drawable.day_and_night);

onBoardingItems.add(itemFastFood);
onBoardingItems.add(itemPayOnline);
onBoardingItems.add(itemEatTogether);
onBoardingItems.add(itemDayAndNight);

onboardingAdapter = new OnboardingAdapter(onBoardingItems);

}
}

Output for the second onboarding screen:

Example 3: Third onboarding screen

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout 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=”.onboardingThird.OnBoardingActivityThree”>

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

</androidx.constraintlayout.widget.ConstraintLayout>

Onboarding layout 1

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
xmlns:tools=”http://schemas.android.com/tools"
xmlns:app=”http://schemas.android.com/apk/res-auto"
tools:context=”.onboardingThird.OnBoardingActivityThree”>

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline3"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.1" />

<ImageView
android:id=”@+id/imageView4"
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:contentDescription=”@string/app_name”
android:scaleType=”centerCrop”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintHorizontal_bias=”0.5"
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”@+id/guideline6"
app:srcCompat=”@drawable/onboarding_activity_ic_waves_1" />

<ImageView
android:id=”@+id/imageView3"
android:layout_width=”0dp”
android:layout_height=”0dp”
android:contentDescription=”Picture of person giving test”
app:layout_constraintBottom_toTopOf=”@+id/guideline7"
app:layout_constraintEnd_toEndOf=”@+id/guideline5"
app:layout_constraintEnd_toStartOf=”@+id/guideline5"
app:layout_constraintHorizontal_bias=”1.0"
app:layout_constraintStart_toStartOf=”@+id/guideline3"
app:layout_constraintTop_toTopOf=”@+id/guideline12"
app:layout_constraintVertical_bias=”1.0"
app:srcCompat=”@drawable/onboarding_activity_ic_image_1" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline4"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.50121653" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline5"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.9026764" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline6"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.15" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline7"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.6" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline8"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.85" />

<Button
android:id=”@+id/button2"
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginTop=”8dp”
android:layout_marginEnd=”8dp”
android:layout_marginBottom=”8dp”
android:background=”@drawable/onboarding_activity_button_1"
android:fontFamily=”@font/product_sans_bold”
android:onClick=”nextPage”
android:text=”Next”
android:textColor=”@android:color/white”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toStartOf=”@+id/guideline14"
app:layout_constraintStart_toStartOf=”@+id/guideline13"
app:layout_constraintTop_toTopOf=”@+id/guideline8" />

<TextView
android:id=”@+id/textView7"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginTop=”45dp”
android:layout_marginEnd=”8dp”
android:fontFamily=”@font/product_sans_bold”
android:text=”@string/demo_title”
android:textColor=”#FFFFFF”
android:textSize=”32sp”
app:layout_constraintEnd_toStartOf=”@+id/guideline5"
app:layout_constraintStart_toStartOf=”@+id/guideline3"
app:layout_constraintTop_toTopOf=”@+id/guideline7"
tools:text=”@string/demo_title” />

<TextView
android:id=”@+id/textView8"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginEnd=”8dp”
android:layout_marginBottom=”8dp”
android:fontFamily=”@font/product_sans_regular”
android:text=”@string/demo_content”
android:textAlignment=”center”
android:textColor=”#FFFFFF”
android:textSize=”16sp”
app:layout_constraintBottom_toTopOf=”@+id/guideline8"
app:layout_constraintEnd_toStartOf=”@+id/guideline5"
app:layout_constraintStart_toStartOf=”@+id/guideline3"
app:layout_constraintTop_toBottomOf=”@+id/textView7"
tools:text=”@string/demo_content” />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline12"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.05" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline13"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.3" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline14"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.7" />

</androidx.constraintlayout.widget.ConstraintLayout>

Onboarding layout 2

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
xmlns:tools=”http://schemas.android.com/tools"
xmlns:app=”http://schemas.android.com/apk/res-auto"
tools:context=”.onboardingThird.OnBoardingActivityThree”>

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline3"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.1" />

<ImageView
android:id=”@+id/imageView4"
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:contentDescription=”TODO”
android:scaleType=”centerCrop”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintHorizontal_bias=”0.5"
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”@+id/guideline6"
app:srcCompat=”@drawable/onboarding_activity_ic_waves_2" />

<ImageView
android:id=”@+id/imageView3"
android:layout_width=”0dp”
android:layout_height=”0dp”
android:contentDescription=”Picture of person giving test”
app:layout_constraintBottom_toTopOf=”@+id/guideline7"
app:layout_constraintEnd_toEndOf=”@+id/guideline5"
app:layout_constraintEnd_toStartOf=”@+id/guideline5"
app:layout_constraintHorizontal_bias=”1.0"
app:layout_constraintStart_toStartOf=”@+id/guideline3"
app:layout_constraintTop_toTopOf=”@+id/guideline12"
app:layout_constraintVertical_bias=”1.0"
app:srcCompat=”@drawable/onboarding_activity_ic_image_2" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline4"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.50121653" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline5"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.9026764" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline6"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.15" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline7"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.6" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline8"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.85" />

<Button
android:id=”@+id/button2"
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginTop=”8dp”
android:layout_marginEnd=”8dp”
android:layout_marginBottom=”8dp”
android:background=”@drawable/onboarding_activity_button_2"
android:fontFamily=”@font/product_sans_bold”
android:onClick=”nextPage”
android:text=”Next”
android:textColor=”@android:color/white”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toStartOf=”@+id/guideline14"
app:layout_constraintStart_toStartOf=”@+id/guideline13"
app:layout_constraintTop_toTopOf=”@+id/guideline8" />

<TextView
android:id=”@+id/textView7"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginTop=”45dp”
android:layout_marginEnd=”8dp”
android:fontFamily=”@font/product_sans_bold”
android:text=”@string/demo_title”
android:textColor=”#FFFFFF”
android:textSize=”32sp”
app:layout_constraintEnd_toStartOf=”@+id/guideline5"
app:layout_constraintStart_toStartOf=”@+id/guideline3"
app:layout_constraintTop_toTopOf=”@+id/guideline7"
tools:text=”@string/demo_title” />

<TextView
android:id=”@+id/textView8"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginEnd=”8dp”
android:layout_marginBottom=”8dp”
android:fontFamily=”@font/product_sans_regular”
android:text=”@string/demo_content”
android:textAlignment=”center”
android:textColor=”#FFFFFF”
android:textSize=”16sp”
app:layout_constraintBottom_toTopOf=”@+id/guideline8"
app:layout_constraintEnd_toStartOf=”@+id/guideline5"
app:layout_constraintStart_toStartOf=”@+id/guideline3"
app:layout_constraintTop_toBottomOf=”@+id/textView7"
tools:text=”@string/demo_content” />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline12"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.05" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline13"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.3" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline14"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.7" />

</androidx.constraintlayout.widget.ConstraintLayout>

Onboarding layout 3

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
xmlns:tools=”http://schemas.android.com/tools"
xmlns:app=”http://schemas.android.com/apk/res-auto"
tools:context=”.onboardingThird.OnBoardingActivityThree”>

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline3"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.1" />

<ImageView
android:id=”@+id/imageView4"
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:contentDescription=”TODO”
android:scaleType=”centerCrop”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintHorizontal_bias=”0.5"
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”@+id/guideline12"
app:srcCompat=”@drawable/onboarding_activity_ic_waves_3" />

<ImageView
android:id=”@+id/imageView3"
android:layout_width=”0dp”
android:layout_height=”0dp”
android:contentDescription=”Picture of person giving test”
app:layout_constraintBottom_toTopOf=”@+id/guideline7"
app:layout_constraintEnd_toEndOf=”@+id/guideline5"
app:layout_constraintEnd_toStartOf=”@+id/guideline5"
app:layout_constraintHorizontal_bias=”1.0"
app:layout_constraintStart_toStartOf=”@+id/guideline3"
app:layout_constraintTop_toTopOf=”@+id/guideline12"
app:layout_constraintVertical_bias=”1.0"
app:srcCompat=”@drawable/onboarding_activity_ic_image_3" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline4"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.50121653" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline5"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.9026764" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline6"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.15" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline7"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.6" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline8"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.85" />

<Button
android:id=”@+id/button2"
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginTop=”8dp”
android:layout_marginEnd=”8dp”
android:layout_marginBottom=”8dp”
android:background=”@drawable/onboarding_activity_button_3"
android:fontFamily=”@font/product_sans_bold”
android:onClick=”nextPage”
android:text=”Next”
android:textColor=”@android:color/white”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toStartOf=”@+id/guideline14"
app:layout_constraintStart_toStartOf=”@+id/guideline13"
app:layout_constraintTop_toTopOf=”@+id/guideline8" />

<TextView
android:id=”@+id/textView7"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginTop=”45dp”
android:layout_marginEnd=”8dp”
android:fontFamily=”@font/product_sans_bold”
android:text=”@string/demo_title”
android:textColor=”#FFFFFF”
android:textSize=”32sp”
app:layout_constraintEnd_toStartOf=”@+id/guideline5"
app:layout_constraintStart_toStartOf=”@+id/guideline3"
app:layout_constraintTop_toTopOf=”@+id/guideline7"
tools:text=”@string/demo_title” />

<TextView
android:id=”@+id/textView8"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginEnd=”8dp”
android:layout_marginBottom=”8dp”
android:fontFamily=”@font/product_sans_regular”
android:text=”@string/demo_content”
android:textAlignment=”center”
android:textColor=”#FFFFFF”
android:textSize=”16sp”
app:layout_constraintBottom_toTopOf=”@+id/guideline8"
app:layout_constraintEnd_toStartOf=”@+id/guideline5"
app:layout_constraintStart_toStartOf=”@+id/guideline3"
app:layout_constraintTop_toBottomOf=”@+id/textView7"
tools:text=”@string/demo_content” />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline12"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.05" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline13"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.3" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline14"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.7" />

</androidx.constraintlayout.widget.ConstraintLayout>

Onboarding layout 4

<?xml version=”1.0" encoding=”utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android=”http://schemas.android.com/apk/res/android"
android:layout_width=”match_parent”
android:layout_height=”match_parent”
xmlns:tools=”http://schemas.android.com/tools"
xmlns:app=”http://schemas.android.com/apk/res-auto"
tools:context=”.onboardingThird.OnBoardingActivityThree”>

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline3"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.1" />

<ImageView
android:id=”@+id/imageView3"
android:layout_width=”0dp”
android:layout_height=”0dp”
android:contentDescription=”@string/app_name”
android:scaleType=”centerCrop”
app:layout_constraintBottom_toTopOf=”@+id/guideline7"
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”@+id/guideline12"
app:srcCompat=”@drawable/onboarding_activity_ic_image_4" />

<ImageView
android:id=”@+id/imageView4"
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:contentDescription=”TODO”
android:scaleType=”centerCrop”
app:layout_constraintEnd_toEndOf=”parent”
app:layout_constraintHorizontal_bias=”0.5"
app:layout_constraintStart_toStartOf=”parent”
app:layout_constraintTop_toTopOf=”@+id/guideline12"
app:srcCompat=”@drawable/onboarding_activity_ic_waves_4" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline4"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.50121653" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline5"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.9026764" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline6"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.15" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline7"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.6" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline8"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.85" />

<Button
android:id=”@+id/button2"
android:layout_width=”0dp”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginTop=”8dp”
android:layout_marginEnd=”8dp”
android:layout_marginBottom=”8dp”
android:background=”@drawable/onboarding_activity_button_4"
android:fontFamily=”@font/product_sans_bold”
android:onClick=”nextPage”
android:text=”@string/next”
android:textColor=”@android:color/white”
app:layout_constraintBottom_toBottomOf=”parent”
app:layout_constraintEnd_toStartOf=”@+id/guideline14"
app:layout_constraintStart_toStartOf=”@+id/guideline13"
app:layout_constraintTop_toTopOf=”@+id/guideline8" />

<TextView
android:id=”@+id/textView7"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginTop=”45dp”
android:layout_marginEnd=”8dp”
android:fontFamily=”@font/product_sans_bold”
android:text=”@string/demo_title”
android:textColor=”#FFFFFF”
android:textSize=”32sp”
app:layout_constraintEnd_toStartOf=”@+id/guideline5"
app:layout_constraintStart_toStartOf=”@+id/guideline3"
app:layout_constraintTop_toTopOf=”@+id/guideline7"
tools:text=”@string/demo_title” />

<TextView
android:id=”@+id/textView8"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:layout_marginStart=”8dp”
android:layout_marginEnd=”8dp”
android:layout_marginBottom=”8dp”
android:fontFamily=”@font/product_sans_regular”
android:text=”@string/demo_content”
android:textAlignment=”center”
android:textColor=”#FFFFFF”
android:textSize=”16sp”
app:layout_constraintBottom_toTopOf=”@+id/guideline8"
app:layout_constraintEnd_toStartOf=”@+id/guideline5"
app:layout_constraintStart_toStartOf=”@+id/guideline3"
app:layout_constraintTop_toBottomOf=”@+id/textView7"
tools:text=”@string/demo_content” />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline12"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”horizontal”
app:layout_constraintGuide_percent=”0.02" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline13"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.3" />

<androidx.constraintlayout.widget.Guideline
android:id=”@+id/guideline14"
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:orientation=”vertical”
app:layout_constraintGuide_percent=”0.7" />

</androidx.constraintlayout.widget.ConstraintLayout>

package com.codewithgolap.imageslider.onboardingThird;

import android.view.View;

import androidx.viewpager.widget.ViewPager;
import androidx.viewpager2.widget.ViewPager2;

import com.codewithgolap.imageslider.R;

public class OnboardingPageTransformer implements ViewPager.PageTransformer{

@Override
public void transformPage(View page, float position) {

// Get the page index from the tag. This makes
// it possible to know which page index you’re
// currently transforming — and that can be used
// to make some important performance improvements.
int pagePosition = (int) page.getTag();

// Here you can do all kinds of stuff, like get the
// width of the page and perform calculations based
// on how far the user has swiped the page.
int pageWidth = page.getWidth();
float pageWidthTimesPosition = pageWidth * position;
float absPosition = Math.abs(position);

// Now it’s time for the effects
if (position <= -1.0f || position >= 1.0f) {

// The page is not visible. This is a good place to stop
// any potential work / animations you may have running.

} else if (position == 0.0f) {

// The page is selected. This is a good time to reset Views
// after animations as you can’t always count on the PageTransformer
// callbacks to match up perfectly.

} else {

// The page is currently being scrolled / swiped. This is
// a good place to show animations that react to the user’s
// swiping as it provides a good user experience.

// Let’s start by animating the title.
// We want it to fade as it scrolls out
View title = page.findViewById(R.id.textView7);
title.setAlpha(1.0f — absPosition);

// Now the description. We also want this one to
// fade, but the animation should also slowly move
// down and out of the screen
View description = page.findViewById(R.id.textView8);
description.setTranslationY(-pageWidthTimesPosition / 2f);
description.setAlpha(1.0f — absPosition);

// Now, we want the image to move to the right,
// i.e. in the opposite direction of the rest of the
// content while fading out
View computer = page.findViewById(R.id.imageView3);

// We’re attempting to create an effect for a View
// specific to one of the pages in our ViewPager.
// In other words, we need to check that we’re on
// the correct page and that the View in question
// isn’t null.
if (computer != null) {
computer.setAlpha(1.0f — absPosition);
computer.setTranslationX(-pageWidthTimesPosition * 1.5f);
// computer.setTranslationY(-pageWidthTimesPosition / 2f);
}

// Finally, it can be useful to know the direction
// of the user’s swipe — if we’re entering or exiting.
// This is quite simple:
if (position < 0) {
// Create your out animation here
} else {
// Create your in animation here
}
}
}

}

package com.codewithgolap.imageslider.onboardingThird;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import androidx.annotation.NonNull;
import androidx.constraintlayout.widget.ConstraintLayout;
import androidx.viewpager.widget.PagerAdapter;

import com.codewithgolap.imageslider.R;

public class OnBoardingAdapter extends PagerAdapter {

private Context context;
private int[] layouts = {
R.layout.onboarding_1,
R.layout.onboarding_2,
R.layout.onboarding_3,
R.layout.onboarding_4
};

public OnBoardingAdapter(Context context) {
this.context = context;
}

@Override
public int getCount() {
return layouts.length;
}

@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == object;
}

@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
// return super.instantiateItem(container, position);
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(layouts[position], container, false);
view.setTag(position);

container.addView(view);

return view;
}

@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
// super.destroyItem(container, position, object);
container.removeView((ConstraintLayout) object);
}

}

package com.codewithgolap.imageslider.onboardingThird;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

import com.codewithgolap.imageslider.R;

public class OnBoardingActivityThree extends AppCompatActivity {

private ViewPager viewPager;
OnBoardingAdapter onboardingAdapter;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_on_boarding_three);
makeStatusbarTransparent();

viewPager = findViewById(R.id.onboarding_three_view_pager);

onboardingAdapter = new OnBoardingAdapter(OnBoardingActivityThree.this);
viewPager.setAdapter(onboardingAdapter);
viewPager.setPageTransformer(false, new OnboardingPageTransformer());

}

// Listener for next button press
public void nextPage(View view) {
if (view.getId() == R.id.button2) {
if (viewPager.getCurrentItem() < onboardingAdapter.getCount() — 1) {
viewPager.setCurrentItem(viewPager.getCurrentItem() + 1, true);
}
}
}

private void makeStatusbarTransparent() {

if (Build.VERSION.SDK_INT >= 21) {
getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
}

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
Window window = getWindow();
window.addFlags(WindowManager.LayoutParams.FLAG_DRAWS_SYSTEM_BAR_BACKGROUNDS);
window.setStatusBarColor(Color.TRANSPARENT);
}
}
}

The output of the third onboarding screen:

Example 4: Fourth onboarding screen

<?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=”.onboardingForth.OnBoardingForthActivity”>

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

<LinearLayout
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/layout_dots”
android:orientation=”horizontal”
android:layout_centerHorizontal=”true”
android:layout_alignParentBottom=”true”
android:layout_marginBottom=”20dp”/>

</RelativeLayout>

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

<ImageView
android:layout_width=”match_parent”
android:layout_height=”match_parent”
android:id=”@+id/img_banner”
android:scaleType=”fitXY”
android:src=”@drawable/fa2"
android:contentDescription=”@string/app_name”/>

<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/tv_title”
android:layout_centerHorizontal=”true”
android:textSize=”24sp”
android:fontFamily=”@font/product_sans_bold”
android:textColor=”@color/white”
android:layout_marginTop=”120dp”/>

<TextView
android:layout_width=”wrap_content”
android:layout_height=”wrap_content”
android:id=”@+id/tv_desc”
android:layout_below=”@id/tv_title”
android:layout_centerHorizontal=”true”
android:layout_marginTop=”20dp”
android:layout_marginStart=”40dp”
android:layout_marginEnd=”40dp”
android:textSize=”15sp”
android:fontFamily=”@font/product_sans_regular”
android:textColor=”@color/white”
android:textAlignment=”center”/>

</RelativeLayout>

package com.codewithgolap.imageslider.onboardingForth;

import android.content.Context;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.RelativeLayout;
import android.widget.TextView;

import androidx.annotation.NonNull;
import androidx.viewpager.widget.PagerAdapter;

import com.codewithgolap.imageslider.R;

public class OnBoardingForthAdapter extends PagerAdapter {

private Context context;

public OnBoardingForthAdapter(Context context) {
this.context = context;
}

private int[] slider_images = {
R.drawable.fa2,
R.drawable.fa6,
R.drawable.fa7,
R.drawable.fa5
};

private String[] slider_title = {
“Food in your area”,
“Food which is Health”,
“Food you love”,
“Food that matter”
};

private String[] slider_desc = {
“Lorem Ipsum is simply dummy text of the printing and typesetting industry.”,
“Lorem Ipsum is simply dummy text of the printing and typesetting industry.”,
“Lorem Ipsum is simply dummy text of the printing and typesetting industry.”,
“Lorem Ipsum is simply dummy text of the printing and typesetting industry.”
};

@Override
public int getCount() {
return slider_title.length;
}

@Override
public boolean isViewFromObject(@NonNull View view, @NonNull Object object) {
return view == (RelativeLayout) object;
}

@NonNull
@Override
public Object instantiateItem(@NonNull ViewGroup container, int position) {
LayoutInflater layoutInflater = (LayoutInflater) context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
View view = layoutInflater.inflate(R.layout.onboarding_item_layout_forth, container, false);

ImageView img_banner = view.findViewById(R.id.img_banner);
TextView tv_title = view.findViewById(R.id.tv_title);
TextView tv_desc = view.findViewById(R.id.tv_desc);

img_banner.setImageResource(slider_images[position]);
tv_title.setText(slider_title[position]);
tv_desc.setText(slider_desc[position]);

container.addView(view);
return view;
}

@Override
public void destroyItem(@NonNull ViewGroup container, int position, @NonNull Object object) {
container.removeView((RelativeLayout) object);
}
}

package com.codewithgolap.imageslider.onboardingForth;

import androidx.appcompat.app.AppCompatActivity;
import androidx.viewpager.widget.ViewPager;

import android.os.Bundle;
import android.text.Html;
import android.widget.LinearLayout;
import android.widget.TextView;

import com.codewithgolap.imageslider.R;

public class OnBoardingForthActivity extends AppCompatActivity {

private ViewPager viewPager;
private OnBoardingForthAdapter adapter;
private LinearLayout layout_dots;
private TextView[] tv_dots;

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

viewPager = findViewById(R.id.forth_view_pager);
layout_dots = findViewById(R.id.layout_dots);

adapter = new OnBoardingForthAdapter(OnBoardingForthActivity.this);
viewPager.setAdapter(adapter);

addDots(0);

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
@Override
public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override
public void onPageSelected(int position) {
addDots(position);
}

@Override
public void onPageScrollStateChanged(int state) {

}
});
}

private void addDots(int position){
tv_dots = new TextView[4];
layout_dots.removeAllViews();
for (int i =0 ; i < tv_dots.length; i++){
tv_dots[i] = new TextView(OnBoardingForthActivity.this);
tv_dots[i].setText(Html.fromHtml(“&#8226;”));
tv_dots[i].setTextSize(35);
tv_dots[i].setTextColor(getResources().getColor(R.color.backfroung_forth));

layout_dots.addView(tv_dots[i]);
}
if (tv_dots.length > 0){
tv_dots[position].setTextColor(getResources().getColor(R.color.white));
}
}
}

Output for the fourth onboarding screen:

Final Output of the app:

For more visit my GitHub page:

https://github.com/barmangolap15

You can also follow me on IG: @androidapps.development.blogs

and FC: @GBAndroidblogs

Also, visit my website www.gbandroidblogs.com for more content like this.

Hi everyone, myself Golap an Android app developer with UI/UX designer.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store