On-boarding or Walkthrough screen for your Android App with source code

ronnystudio-walkthrogh-nexteducate
On-boarding or Walk-through screen for your Android App with source code.spending 1000+ hours on building XML layout for your project? , well now, you can relax as you can use our free android kit which is a click away.

To show a first-time user how to get the most from your app, present onboarding information at app startup. Here are some examples of onboarding information with the android app source code.

  • Present detailed information on which channels are available when a user first accesses a channel app.
  • Call attention to noteworthy features in your app.
  • Illustrate any required or recommended steps that users should take when using the app for the first time.

What you’ll get

  • Clean coded and easy to understand for customization.
  • Change text, colors, and images as per your need.
  • Customize every element as much, or as little as you want.
  • Easy to edit.
  • high-quality design
  • Build Dynamic Android Apps From Scratch
  • Learn Android User Interface Design

Are there any requirements or prerequisites?

  • Basic android XML layout experience, in general, is helpful but not required. The tutorial covers everything you’ll need to build an Android App Screen
  • Be Willing to Work and Learn

Who this tutorial for:

  • Beginner Android Developers
  • Freelancer or mobile app development company that deals in android development.
  • Curious students who Want to Build their own Android Apps
  • Project Managers who Want to Learn How Android Apps Screen Built

You can download my code from the download now button and also download the APK to understand the activity or output. If you yet need a step by step tutorial to follow the below step.

Step 01 :

Create a new project in Android Studio from File ⇒ New Project. When it prompts you to select the default activity, select Empty Activity and proceed.

Download this res.zip and add them to your project res folder. This file contains a few drawable images required for this app.

Step 02 :

Go to the build Gradle and do the needful changes as follows.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.1.3'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.2'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.2'
    implementation 'com.android.support:design:27.1.1'
    implementation 'me.relex:circleindicator:1.2.1@aar'
}

Open colors.xml located under res ⇒ values and add the below color values.

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#ffffff</color>
    <color name="colorPrimaryDark">#ffffff</color>
    <color name="colorAccent">#FF4081</color>
    <color name="white">#ffffff</color>
    <color name="blackTxt">#0d0e15</color>
    <color name="grayTxt">#8c8c8c</color>
    <color name="fav">#fe2042</color>
    <color name="myfav">#007aff</color>
</resources>

Open strings.xml located under res ⇒ values and add the below values.

<resources>
    <string name="app_name">walkthrough</string>
    <string name="subtitle1">We are here to help you with an Android Source code</string>
    <string name="get_started">GET STARTED</string>
</resources>

Open styles.xml located under res ⇒ values and add the below values.

<resources>

    <!-- Base application theme. -->
    <style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
        <!-- Customize your theme here. -->
        <item name="colorPrimary">@color/colorPrimary</item>
        <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
        <item name="colorAccent">@color/colorAccent</item>
        <item name="windowNoTitle">true</item>
        <item name="android:windowFullscreen">true</item>
    </style>

</resources>

Step 03 :

Now it’s time to create the layouts required for the slider. So quickly create three XML layouts named fragment_walkthroughone.xmlfragment_walkthroughtwo.xmlfragment_walkthroughthree.xml and under res ⇒ layouts.

fragment_walkthroughone.XML

<?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="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/one" />


</RelativeLayout>

fragment_walkthroughtwo.XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/two" />


</RelativeLayout>

fragment_walkthroughthree.XML

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center"
    android:gravity="center"
    android:orientation="vertical">

    <ImageView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:src="@drawable/three" />


</RelativeLayout>

Step 04 :

