Walkthrough – Onboarding screen in an android studio – City Guide – 3

by | Mar 18, 2020 | Android for Beginners, Basics, City Guide App | 0 comments

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:

  1. Add strings for titles, description and buttons name.
  2. Create a new activity.
  3. Design the activity.
  4. Design the ViewPager Layout.
  5. 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("&#8226;"));
            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) {

        }
    };

}

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

COURSES

Android firebase app - android app 2022 - firebase android app - bulls rent app - coding with t app - android app
android complete login signup product by taimoor sikander free for any type of android app
Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design