In this tutorial, we will learn how to create a walkthrough screen/onboarding screen in android studio. This screen is also called as 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 arises who are first-time users of our application?
First-time users are those users who download and install our application and use it for the first time.
Subscribe Us on Youtube
These screens are used to introduce our application.
Thus, by using these screens we will tell the user What is the purpose of making an app? and how to use our application?
It may be called a startup guide of an app.
In addition to Splash Screen which we have created earlier, we have to create the onboarding screen of our android spp.
So, open your android studio and let’s get started
Steps for Walkthrough/OnBoarding Screen android studio:
Before Starting if you want to get the images then simply click here
To create a walkthrough/onboarding/first-time users screen in android studio, you have to just follow these steps:
- Add strings for titles, description and buttons name.
- Create a new activity.
- Design the activity.
- Design the ViewPager Layout.
- Code to run the slider.
1- Add Strings?
Adding the string is important for changing the languages. If you want to learn more? Check out tutorials about the setup of an android studio.
Hence to add the strings go to the left side of the android studio.
Here open the “project” tool window. check that “Android” is Selected.
Now go to app->res->values and open strings.
Here add the strings of the title Description and Buttons between the resources tag.
<!-- Strings for On Boarding Screen -->
<!--Titles-->
<string name="first_slide_title">Search Your Location</string>
<string name="second_slide_title">Make A Call</string>
<string name="third_slide_title">Add Missing Place</string>
<string name="fourth_slide_title">Sit Back And Enjoy</string>
<!--Descriptions-->
<string name="first_slide_desc">You can search any place nearby or with-in the specified city. We will display specific or all related shops to match your search. </string>
<string name="second_slide_desc">We provide almost all the numbers of all departments and shops registered with us. You can perform bookings as well.</string>
<string name="third_slide_desc">If you have a shop or somethings and want to be a part of our growing industry then add your place by follwing simple steps.</string>
<string name="fourth_slide_desc">We will handle everything for you. As you have the app in your pocket then you don't have to worry about anything. </string>
<!--Buttons-->
<string name="skip_btn">Skip</string>
<string name="next_btn">Next</string>
<string name="let_get_started">Lets Get Started</string>
2- Create a new activity:
To create a new activity for onboarding screen android studio, go to app->java then right-click on the first folder then go to new->activity->Empty Activity of “project” tool window.
After that give the name of the activity as OnBoarding and click Finish.
Two files have been created, one is java file and the other is an XML file.
3- Design the OnBoarding screen android studio activity:
Designing the onBoarding screen is too much easy.
In the first place open activity_on_boarding.xml.
Now you are in the design view. On the left side of the design, there is a toolbar name as “Pallete”.
Search for the ViewPager, drag, and drop it in the design.
After that go to the split view of the design from the extreme right of an android studio.
In the first place, you have to check that the main layout is a constraint 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"
android:background="@color/lightWhite"
android:padding="20dp"
tools:context=".Common.OnBoarding">
</androidx.constraintlayout.widget.ConstraintLayout>
In between the constraint layout, You have a ViewPager that you have dragged in the design view.
ViewPager is basically a slider that we have to create in onboarding. Hence give it the id as a slider, with a width of match parent and height of 0dp.
<androidx.viewpager.widget.ViewPager
android:id="@+id/slider"
android:layout_width="match_parent"
android:layout_height="0dp"
app:layout_constraintBottom_toTopOf="@+id/relativeLayout"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent">
</androidx.viewpager.widget.ViewPager>
As you have seen the layout_constraintBottom_toTopOf is relative layout. We will create it.
After that create a skip button on top by which user can skip to the app.
<Button
android:id="@+id/skip_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:background="#00000000"
android:drawableEnd="@drawable/skip_icon"
android:drawableRight="@drawable/skip_icon"
android:onClick="skip"
android:padding="10dp"
android:text="@string/skip_btn"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent" />
Now create a Relative Layout after the skip button with a width of match parent and height of 150dp.
<RelativeLayout
android:id="@+id/relativeLayout"
android:layout_width="match_parent"
android:layout_height="150dp"
app:layout_constraintBottom_toBottomOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent">
</RelativeLayout>
In between the relative layout, we will create let’s get started button, linear layout with horizontal orientation and next button at the bottom of the design.
<Button
android:id="@+id/get_started_btn"
android:layout_width="match_parent"
android:layout_height="wrap_content"
android:background="@color/colorPrimary"
android:text="@string/let_get_started"
android:visibility="invisible" />
<LinearLayout
android:id="@+id/dots"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentBottom="true"
android:orientation="horizontal"
android:paddingBottom="20dp" />
<Button
android:id="@+id/next_btn"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentRight="true"
android:layout_alignParentBottom="true"
android:background="#00000000"
android:drawableEnd="@drawable/next_btn"
android:drawableRight="@drawable/next_btn"
android:onClick="next"
android:paddingBottom="30dp" />
4- Design the ViewPager Layout of onboarding screen android studio
Now design the slider of onBoarding screen. To design that we have to use image view and two text views between constraint layout having width and height of match parent and padding of 10dp.
<ImageView
android:id="@+id/slider_image"
android:layout_width="0dp"
android:layout_height="400dp"
android:layout_marginTop="32dp"
android:padding="20dp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toTopOf="parent"
app:srcCompat="@drawable/sit_back_and_relax" />
<TextView
android:id="@+id/slider_heading"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="174dp"
android:layout_marginLeft="174dp"
android:layout_marginEnd="178dp"
android:layout_marginRight="178dp"
android:fontFamily="@font/brandon_grotesque_black"
android:gravity="center"
android:text="TextView"
android:textSize="36sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintHorizontal_bias="0.471"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/slider_image" />
<TextView
android:id="@+id/slider_desc"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginStart="176dp"
android:layout_marginLeft="176dp"
android:layout_marginEnd="176dp"
android:layout_marginRight="176dp"
android:gravity="center"
android:padding="10dp"
android:text="@string/first_slide_desc"
android:textSize="14sp"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintTop_toBottomOf="@+id/slider_heading" />
5- Code the java file of onBoarding screen
Lastly copy and paste the code of OnBoarding. java in your app.
Complete Source Code of 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" android:background="@color/lightWhite" android:padding="20dp" tools:context=".Common.OnBoarding"> <androidx.viewpager.widget.ViewPager android:id="@+id/slider" android:layout_width="match_parent" android:layout_height="0dp" app:layout_constraintBottom_toTopOf="@+id/relativeLayout" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent"> </androidx.viewpager.widget.ViewPager> <Button android:id="@+id/skip_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:background="#00000000" android:drawableEnd="@drawable/skip_icon" android:drawableRight="@drawable/skip_icon" android:onClick="skip" android:padding="10dp" android:text="@string/skip_btn" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintTop_toTopOf="parent" /> <RelativeLayout android:id="@+id/relativeLayout" android:layout_width="match_parent" android:layout_height="150dp" app:layout_constraintBottom_toBottomOf="parent" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent"> <Button android:id="@+id/get_started_btn" android:layout_width="match_parent" android:layout_height="wrap_content" android:background="@color/colorPrimary" android:text="@string/let_get_started" android:visibility="invisible" /> <LinearLayout android:id="@+id/dots" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:orientation="horizontal" android:paddingBottom="20dp" /> <Button android:id="@+id/next_btn" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignParentBottom="true" android:background="#00000000" android:drawableEnd="@drawable/next_btn" android:drawableRight="@drawable/next_btn" android:onClick="next" android:paddingBottom="30dp" /> </RelativeLayout> </androidx.constraintlayout.widget.ConstraintLayout>
<?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" android:layout_width="match_parent" android:layout_height="match_parent" android:padding="10dp"> <ImageView android:id="@+id/slider_image" android:layout_width="0dp" android:layout_height="400dp" android:layout_marginTop="32dp" android:padding="20dp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toTopOf="parent" app:srcCompat="@drawable/sit_back_and_relax" /> <TextView android:id="@+id/slider_heading" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="174dp" android:layout_marginLeft="174dp" android:layout_marginEnd="178dp" android:layout_marginRight="178dp" android:fontFamily="@font/brandon_grotesque_black" android:gravity="center" android:text="TextView" android:textSize="36sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintHorizontal_bias="0.471" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/slider_image" /> <TextView android:id="@+id/slider_desc" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_marginStart="176dp" android:layout_marginLeft="176dp" android:layout_marginEnd="176dp" android:layout_marginRight="176dp" android:gravity="center" android:padding="10dp" android:text="@string/first_slide_desc" android:textSize="14sp" app:layout_constraintEnd_toEndOf="parent" app:layout_constraintStart_toStartOf="parent" app:layout_constraintTop_toBottomOf="@+id/slider_heading" /> </androidx.constraintlayout.widget.ConstraintLayout>
import androidx.appcompat.app.AppCompatActivity; import androidx.viewpager.widget.ViewPager; import android.content.Intent; import android.os.Bundle; import android.text.Html; import android.view.View; import android.view.WindowManager; import android.view.animation.Animation; import android.view.animation.AnimationUtils; import android.widget.Button; import android.widget.LinearLayout; import android.widget.TextView; import com.taimoorsikander.cityguide.HelperClasses.SliderAdapter; import com.taimoorsikander.cityguide.R; import com.taimoorsikander.cityguide.User.UserDashboard; public class OnBoarding extends AppCompatActivity { //Variables ViewPager viewPager; LinearLayout dotsLayout; SliderAdapter sliderAdapter; TextView[] dots; Button letsGetStarted; Animation animation; int currentPos; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN); setContentView(R.layout.activity_on_boarding); //Hooks viewPager = findViewById(R.id.slider); dotsLayout = findViewById(R.id.dots); letsGetStarted = findViewById(R.id.get_started_btn); //Call adapter sliderAdapter = new SliderAdapter(this); viewPager.setAdapter(sliderAdapter); //Dots addDots(0); viewPager.addOnPageChangeListener(changeListener); } public void skip(View view) { startActivity(new Intent(this, UserDashboard.class)); finish(); } public void next(View view) { viewPager.setCurrentItem(currentPos + 1); } private void addDots(int position) { dots = new TextView[4]; dotsLayout.removeAllViews(); for (int i = 0; i < dots.length; i++) { dots[i] = new TextView(this); dots[i].setText(Html.fromHtml("•")); dots[i].setTextSize(35); dotsLayout.addView(dots[i]); } if (dots.length > 0) { dots[position].setTextColor(getResources().getColor(R.color.colorPrimaryDark)); } } ViewPager.OnPageChangeListener changeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) { } @Override public void onPageSelected(int position) { addDots(position); currentPos = position; if (position == 0) { letsGetStarted.setVisibility(View.INVISIBLE); } else if (position == 1) { letsGetStarted.setVisibility(View.INVISIBLE); } else if (position == 2) { letsGetStarted.setVisibility(View.INVISIBLE); } else { animation = AnimationUtils.loadAnimation(OnBoarding.this, R.anim.bottom_anim); letsGetStarted.setAnimation(animation); letsGetStarted.setVisibility(View.VISIBLE); } } @Override public void onPageScrollStateChanged(int state) { } }; }
To learn in detail just follow our Youtube tutorial..
Android Related Videos
- Design a Modern Dashboard
- Material Design Login Screen with Shared Animations
- Create a Navigation Drawer Material Design in 2020
- Design Responsive Android App to fit all screen sizes
Related Articles that you might want to check out.
- Create a new project in android studio for beginners?
- How to create an Account on Fiverr and start earning?
- Create a Gig on Fiverr and start selling specific services.
- How To Start Blogging and Make Money?
Our Projects Make Us Proud