Android Application Adding Welcome / Intro screens in your app is a great way of showcasing the major features of the app. In this article, we are going to learn how to add an intro slider with animation to your app where the user can swipe through few slides before getting into an app.

Creating New Project

• Create a new project in Android Studio from File ⇒ New Project. When selecting Empty Activity and proceed.
• Add scviewpager dependency to your build.gradle and rebuild the project.

dependencies {
    implementation fileTree(dir: 'libs', include: ['*.jar'])
    implementation 'com.android.support:appcompat-v7:27.1.1'
    implementation 'com.android.support.constraint:constraint-layout:1.0.2'
    testImplementation 'junit:junit:4.12'
    androidTestImplementation 'com.android.support.test:runner:1.0.1'
    androidTestImplementation 'com.android.support.test.espresso:espresso-core:3.0.1'
    implementation "com.dev.sacot41:scviewpager:0.0.4"
}

Choosing the Colors

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

colors.xml

<?xml version="1.0" encoding="utf-8"?>
<resources>
    <color name="colorPrimary">#3F51B5</color>
    <color name="colorPrimaryDark">#303F9F</color>
    <color name="colorAccent">#FF4081</color>
    <color name="white">#FFFFFF</color>
    <color name="theme_500">#607D8B</color>
    <color name="theme_100">#CFD8DC</color>
    <color name="theme_700">#455A64</color>
    <color name="accent_A100">#FF8A80</color>
    <color name="accent_A200">#FF5252</color>
    <color name="accent_A400">#FF1744</color>
</resources>

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

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
</resources>

•  Open Style.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>
    </style>

    <style name="CustomApprTheme" parent="Theme.AppCompat">
        <item name="colorPrimary">@color/theme_500</item>
        <item name="colorPrimaryDark">@color/theme_700</item>
        <item name="colorAccent">@color/accent_A200</item>
        <item name="android:windowBackground">@color/theme_100</item>
        <item name = "android:windowActionBar">false</item>
        <item name = "android:windowNoTitle">true</item>
    </style>
</resources>

• Create four XML layouts named activity_welcome.xml  under res ⇒ layouts.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="fill_parent"
    android:layout_height="match_parent"
    android:clipChildren="true"
    android:clipToPadding="true"
    tools:context=".WelcomeActivity">

    <com.dev.sacot41.scviewpager.SCViewPager
        android:id="@+id/viewpager_main_activity"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </com.dev.sacot41.scviewpager.SCViewPager>

    <com.dev.sacot41.scviewpager.DotsView
        android:orientation="horizontal"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_marginBottom="10dp"
        android:id="@+id/dotsview_main"
        />

    <ImageView
        android:id="@+id/imageview_main_activity_name_tag"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:paddingLeft="40dp"
        android:paddingRight="50dp"
        android:layout_alignParentTop="true"
        android:rotation="-10"
        android:src="@drawable/name_tag"/>

    <ImageView
        android:id="@+id/imageview_main_activity_currently_work"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="225dp"
        android:src="@drawable/currently_work"/>

    <ImageView
        android:id="@+id/imageview_main_activity_at_skex"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="450dp"
        android:src="@drawable/at_skex_2"/>

    <ImageView
        android:id="@+id/imageview_main_activity_commonly"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="95dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/commonly"/>

    <ImageView
        android:id="@+id/imageview_main_activity_django_python"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginLeft="75dp"
        android:layout_marginTop="400dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/django_python"/>

    <ImageView
        android:id="@+id/imageview_main_activity_mobile"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="180dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/mobile"/>

    <ImageView
        android:id="@+id/imageview_main_activity_but"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/but"/>

    <ImageView
        android:id="@+id/imageview_main_activity_diploma"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="250dp"
        android:layout_centerHorizontal="true"
        android:src="@drawable/diploma"/>

    <ImageView
        android:id="@+id/imageview_main_activity_why"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginBottom="50dp"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:src="@drawable/why"/>

    <ImageView
        android:id="@+id/imageview_main_future"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/future"/>

    <ImageView
        android:id="@+id/imageview_main_arduino"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageview_main_future"
        android:layout_marginTop="20dp"
        android:layout_marginLeft="50dp"
        android:src="@drawable/arduino"/>

    <ImageView
        android:id="@+id/imageview_main_raspberry_pi"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/imageview_main_arduino"
        android:layout_marginTop="40dp"
        android:layout_alignParentRight="true"
        android:layout_marginRight="50dp"
        android:src="@drawable/raspberry_pi_logo"/>

    <ImageView
        android:id="@+id/imageview_main_connected_device"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="75dp"
        android:layout_marginLeft="50dp"
        android:src="@drawable/connect_device"/>

    <ImageView
        android:id="@+id/imageview_main_check_out"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:src="@drawable/check_out"/>
    

    <ImageView
        android:id="@+id/textview_main_github_link"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:src="@drawable/android"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:textColor="@color/theme_700"
        android:layout_centerHorizontal="true"
        android:textAppearance="@android:style/TextAppearance.Large"
        android:layout_below="@id/imageview_main_check_out"/>


    <Button
        android:id="@+id/textview_main_linkedin_link"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_marginTop="50dp"
        android:text="Get started..."
        android:layout_margin="20dp"
        android:paddingLeft="20dp"
        android:paddingRight="20dp"
        android:layout_below="@id/textview_main_github_link"
        android:textStyle="bold"
        android:background="@color/colorPrimaryDark"
        android:textAppearance="@android:style/TextAppearance.Large"
        android:textColor="@color/white"/>

