How to Create Intro Slider for Android App

Posted on July 14, 2017July 14, 2017 by kamal bunkar

Post Views: 2,225

A Intro Slider or Welcome Slider can take your app into another level. A intro slider on your Android app is one of the great ways to present the most important and major features of your app. In this article I am going to show you how to add an intro slider to your app where user can swipe through few slides before getting into app.

To demonstrate what is intro slider, I will create a sample app with couple of intro slides with a next and skip buttons. Below are the step I will discuss with you in this post.

Intro slider is build by ViewPager, so you can swap screen by fingers too. In real time android app intro slider display to user one time only, But in this post I am not including one time display function. You can use share preference to show intro slider only once on app launch.

If the user launches the app on second time, he should directly go to main screen. To achieve this, we use SharedPreferences to store a boolean value indicating first time launch.

1) Create Color code for slider
2) Create Introduction Of App
3) Create four Welcome Slider layout files
4) Create ViewPager on activity_welcome.xml
5) Control slider movement and make notification bar transparent
6) Run App on device

Login & Download source code

download-code350-100

Creating New Project

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

Create Color code for slider

First I will select four background color for slider. You can choose your favorite color that match with your app theme. It’s completely upto you how you design the intro screens considering the type of app you are building.

For this example, I am placing a big image in centre and few texts below it. At the bottom, number of dots are placed indicating the number of slides it has.For every screen we need three colors i.e background color and two dot colors when it is active / inactive.

Open colors.xml located under res ⇒ values and add the below color values. You can see after adding the colors, I have kept them into arrays array_dot_active and array_dot_inactive, so that we can load them easily in our activity.

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>

    <!-- Screens background color-->
    <color name="bg_screen1">#d11141</color>
    <color name="bg_screen2">#00aedb</color>
    <color name="bg_screen3">#03396c</color>
    <color name="bg_screen4">#be29ec</color>

    <!-- dots inactive colors -->
    <color name="dot_dark_screen1">#d1395c</color>
    <color name="dot_dark_screen2">#14a895</color>
    <color name="dot_dark_screen3">#2278d4</color>
    <color name="dot_dark_screen4">#a854d4</color>

    <!-- dots active colors -->
    <color name="dot_light_screen1">#f98da5</color>
    <color name="dot_light_screen2">#8cf9eb</color>
    <color name="dot_light_screen3">#93c6fd</color>
    <color name="dot_light_screen4">#e4b5fc</color>

    <array name="array_dot_active">
        <item>@color/dot_light_screen1</item>
        <item>@color/dot_light_screen2</item>
        <item>@color/dot_light_screen3</item>
        <item>@color/dot_light_screen4</item>
    </array>

    <array name="array_dot_inactive">
        <item>@color/dot_dark_screen1</item>
        <item>@color/dot_dark_screen2</item>
        <item>@color/dot_dark_screen3</item>
        <item>@color/dot_dark_screen4</item>
    </array>
</resources>

<?xml version="1.0" encoding="utf-8"?>

<item>@color/dot_light_screen1</item>

<item>@color/dot_light_screen2</item>

<item>@color/dot_light_screen3</item>

<item>@color/dot_light_screen4</item>

</array>

<item>@color/dot_dark_screen1</item>

<item>@color/dot_dark_screen2</item>

<item>@color/dot_dark_screen3</item>

<item>@color/dot_dark_screen4</item>

</array>

</resources>

Write Introduction of App

Open strings.xml located under res ⇒ values and add the below string values. Here I am mentioning a title and description for each slide.

<resources>
    <string name="app_name">Welcome Slider</string>
    <string name="title_activity_welcome">Home Screen</string>
    <string name="next">NEXT</string>
    <string name="skip">SKIP</string>
    <string name="start">GOT IT</string>

    <string name="slide_1_title">Cycling!</string>
    <string name="slide_1_desc">My passion for cycling never that much amazing before!</string>

    <string name="slide_2_title">Bike Ride</string>
    <string name="slide_2_desc">I love long drive bike ride with my friends!</string>

    <string name="slide_3_title">Pool Swimming</string>
    <string name="slide_3_desc">I can spend hours in swimmng pool with some food!</string>

    <string name="slide_4_title">Rowing</string>
    <string name="slide_4_desc">Wonder thunder ride in rowing in river always amazing!</string>

    <string name="welcomescreen"> Welcome to Home Screen</string>