Open activity_main.xml and modify the code as below.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical"
    tools:context="com.nexteducate.walkthrough.MainActivity">

    <LinearLayout
        android:id="@+id/lay_one"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="vertical">

        <android.support.v4.view.ViewPager
            android:id="@+id/viewpager"
            android:layout_width="match_parent"
            android:layout_height="330dp"
            android:layout_marginTop="5dp"
            android:clipToPadding="false"
            android:paddingLeft="28dp"
            android:paddingRight="28dp" />

        <me.relex.circleindicator.CircleIndicator
            android:id="@+id/indicator"
            android:layout_width="match_parent"
            android:layout_height="30dp"
            android:layout_gravity="bottom"
            android:paddingBottom="15dp"
            app:ci_drawable="@drawable/ic_brightness_1_black_24dp"
            app:ci_drawable_unselected="@drawable/ic_brightness_1_grey_24dp"
            app:ci_height="5dp"
            app:ci_width="5dp" />


    </LinearLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_below="@+id/lay_one"
        android:layout_alignParentBottom="true"
        android:background="@color/white"
        android:orientation="vertical">


        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="10dp"
            android:fontFamily="@font/sf_pro_display_regular"
            android:letterSpacing="0.0265"
            android:paddingTop="20.3dp"
            android:paddingBottom="12.9dp"
            android:text="NEXT EDUCATE"
            android:textColor="@color/myfav"
            android:textSize="14.3sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:fontFamily="@font/sf_pro_display_bold"
            android:lineSpacingExtra="4.7sp"
            android:text="Android Source code "
            android:textColor="@color/blackTxt"
            android:textSize="23.3sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:fontFamily="@font/sf_pro_display_bold"
            android:lineSpacingExtra="4.7sp"
            android:text="and inspiration "
            android:textColor="@color/blackTxt"
            android:textSize="23.3sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="4.5dp"
            android:fontFamily="@font/sf_pro_display_medium"
            android:letterSpacing="0.0265"
            android:text="@string/subtitle1"
            android:textColor="@color/grayTxt"
            android:textSize="13sp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:fontFamily="@font/sf_pro_display_medium"
            android:letterSpacing="0.0265"
            android:text="Get inspired and make Android Code"
            android:textColor="@color/grayTxt"
            android:textSize="13sp" />

        <TextView
            android:id="@+id/tv_getstarted"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="25.1dp"
            android:fontFamily="@font/sf_pro_display_medium"
            android:text="@string/get_started"
            android:textColor="@color/fav"
            android:textSize="15.7sp" />


    </LinearLayout>
</RelativeLayout>

Step 05 :

Now it’s time to create the fragment required. So quickly create three fragments named Fragment_walkthroughoneFragment_walkthroughtwoFragment_walkthroughthree and under java⇒ create new package⇒fragment

Fragment_walkthroughone

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.nexteducate.walkthrough.R;

public class Fragment_walkthroughone extends Fragment {

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_walkthroughone, container, false);


    }
}

Fragment_walkthroughtwo

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.nexteducate.walkthrough.R;

public class Fragment_walkthroughtwo extends Fragment{

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_walkthroughtwo,container,false);
    }
}

Fragment_walkthroughthree

import android.os.Bundle;
import android.support.annotation.NonNull;
import android.support.annotation.Nullable;
import android.support.v4.app.Fragment;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

import com.nexteducate.walkthrough.R;

public class Fragment_walkthroughthree extends Fragment {

    @Override
    public void onViewCreated(@NonNull View view, @Nullable Bundle savedInstanceState) {
        super.onViewCreated(view, savedInstanceState);
    }

    @Nullable
    @Override
    public View onCreateView(@NonNull LayoutInflater inflater, @Nullable ViewGroup container, @Nullable Bundle savedInstanceState) {
        return inflater.inflate(R.layout.fragment_walkthroughthree,container,false);
    }
}

Step 06 :

Now it’s time to create the Adapter. So create package first and under that create Adapter_walkthrough java⇒ create new package⇒adapter⇒Adapter_walkthrough.

Adapter_walkthrough

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentStatePagerAdapter;

import com.nexteducate.walkthrough.fragment.Fragment_walkthroughone;
import com.nexteducate.walkthrough.fragment.Fragment_walkthroughthree;
import com.nexteducate.walkthrough.fragment.Fragment_walkthroughtwo;

public class Adapter_walkthrough extends FragmentStatePagerAdapter {

    public Adapter_walkthrough(FragmentManager fm) {
        super(fm);

    }


    @Override
    public Fragment getItem(int position) {

        switch (position) {
            case 0:
                Fragment_walkthroughone tab1 = new Fragment_walkthroughone();
                return tab1;

            case 1:
                Fragment_walkthroughtwo tab2 = new Fragment_walkthroughtwo();
                return tab2;


            case 2:
                Fragment_walkthroughthree tab3 = new Fragment_walkthroughthree();
                return tab3;


            default:
                return null;
        }
    }

    @Override
    public int getCount() {
        return 3;
    }
}

Step 07 :

Now finally open MainActivity and modify the code as below.

import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;

import com.nexteducate.walkthrough.Adapter.Adapter_walkthrough;

import me.relex.circleindicator.CircleIndicator;

public class MainActivity extends AppCompatActivity {

    public ViewPager viewpager;

    Adapter_walkthrough adapter_walkthrough;

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

        viewpager = findViewById(R.id.viewpager);

        CircleIndicator indicator = findViewById(R.id.indicator);

        adapter_walkthrough = new Adapter_walkthrough(getSupportFragmentManager());

        viewpager.setAdapter(adapter_walkthrough);

        indicator.setViewPager(viewpager);

        adapter_walkthrough.registerDataSetObserver(indicator.getDataSetObserver());
    }
}

Now 🙂 Run the App and Enjoy

For full source code get it from here.

Facebook
Twitter
LinkedIn
Reddit
StumbleUpon
Pinterest
WhatsApp

Leave a comment

Your email address will not be published. Required fields are marked *

Related Posts