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
- Now create a new activity for first onboarding screen. And design for the 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>
- Create an item container layout for the onboarding screen
<?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>
- Create a model class for the items.
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;
}
}
- now, create an adapter for inflate the layout.
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());
}
}
}
- Next, add the functionality
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
- Now create a new activity for the second onboarding screen. And design the main layout.
<?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>
- Create an item container layout for the second onboarding screen
<?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>
- Create a model class for the items.
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;
}
}
- now, create an adapter to inflate the layout.
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());
}
}
}
- Next, add the functionality
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
- Now create a new activity for the third onboarding screen. And design the main layout.
<?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>
- Create the item layouts for the third onboarding screen
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>
- Create a transform class for the layout transformation (sorry for more comment lines, I just try to explain, so that it can help you to understand)
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
}
}
}}
- now, create an adapter to inflate the layouts.
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);
}}
- Next, add the functionality for the third onboarding screen
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
- Now create a new activity for the fourth onboarding screen. And design the main layout.
<?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>
- Create an item container layout for the second onboarding screen
<?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>
- now, create an adapter to inflate the layout.
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);
}
}
- Next, add the functionality
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(“•”));
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.