</resources>

<string name="app_name">Welcome Slider</string>

<string name="title_activity_welcome">Home Screen</string>

<string name="slide_1_title">Cycling!</string>

<string name="slide_1_desc">My passion for cycling never that much amazing before!</string>

<string name="slide_2_desc">I love long drive bike ride with my friends!</string>

<string name="slide_3_title">Pool Swimming</string>

<string name="slide_3_desc">I can spend hours in swimmng pool with some food!</string>

<string name="slide_4_title">Rowing</string>

<string name="slide_4_desc">Wonder thunder ride in rowing in river always amazing!</string>

<string name="welcomescreen"> Welcome to Home Screen</string>

</resources>

dimens.xml

<resources>
    <!-- Default screen margins, per the Android Design guidelines. -->
    <dimen name="activity_horizontal_margin">16dp</dimen>
    <dimen name="activity_vertical_margin">16dp</dimen>
    <dimen name="fab_margin">16dp</dimen>
    <dimen name="dots_height">30dp</dimen>
    <dimen name="dots_margin_bottom">20dp</dimen>
    <dimen name="img_width_height">120dp</dimen>
    <dimen name="slide_title">30dp</dimen>
    <dimen name="slide_desc">16dp</dimen>
    <dimen name="desc_padding">40dp</dimen>
</resources>

</resources>

Create four Welcome Slider layout xml files

Now I am going to create 4 layout file, each layout file will represent to one of the slider. So quickly create four xml layouts named welcome_side1.xml, welcome_side2.xml, welcome_side3.xml and welcome_side4.xml under res ⇒ layouts.

welcome_slider1.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="match_parent"
    android:background="@color/bg_screen1">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:layout_width="@dimen/img_width_height"
            android:layout_height="@dimen/img_width_height"
            android:src="@mipmap/ic_directions_bike" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/slide_1_title"
            android:textColor="@android:color/white"
            android:textSize="@dimen/slide_title"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:paddingLeft="@dimen/desc_padding"
            android:paddingRight="@dimen/desc_padding"
            android:text="@string/slide_1_desc"
            android:textAlignment="center"
            android:textColor="@android:color/white"
            android:textSize="@dimen/slide_desc" />

    </LinearLayout>


</RelativeLayout>

<?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"

android:background="@color/bg_screen1">

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:gravity="center_horizontal"

android:orientation="vertical">

<ImageView

android:layout_width="@dimen/img_width_height"

android:layout_height="@dimen/img_width_height"

android:src="@mipmap/ic_directions_bike" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/slide_1_title"

android:textColor="@android:color/white"

android:textSize="@dimen/slide_title"

android:textStyle="bold" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"

android:paddingLeft="@dimen/desc_padding"

android:paddingRight="@dimen/desc_padding"

android:text="@string/slide_1_desc"

android:textAlignment="center"

android:textColor="@android:color/white"

android:textSize="@dimen/slide_desc" />

</LinearLayout>

</RelativeLayout>

welcome_slider2.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="match_parent"
    android:background="@color/bg_screen2">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:layout_width="@dimen/img_width_height"
            android:layout_height="@dimen/img_width_height"
            android:src="@mipmap/ic_motorcycle_white_48dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/slide_2_title"
            android:textColor="@android:color/white"
            android:textSize="@dimen/slide_title"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:paddingLeft="@dimen/desc_padding"
            android:paddingRight="@dimen/desc_padding"
            android:text="@string/slide_2_desc"
            android:textAlignment="center"
            android:textColor="@android:color/white"
            android:textSize="@dimen/slide_desc" />

    </LinearLayout>


</RelativeLayout>

<?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"

android:background="@color/bg_screen2">

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:gravity="center_horizontal"

android:orientation="vertical">

<ImageView

android:layout_width="@dimen/img_width_height"

android:layout_height="@dimen/img_width_height"

android:src="@mipmap/ic_motorcycle_white_48dp" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/slide_2_title"

android:textColor="@android:color/white"

android:textSize="@dimen/slide_title"

android:textStyle="bold" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"

android:paddingLeft="@dimen/desc_padding"

android:paddingRight="@dimen/desc_padding"

android:text="@string/slide_2_desc"

android:textAlignment="center"