</RelativeLayout>

• Open WelcomeActivity.java and modify the code as below. 

package com.wappteh.codesolution;

import android.graphics.Point;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.os.Bundle;
import android.view.View;
import android.view.Window;
import android.view.WindowManager;

import com.dev.sacot41.scviewpager.DotsView;
import com.dev.sacot41.scviewpager.SCPositionAnimation;
import com.dev.sacot41.scviewpager.SCViewAnimation;
import com.dev.sacot41.scviewpager.SCViewAnimationUtil;
import com.dev.sacot41.scviewpager.SCViewPager;
import com.dev.sacot41.scviewpager.SCViewPagerAdapter;

public class WelcomeActivity extends FragmentActivity {

    private static final int NUM_PAGES = 5;

    private SCViewPager mViewPager;
    private SCViewPagerAdapter mPageAdapter;
    private DotsView mDotsView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);

        getWindow().requestFeature(Window.FEATURE_ACTION_BAR);
        getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);
        setContentView(R.layout.activity_welcome);

        mViewPager = (SCViewPager) findViewById(R.id.viewpager_main_activity);
        mDotsView = (DotsView) findViewById(R.id.dotsview_main);
        mDotsView.setDotRessource(R.drawable.dot_selected, R.drawable.dot_unselected);
        mDotsView.setNumberOfPage(NUM_PAGES);

        mPageAdapter = new SCViewPagerAdapter(getSupportFragmentManager());
        mPageAdapter.setNumberOfPage(NUM_PAGES);
        mPageAdapter.setFragmentBackgroundColor(R.color.theme_100);
        mViewPager.setAdapter(mPageAdapter);

        mViewPager.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {
            }

            @Override
            public void onPageSelected(int position) {
                mDotsView.selectDot(position);
            }

            @Override
            public void onPageScrollStateChanged(int state) {
            }
        });

        final Point size = SCViewAnimationUtil.getDisplaySize(this);

        View nameTag = findViewById(R.id.imageview_main_activity_name_tag);
        SCViewAnimation nameTagAnimation = new SCViewAnimation(nameTag);
        nameTagAnimation.addPageAnimation(new SCPositionAnimation(this, 0,0,-size.y/2));
        mViewPager.addAnimation(nameTagAnimation);

        View currentlyWork = findViewById(R.id.imageview_main_activity_currently_work);
        SCViewAnimation currentlyWorkAnimation = new SCViewAnimation(currentlyWork);
        currentlyWorkAnimation.addPageAnimation(new SCPositionAnimation(this, 0, -size.x, 0));
        mViewPager.addAnimation(currentlyWorkAnimation);

        View atSkex = findViewById(R.id.imageview_main_activity_at_skex);
        SCViewAnimationUtil.prepareViewToGetSize(atSkex);
        SCViewAnimation atSkexAnimation = new SCViewAnimation(atSkex);
        atSkexAnimation.addPageAnimation(new SCPositionAnimation(getApplicationContext(), 0, 0, -( size.y - atSkex.getHeight() )));
        atSkexAnimation.addPageAnimation(new SCPositionAnimation(getApplicationContext(), 1, -size.x, 0));
        mViewPager.addAnimation(atSkexAnimation);

        View mobileView = findViewById(R.id.imageview_main_activity_mobile);
        SCViewAnimation mobileAnimation = new SCViewAnimation(mobileView);
        mobileAnimation.startToPosition((int)(size.x*1.5), null);
        mobileAnimation.addPageAnimation(new SCPositionAnimation(this, 0, -(int)(size.x*1.5), 0));
        mobileAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -(int)(size.x*1.5), 0));
        mViewPager.addAnimation(mobileAnimation);

        View djangoView = findViewById(R.id.imageview_main_activity_django_python);
        SCViewAnimation djangoAnimation = new SCViewAnimation(djangoView);
        djangoAnimation.startToPosition(null, -size.y);
        djangoAnimation.addPageAnimation(new SCPositionAnimation(this, 0, 0, size.y));
        djangoAnimation.addPageAnimation(new SCPositionAnimation(this, 1, 0, size.y));
        mViewPager.addAnimation(djangoAnimation);

        View commonlyView = findViewById(R.id.imageview_main_activity_commonly);
        SCViewAnimation commonlyAnimation = new SCViewAnimation(commonlyView);
        commonlyAnimation.startToPosition(size.x, null);
        commonlyAnimation.addPageAnimation(new SCPositionAnimation(this, 0, -size.x, 0));
        commonlyAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x, 0));
        mViewPager.addAnimation(commonlyAnimation);

        View butView = findViewById(R.id.imageview_main_activity_but);
        SCViewAnimation butAnimation = new SCViewAnimation(butView);
        butAnimation.startToPosition(size.x, null);
        butAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x,0));
        butAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -size.x,0));
        mViewPager.addAnimation(butAnimation);

        View diplomeView = findViewById(R.id.imageview_main_activity_diploma);
        SCViewAnimation diplomeAnimation = new SCViewAnimation(diplomeView);
        diplomeAnimation.startToPosition((size.x *2), null);
        diplomeAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x*2,0));
        diplomeAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -size.x*2 ,0));
        mViewPager.addAnimation(diplomeAnimation);

        View whyView = findViewById(R.id.imageview_main_activity_why);
        SCViewAnimation whyAnimation = new SCViewAnimation(whyView);
        whyAnimation.startToPosition(size.x, null);
        whyAnimation.addPageAnimation(new SCPositionAnimation(this, 1, -size.x, 0));
        whyAnimation.addPageAnimation(new SCPositionAnimation(this, 2, -size.x, 0));
        mViewPager.addAnimation(whyAnimation);

        View futureView = findViewById(R.id.imageview_main_future);
        SCViewAnimation futureAnimation = new SCViewAnimation(futureView);
        futureAnimation.startToPosition(null, -size.y);
        futureAnimation.addPageAnimation(new SCPositionAnimation(this, 2, 0, size.y));
        futureAnimation.addPageAnimation(new SCPositionAnimation(this, 3, -size.x, 0));
        mViewPager.addAnimation(futureAnimation);

        View arduinoView = findViewById(R.id.imageview_main_arduino);
        SCViewAnimation arduinoAnimation = new SCViewAnimation(arduinoView);
        arduinoAnimation.startToPosition(size.x * 2, null);
        arduinoAnimation.addPageAnimation(new SCPositionAnimation(this, 2, - size.x *2, 0));
        arduinoAnimation.addPageAnimation(new SCPositionAnimation(this, 3, - size.x, 0));
        mViewPager.addAnimation(arduinoAnimation);