android:textColor="@android:color/white"

android:textSize="@dimen/slide_desc" />

</LinearLayout>

</RelativeLayout>

welcome_slider3.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="match_parent"
    android:background="@color/bg_screen3">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:layout_width="@dimen/img_width_height"
            android:layout_height="@dimen/img_width_height"
            android:src="@mipmap/ic_pool_white_48dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/slide_3_title"
            android:textColor="@android:color/white"
            android:textSize="@dimen/slide_title"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:paddingLeft="@dimen/desc_padding"
            android:paddingRight="@dimen/desc_padding"
            android:text="@string/slide_3_desc"
            android:textAlignment="center"
            android:textColor="@android:color/white"
            android:textSize="@dimen/slide_desc" />

    </LinearLayout>

</RelativeLayout>

<?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"

android:background="@color/bg_screen3">

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:gravity="center_horizontal"

android:orientation="vertical">

<ImageView

android:layout_width="@dimen/img_width_height"

android:layout_height="@dimen/img_width_height"

android:src="@mipmap/ic_pool_white_48dp" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/slide_3_title"

android:textColor="@android:color/white"

android:textSize="@dimen/slide_title"

android:textStyle="bold" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"

android:paddingLeft="@dimen/desc_padding"

android:paddingRight="@dimen/desc_padding"

android:text="@string/slide_3_desc"

android:textAlignment="center"

android:textColor="@android:color/white"

android:textSize="@dimen/slide_desc" />

</LinearLayout>

</RelativeLayout>

welcome_slider4.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="match_parent"
    android:background="@color/bg_screen4">

    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:gravity="center_horizontal"
        android:orientation="vertical">

        <ImageView
            android:layout_width="@dimen/img_width_height"
            android:layout_height="@dimen/img_width_height"
            android:src="@mipmap/ic_rowing_white_48dp" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="@string/slide_4_title"
            android:textColor="@android:color/white"
            android:textSize="@dimen/slide_title"
            android:textStyle="bold" />

        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_marginTop="20dp"
            android:paddingLeft="@dimen/desc_padding"
            android:paddingRight="@dimen/desc_padding"
            android:text="@string/slide_4_desc"
            android:textAlignment="center"
            android:textColor="@android:color/white"
            android:textSize="@dimen/slide_desc" />

    </LinearLayout>

</RelativeLayout>

<?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"

android:background="@color/bg_screen4">

<LinearLayout

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:gravity="center_horizontal"

android:orientation="vertical">

<ImageView

android:layout_width="@dimen/img_width_height"

android:layout_height="@dimen/img_width_height"

android:src="@mipmap/ic_rowing_white_48dp" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="@string/slide_4_title"

android:textColor="@android:color/white"

android:textSize="@dimen/slide_title"

android:textStyle="bold" />

<TextView

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="20dp"

android:paddingLeft="@dimen/desc_padding"

android:paddingRight="@dimen/desc_padding"

android:text="@string/slide_4_desc"

android:textAlignment="center"

android:textColor="@android:color/white"

android:textSize="@dimen/slide_desc" />

</LinearLayout>

</RelativeLayout>

Create ViewPager on activity_welcome.xml

Open activity_welcome.xml and modify the code as below. Here I am adding ViewPager for slider, LinearLayout for bottom dots and two buttons for Skip and Next navigation.

<?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:showIn="@layout/activity_welcome">


    <android.support.v4.view.ViewPager
        android:id="@+id/view_pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <LinearLayout
        android:id="@+id/layoutDots"
        android:layout_width="match_parent"
        android:layout_height="@dimen/dots_height"
        android:layout_alignParentBottom="true"
        android:layout_marginBottom="@dimen/dots_margin_bottom"
        android:gravity="center"
        android:orientation="horizontal"></LinearLayout>

    <View
        android:layout_width="match_parent"
        android:layout_height="1dp"
        android:alpha=".5"
        android:layout_above="@id/layoutDots"
        android:background="@android:color/white" />

    <Button
        android:id="@+id/btn_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@null"
        android:text="@string/next"
        android:textColor="@android:color/white" />

    <Button
        android:id="@+id/btn_skip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:background="@null"
        android:text="@string/skip"
        android:textColor="@android:color/white" />

</RelativeLayout>

<?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:showIn="@layout/activity_welcome">

<android.support.v4.view.ViewPager

android:id="@+id/view_pager"

android:layout_width="match_parent"

android:layout_height="match_parent" />

<LinearLayout

android:id="@+id/layoutDots"

android:layout_width="match_parent"

android:layout_height="@dimen/dots_height"

android:layout_alignParentBottom="true"

android:layout_marginBottom="@dimen/dots_margin_bottom"

android:gravity="center"

android:orientation="horizontal"></LinearLayout>

<View

android:layout_width="match_parent"

android:layout_height="1dp"

android:alpha=".5"

android:layout_above="@id/layoutDots"

android:background="@android:color/white" />

<Button

android:id="@+id/btn_next"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:background="@null"

android:text="@string/next"

android:textColor="@android:color/white" />

<Button

android:id="@+id/btn_skip"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:background="@null"

android:text="@string/skip"

android:textColor="@android:color/white" />

</RelativeLayout>

Create WelcomeActivity.java to control slider movement

Create a new java file name as WelcomeActivity.java . I am going to create a PagerAdapter for the ViewPager and inflated all the layouts we created earlier.

Added click event listener to Skip and Next buttons. If next button is clicked, next slide will be shown. If Skip button is clicked, main activity will be launched directly.

Also notification bar color should be change with slider movement. So to achieve this behavior I first check API version must be great than 21 than set windows setting.

package blueappsoftware.welcomeslider;

import android.content.Context;
import android.content.Intent;
import android.graphics.Color;
import android.os.Build;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.text.Html;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.view.Window;
import android.view.WindowManager;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class WelcomeActivity extends AppCompatActivity {

    private ViewPager viewPager;
    private MyViewPagerAdapter myViewPagerAdapter;
    private LinearLayout dotsLayout;
    private TextView[] dots;
    private int[] layouts;
    private Button btnSkip, btnNext;


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

        // Making notification bar transparent
        if (Build.VERSION.SDK_INT >= 21) {
            getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);
        }

        setContentView(R.layout.activity_welcome);

        viewPager = (ViewPager) findViewById(R.id.view_pager);
        dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);
        btnSkip = (Button) findViewById(R.id.btn_skip);
        btnNext = (Button) findViewById(R.id.btn_next);


        // layouts of all welcome sliders
        // add few more layouts if you want
        layouts = new int[]{
                R.layout.welcome_slide1,
                R.layout.welcome_slide2,
                R.layout.welcome_slide3,
                R.layout.welcome_slide4};

        // adding bottom dots
        addBottomDots(0);

        // making notification bar transparent
        changeStatusBarColor();

        myViewPagerAdapter = new MyViewPagerAdapter();
        viewPager.setAdapter(myViewPagerAdapter);
        viewPager.addOnPageChangeListener(viewPagerPageChangeListener);

        btnSkip.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                launchHomeScreen();
            }
        });

        btnNext.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                // checking for last page
                // if last page home screen will be launched
                int current = getItem(+1);
                if (current < layouts.length) {
                    // move to next screen
                    viewPager.setCurrentItem(current);
                } else {
                    launchHomeScreen();
                }
            }
        });
    }

    private void addBottomDots(int currentPage) {
        dots = new TextView[layouts.length];

        int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);
        int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);

        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);
            dots[i].setTextColor(colorsInactive[currentPage]);
            dotsLayout.addView(dots[i]);
        }

        if (dots.length > 0)
            dots[currentPage].setTextColor(colorsActive[currentPage]);
    }

    private int getItem(int i) {
        return viewPager.getCurrentItem() + i;
    }

    private void launchHomeScreen() {

        startActivity(new Intent(WelcomeActivity.this, MainActivity.class));
        finish();
    }

    //	viewpager change listener
    ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

        @Override
        public void onPageSelected(int position) {
            addBottomDots(position);

            // changing the next button text 'NEXT' / 'GOT IT'
            if (position == layouts.length - 1) {
                // last page. make button text to GOT IT
                btnNext.setText(getString(R.string.start));
                btnSkip.setVisibility(View.GONE);
            } else {
                // still pages are left
                btnNext.setText(getString(R.string.next));
                btnSkip.setVisibility(View.VISIBLE);
            }
        }

        @Override
        public void onPageScrolled(int arg0, float arg1, int arg2) {

        }

        @Override
        public void onPageScrollStateChanged(int arg0) {

        }
    };

    /**
     * Making notification bar transparent
     */
    private void changeStatusBarColor() {
        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);
        }
    }

    /**
     * View pager adapter
     */
    public class MyViewPagerAdapter extends PagerAdapter {
        private LayoutInflater layoutInflater;

        public MyViewPagerAdapter() {
        }

        @Override
        public Object instantiateItem(ViewGroup container, int position) {
            layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

            View view = layoutInflater.inflate(layouts[position], container, false);
            container.addView(view);

            return view;
        }

        @Override
        public int getCount() {
            return layouts.length;
        }

        @Override
        public boolean isViewFromObject(View view, Object obj) {
            return view == obj;
        }


        @Override
        public void destroyItem(ViewGroup container, int position, Object object) {
            View view = (View) object;
            container.removeView(view);
        }
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

package blueappsoftware.welcomeslider;

import android.content.Context;

import android.content.Intent;

import android.graphics.Color;

import android.os.Build;

import android.os.Bundle;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.text.Html;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.view.Window;

import android.view.WindowManager;

import android.widget.Button;

import android.widget.LinearLayout;

import android.widget.TextView;

public class WelcomeActivity extends AppCompatActivity {

private ViewPager viewPager;

private MyViewPagerAdapter myViewPagerAdapter;

private LinearLayout dotsLayout;

private TextView[] dots;

private int[] layouts;

private Button btnSkip, btnNext;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

// Making notification bar transparent

if (Build.VERSION.SDK_INT >= 21) {

getWindow().getDecorView().setSystemUiVisibility(View.SYSTEM_UI_FLAG_LAYOUT_STABLE | View.SYSTEM_UI_FLAG_LAYOUT_FULLSCREEN);

}

setContentView(R.layout.activity_welcome);

viewPager = (ViewPager) findViewById(R.id.view_pager);

dotsLayout = (LinearLayout) findViewById(R.id.layoutDots);

btnSkip = (Button) findViewById(R.id.btn_skip);

btnNext = (Button) findViewById(R.id.btn_next);

// layouts of all welcome sliders

// add few more layouts if you want

layouts = new int[]{

R.layout.welcome_slide1,

R.layout.welcome_slide2,

R.layout.welcome_slide3,

R.layout.welcome_slide4};

// adding bottom dots

addBottomDots(0);

// making notification bar transparent

changeStatusBarColor();

myViewPagerAdapter = new MyViewPagerAdapter();

viewPager.setAdapter(myViewPagerAdapter);

viewPager.addOnPageChangeListener(viewPagerPageChangeListener);

btnSkip.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

launchHomeScreen();

}

});

btnNext.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

// checking for last page

// if last page home screen will be launched

int current = getItem(+1);

if (current < layouts.length) {

// move to next screen

viewPager.setCurrentItem(current);

} else {

launchHomeScreen();

}

});

}

private void addBottomDots(int currentPage) {

dots = new TextView[layouts.length];

int[] colorsActive = getResources().getIntArray(R.array.array_dot_active);

int[] colorsInactive = getResources().getIntArray(R.array.array_dot_inactive);

dotsLayout.removeAllViews();

for (int i = 0; i < dots.length; i++) {

dots[i] = new TextView(this);

dots[i].setText(Html.fromHtml("•"));

dots[i].setTextSize(35);

dots[i].setTextColor(colorsInactive[currentPage]);

dotsLayout.addView(dots[i]);

}

if (dots.length > 0)

dots[currentPage].setTextColor(colorsActive[currentPage]);

}

private int getItem(int i) {

return viewPager.getCurrentItem() + i;

}

private void launchHomeScreen() {

startActivity(new Intent(WelcomeActivity.this, MainActivity.class));

finish();

}

// viewpager change listener

ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() {

@Override

public void onPageSelected(int position) {

addBottomDots(position);

// changing the next button text 'NEXT' / 'GOT IT'

if (position == layouts.length - 1) {

// last page. make button text to GOT IT

btnNext.setText(getString(R.string.start));

btnSkip.setVisibility(View.GONE);

} else {

// still pages are left

btnNext.setText(getString(R.string.next));

btnSkip.setVisibility(View.VISIBLE);

}

@Override

public void onPageScrolled(int arg0, float arg1, int arg2) {

}

@Override

public void onPageScrollStateChanged(int arg0) {

}

};

/**

* Making notification bar transparent

private void changeStatusBarColor() {

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);

}

/**

* View pager adapter

public class MyViewPagerAdapter extends PagerAdapter {

private LayoutInflater layoutInflater;

public MyViewPagerAdapter() {

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE);

View view = layoutInflater.inflate(layouts[position], container, false);

container.addView(view);

return view;

}

@Override

public int getCount() {

return layouts.length;

}

@Override

public boolean isViewFromObject(View view, Object obj) {

return view == obj;

}

@Override

public void destroyItem(ViewGroup container, int position, Object object) {

View view = (View) object;

container.removeView(view);

}

Finally open AndroidManifest.xml and make WelcomeActivity as launcher activity. So that it will be shown as the first screen in the app.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="blueappsoftware.welcomeslider">

    <application
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        <activity android:name=".WelcomeActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_welcome">

        </activity>
    </application>


</manifest>

<?xml version="1.0" encoding="utf-8"?>

<manifest xmlns:android="http://schemas.android.com/apk/res/android"

package="blueappsoftware.welcomeslider">

<application

android:allowBackup="true"

android:icon="@mipmap/ic_launcher"

android:label="@string/app_name"

android:supportsRtl="true"

android:theme="@style/AppTheme">

<intent-filter>

</intent-filter>

</activity>

<activity

android:name=".MainActivity"

android:label="@string/title_activity_welcome">

</activity>

</application>

</manifest>

Now run the app on android device. Your Intro slider is ready to tell the story of your app.

Do you want more premium intro slider for your App?

Posted in andorid.

kamal bunkar

I Am Post Graduation (M.Tech. C.S.E) from VNIT, Nagpur. I Have Published Two Research Paper On International Journal. My Apps on Google Play Store- Sanyukt Parivar(Mp Police ), NOTOtag- Digital Chhindwara, The Tubby-VoiceRecognizer & More.
Contact me at kamal.bunkar@blueappsoftware.in

33 Comments

A WordPress Commenter

November 30, 2016 at 5:25 pm

Hi, this is a comment.
To get started with moderating, editing, and deleting comments, please visit the Comments screen in the dashboard.
Commenter avatars come from Gravatar.
Cisco Academy Login

May 21, 2017 at 7:27 pm

Hey nice post. I hope it’s alright that I shared it on my FB,
if not, no issues just let me know and I’ll remove it.
Regardless keep up the good work.
- admin
  
  June 12, 2017 at 4:04 pm
  
  yes, you can share it.
Nonton Anime Subtitle Indonesia

May 28, 2017 at 9:42 am

Hello, i think that i saw you visited my blog so i came to “return the favor”.I’m attempting to find things to
enhance my website!I suppose its ok to use some of
your ideas!!
Animeindo

June 10, 2017 at 9:47 pm

I love your blog.. very nice colors & theme. Did you create this
website yourself or did you hire someone to do it for you?
Plz respond as I’m looking to create my own blog and would like to find
out where u got this from. appreciate it
- admin
  
  June 12, 2017 at 3:57 pm
  
  yes, i created this blog by my self. I did some customization on wordpress theme too.
Nonton Movie Bahasa Indonesia

June 28, 2017 at 8:53 pm

Pretty great post. I just stumbled upon your weblog and wanted to say
that I’ve truly loved browsing your blog posts.
In any case I’ll be subscribing for your feed and I hope you write once more very soon!
Wayfair Coupon Code

July 10, 2017 at 4:49 pm

Hi there! This post could not be written any better!
Reading through this post reminds me of my good old room mate!
He always kept talking about this. I will forward this article to him.
Fairly certain he will have a good read. Thank you for sharing!
Download Jav Online Free - JavPlay

July 10, 2017 at 10:12 pm

Hi there! Quick question that’s totally off topic.
Do you know how to make your site mobile friendly?
My weblog looks weird when browsing from my iphone4.
I’m trying to find a template or plugin that might
be able to fix this issue. If you have any recommendations, please share.
Thank you!
- kamal bunkar
  
  July 28, 2017 at 1:51 pm
  
  hey you can use wordpress plugin WPtouch to make your website mobile friendly.
cat compilation

July 13, 2017 at 6:59 am

This is really attention-grabbing, You are an overly skilled blogger.
I have joined your feed and look forward to in the hunt
for extra of your great post. Also, I have shared your site in my social networks
cat fail compilation

July 13, 2017 at 8:56 pm

I have read so many content regarding the blogger lovers except this post is
in fact a good paragraph, keep it up.
gameappsforphone.com

July 14, 2017 at 2:58 am

I’m really enjoying the theme/design of your blog.

Do you ever run into any browser compatibility issues?

A few of my blog audience have complained about my site not
working correctly in Explorer but looks great in Chrome.
Do you have any solutions to help fix this issue?
gamesbotol.com

July 15, 2017 at 4:57 am

Very nice article, exactly what I wanted to find.
onlinemodhack.us

July 15, 2017 at 5:46 pm

I was recommended this web site by my cousin. I’m
not sure whether this post is written by him as no one else
know such detailed about my problem. You are wonderful!

Thanks!
http://vsemsmart.ru

July 16, 2017 at 7:41 am

What’s up, I check your blogs like every week. Your
humoristic style is awesome, keep it up!
- kamal bunkar
  
  July 28, 2017 at 1:37 pm
  
  thanks … your response it important for me.
The Mummy 2017 Film Completo Online Gratis - Italiano HD

July 18, 2017 at 2:37 am

Hey I know this is off topic but I was wondering if you knew of any widgets I could add to my blog that automatically tweet my newest twitter updates.
I’ve been looking for a plug-in like this for quite some time and was hoping maybe you would have some experience with something like this.
Please let me know if you run into anything. I truly enjoy reading your
blog and I look forward to your new updates.
- kamal bunkar
  
  July 26, 2017 at 10:47 am
  
  you can use RSS feed or buffer to connect your website with your twitter account.
agen sbobet

July 21, 2017 at 12:51 am

Having read this I thought it was very informative. I appreciate you finding the time and
energy to put this short article together. I once again find myself personally spending a lot of time both reading and posting comments.
But so what, it was still worthwhile!
kabar terbaru 2017

July 23, 2017 at 9:40 am

If you want to increase your experience simply keep
visiting this web site and be updated with the hottest information posted here.
lolol

July 23, 2017 at 6:53 pm

hi! may i know is your code complete? because i run the program and does nothing, i have download the given source code.
- kamal bunkar
  
  July 26, 2017 at 10:33 am
  
  Yes this code is working…You have to create file on php server to store FCM key into your database for future use. First check on your android studio log whether FCM token is printing OR not. If it is printing in log than send token to your web server.
bursa lirik lagu

July 24, 2017 at 1:37 am

Good day! I could have sworn I’ve been to
this website before but after going through
a few of the articles I realized it’s new to me.

Nonetheless, I’m certainly delighted I found it and I’ll be book-marking it and checking back regularly!
- kamal bunkar
  
  July 26, 2017 at 10:30 am
  
  Thanks, You support are very important to us.I will keep posting new articles.
sùi mào gà

July 24, 2017 at 2:00 am

What’s up to all, it’s genuinely a fastidious for me to pay a visit this site, it consists of
priceless Information.
apkgenerator.us

July 24, 2017 at 8:53 pm

Spot on with this write-up, I absolutely feel this website needs much more attention. I’ll probably be returning to read
through more, thanks for the info!
Shihtzaki

July 26, 2017 at 10:09 pm

superowa witryna
Watch Jav Online Free

July 27, 2017 at 9:12 pm

It’s amazing to go to see this site and reading the views of all
colleagues on the topic of this article, while I am also eager of getting familiarity.
Holley

August 4, 2017 at 9:38 am

Hey very cool website!! Man .. Excellent ..
Amazing .. I will bookmark your site and take the feeds additionally?
I am glad to search out numerous useful info here
in the submit, we need work out more strategies
on this regard, thanks for sharing. . . . . .
Pingback: ExoPlayer Android Example- Best Alternative of VideoView By Kamal
Pingback: Simplest way to get WordPress Post in Android App- REST API
Judi Slots Online

November 26, 2017 at 8:31 am

I just like the helpful information you supply to your articles.

I’ll bookmark your blog and test once more here frequently.
I’m fairly sure I will learn many new stuff proper here!
Good luck for the following!