Android Intro Slider using ViewPager Tutorial with Example

IntroSlider using ViewPager in Android Tutorial Example

what is Intro Slider in Android ?

Intro Slider is implement a welcome slider screen which is introduces the major features of the app. In this slider is introduction on the app. it can be given where the user can swipe through the sliders before launching the application.

Intro Slider is the first screen in an APP that is used to display the highlights of application during the first launch of the app.

Intro Slider is used to ViewPager Widget in android. it is multiple layout file to display introduction in you app. when you can use Splash screen it can when your app is launched to display some time in background process.

but Intro Slider is a does not background process and timing. it is user can swipe left to right or user can click to bottom button in next previous then it is changes of different different layout design and introduction in you app.

now in this layout file when you can last one is layout file show then click on finish layout to display your main activity screen.

intro slider mostly one time display show when you can first time install app to display intro slider or you can uninstall and then install to display intro slider but it can second time open app to does not display intro slider. many apps is follow this methods.

you can every time display intro slider when your app is launched.

Intro slider use view pager and then create pager adapter to display layout files. now you can one time intro show on your app so you can use shared preference stored value and then check value to one time is displayed or not.

Example of Intro Slider with ViewPager in Android And How to build Intro Slider in Android

Implement dependency in your app level build.gradle file.

implementation 'com.android.support:design:28.0.0'

1	implementation 'com.android.support:design:28.0.0'

Create activity_main.xml File Follow this code.

<?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:context=".MainActivity">

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

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="30dp"
        android:id="@+id/dotLayout"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        android:gravity="center"
        android:orientation="horizontal"
        android:layout_marginBottom="20dp"/>

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

    <TextView
        android:id="@+id/btn_skip"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:text="Start"
        android:textColor="#FFFFFF"
        android:textSize="20dp"
        android:background="@null"
        android:layout_marginLeft="10dp"
        android:layout_marginBottom="8dp"
        />

    <TextView
        android:id="@+id/btn_next"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Next"
        android:textColor="#FFFFFF"
        android:textSize="20dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:background="@null"
        android:layout_marginRight="10dp"
        android:layout_marginBottom="8dp"
        />

</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:context=".MainActivity">

<android.support.v4.view.ViewPager

android:layout_width="match_parent"

android:layout_height="match_parent"

android:id="@+id/view_pager"/>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="30dp"

android:id="@+id/dotLayout"

android:layout_centerHorizontal="true"

android:layout_alignParentBottom="true"

android:gravity="center"

android:orientation="horizontal"

android:layout_marginBottom="20dp"/>

<View

android:layout_width="match_parent"

android:layout_height="1dp"

android:alpha=".5"

android:layout_above="@id/dotLayout"

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

<TextView

android:id="@+id/btn_skip"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_alignParentBottom="true"

android:layout_alignParentLeft="true"

android:text="Start"

android:textColor="#FFFFFF"

android:textSize="20dp"

android:background="@null"

android:layout_marginLeft="10dp"

android:layout_marginBottom="8dp"

<TextView

android:id="@+id/btn_next"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:text="Next"

android:textColor="#FFFFFF"

android:textSize="20dp"

android:layout_alignParentBottom="true"

android:layout_alignParentRight="true"

android:background="@null"

android:layout_marginRight="10dp"

android:layout_marginBottom="8dp"

</RelativeLayout>

Create res/drawable resource is active_dots.xml File.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" android:useLevel="true"
    android:dither="true">

    <size android:height="8dp" android:width="8dp" />

    <solid android:color="#fff" />

</shape>

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

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

android:shape="oval" android:useLevel="true"

android:dither="true">

</shape>

Create res/drawable resource is default_dots.xml File.

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="oval" android:useLevel="true"
    android:dither="true">

    <size android:width="8dp" android:height="8dp" />

    <solid android:color="#595959" />

</shape>

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

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

android:shape="oval" android:useLevel="true"

android:dither="true">

</shape>

Create first_slide.xml layout file follow this code.

<?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="#746216">

    <TextView
        android:id="@+id/tv_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="10dp"
        android:text="First Slider"
        android:textColor="#fff"
        android:textSize="18dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:textStyle="normal"
        />
</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="#746216">

<TextView

android:id="@+id/tv_first"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_marginTop="10dp"

android:text="First Slider"

android:textColor="#fff"

android:textSize="18dp"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp"

android:textStyle="normal"

</RelativeLayout>

Create second_slide.xml layout file follow this code.

<?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="#415b5e">

    <TextView
        android:id="@+id/tv_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:layout_marginTop="10dp"
        android:text="Second Slider"
        android:textColor="#fff"
        android:textSize="18dp"
        android:textStyle="normal"
        />
</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="#415b5e">

<TextView

android:id="@+id/tv_first"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp"

android:layout_marginTop="10dp"

android:text="Second Slider"

android:textColor="#fff"

android:textSize="18dp"

android:textStyle="normal"

</RelativeLayout>

Create third_slide.xml layout file follow this code.

<?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="#8a5791">

    <TextView
        android:id="@+id/tv_first"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_centerInParent="true"
        android:layout_marginTop="10dp"
        android:text="Third Slider"
        android:textColor="#fff"
        android:textSize="18dp"
        android:layout_marginLeft="10dp"
        android:layout_marginRight="10dp"
        android:textStyle="normal"
        />

</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="#8a5791">

<TextView

android:id="@+id/tv_first"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_centerInParent="true"

android:layout_marginTop="10dp"

android:text="Third Slider"

android:textColor="#fff"

android:textSize="18dp"

android:layout_marginLeft="10dp"

android:layout_marginRight="10dp"

android:textStyle="normal"

</RelativeLayout>

Create MainActivity.java File Follow this Code.

package com.bhaumik;

import android.content.Intent;
import android.content.SharedPreferences;
import android.os.Build;
import android.support.v4.content.ContextCompat;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.view.ViewGroup;
import android.view.WindowManager;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {
    ViewPager viewPager;
    int[] layouts = {R.layout.first_slide,R.layout.second_slide,R.layout.third_slide};

    MyAdapter myAdapter;

    ImageView[] imageViews;

    TextView btn_skip,btn_next;
    SharedPreferences sharedPreferences;
    SharedPreferences.Editor editor;
    String check;
    LinearLayout linearLayout;

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

        viewPager = findViewById(R.id.view_pager);
        btn_skip = findViewById(R.id.btn_skip);
        btn_next = findViewById(R.id.btn_next);
        linearLayout = findViewById(R.id.dotLayout);

        sharedPreferences = getSharedPreferences("Demo",MODE_PRIVATE);

        boolean status = false;

        check = sharedPreferences.getString("CHECK","");

        /*if (checkStatus()){
            SkipActivity();
        }*/

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

            getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

        }else{

            getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);
        }

        myAdapter = new MyAdapter(layouts,MainActivity.this);
        viewPager.setAdapter(myAdapter);

        CreateDots(0);

        viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {
            @Override
            public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

            }

            @Override
            public void onPageSelected(int position) {

                CreateDots(position);

                if (position == layouts.length-1){
                    btn_next.setText("Start");
                    btn_skip.setVisibility(View.INVISIBLE);
                }else{

                    btn_next.setText("Next");
                    btn_skip.setVisibility(View.VISIBLE);

                }
            }

            @Override
            public void onPageScrollStateChanged(int state) {

            }
        });

        btn_skip.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                editor = sharedPreferences.edit();
                editor.putString("CHECK","true");
                editor.commit();

                SkipActivity();

            }
        });

        btn_next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {

                int next = viewPager.getCurrentItem() + 1;

                if (next<layouts.length){

                    viewPager.setCurrentItem(next);
                }else{

                    SkipActivity();
                    editor = sharedPreferences.edit();
                    editor.putString("CHECK","true");
                    editor.commit();

                }

            }
        });

    }

    private void SkipActivity() {
        startActivity(new Intent(MainActivity.this,WelcomeActivity.class));
        finish();
    }

    public void CreateDots(int position){

        if (linearLayout != null){
            linearLayout.removeAllViews();
        }

        imageViews = new ImageView[layouts.length];

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

            imageViews[i] = new ImageView(this);

            if (i == position){

                imageViews[i].setImageDrawable(ContextCompat.getDrawable(this,R.drawable.active_dots));
            }else{
                imageViews[i].setImageDrawable(ContextCompat.getDrawable(this,R.drawable.default_dots));
            }

            LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,
                    ViewGroup.LayoutParams.WRAP_CONTENT);

            params.setMargins(5,0,5,0);

            linearLayout.addView(imageViews[i],params);

        }
    }

    public boolean checkStatus(){

        boolean status = false;

        if (sharedPreferences.getString("CHECK","null").equals("null")){
            status = false;
        }else{
            status = true;
        }
        return status;
    }
}

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

package com.bhaumik;

import android.content.Intent;

import android.content.SharedPreferences;

import android.os.Build;

import android.support.v4.content.ContextCompat;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.view.View;

import android.view.ViewGroup;

import android.view.WindowManager;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

ViewPager viewPager;

int[] layouts = {R.layout.first_slide,R.layout.second_slide,R.layout.third_slide};

MyAdapter myAdapter;

ImageView[] imageViews;

TextView btn_skip,btn_next;

SharedPreferences sharedPreferences;

SharedPreferences.Editor editor;

String check;

LinearLayout linearLayout;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

getSupportActionBar().hide();

viewPager = findViewById(R.id.view_pager);

btn_skip = findViewById(R.id.btn_skip);

btn_next = findViewById(R.id.btn_next);

linearLayout = findViewById(R.id.dotLayout);

sharedPreferences = getSharedPreferences("Demo",MODE_PRIVATE);

boolean status = false;

check = sharedPreferences.getString("CHECK","");

/*if (checkStatus()){

SkipActivity();

}*/

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

getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

}else{

getWindow().clearFlags(WindowManager.LayoutParams.FLAG_TRANSLUCENT_STATUS);

}

myAdapter = new MyAdapter(layouts,MainActivity.this);

viewPager.setAdapter(myAdapter);

CreateDots(0);

viewPager.addOnPageChangeListener(new ViewPager.OnPageChangeListener() {

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override

public void onPageSelected(int position) {

CreateDots(position);

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

btn_next.setText("Start");

btn_skip.setVisibility(View.INVISIBLE);

}else{

btn_next.setText("Next");

btn_skip.setVisibility(View.VISIBLE);

}

@Override

public void onPageScrollStateChanged(int state) {

}

});

btn_skip.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

editor = sharedPreferences.edit();

editor.putString("CHECK","true");

editor.commit();

SkipActivity();

}

});

btn_next.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

int next = viewPager.getCurrentItem() + 1;

if (next<layouts.length){

viewPager.setCurrentItem(next);

}else{

SkipActivity();

editor = sharedPreferences.edit();

editor.putString("CHECK","true");

editor.commit();

}

});

}

private void SkipActivity() {

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

finish();

}

public void CreateDots(int position){

if (linearLayout != null){

linearLayout.removeAllViews();

}

imageViews = new ImageView[layouts.length];

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

imageViews[i] = new ImageView(this);

if (i == position){

imageViews[i].setImageDrawable(ContextCompat.getDrawable(this,R.drawable.active_dots));

}else{

imageViews[i].setImageDrawable(ContextCompat.getDrawable(this,R.drawable.default_dots));

}

LinearLayout.LayoutParams params = new LinearLayout.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT,

ViewGroup.LayoutParams.WRAP_CONTENT);

params.setMargins(5,0,5,0);

linearLayout.addView(imageViews[i],params);

}

public boolean checkStatus(){

boolean status = false;

if (sharedPreferences.getString("CHECK","null").equals("null")){

status = false;

}else{

status = true;

}

return status;

}

Create MyAdapter.java File Follow this Code.

package statusdownloader.bhaumik.com.viewpagerintro;

import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;

public class MyAdapter extends PagerAdapter{

    int[] layouts;
    LayoutInflater inflater;
    Context context;

    public MyAdapter(int[] layouts, Context context) {
        this.layouts = layouts;
        this.context = context;
        inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);
    }

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

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

    @Override
    public Object instantiateItem(ViewGroup container, int position) {

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

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

        View view = (View) object;
        container.removeView(view);
    }
}

package statusdownloader.bhaumik.com.viewpagerintro;

import android.content.Context;

import android.support.v4.view.PagerAdapter;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

public class MyAdapter extends PagerAdapter{

int[] layouts;

LayoutInflater inflater;

Context context;

public MyAdapter(int[] layouts, Context context) {

this.layouts = layouts;

this.context = context;

inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);

}

@Override

public int getCount() {

return layouts.length;

}

@Override

public boolean isViewFromObject(View view, Object object) {

return view==object;

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

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

container.addView(view);

return view;

}

@Override

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

View view = (View) object;

container.removeView(view);

}

In this Example of create intro slider using view pager. view pager is used to pager adapter in adapter class. and create three layout xml file and design the file and in this layout file to store int array of MainActivity class.and create drawable resource in active_dots and default_dots file. In this file use to user can swipe left to right then change position wise dot.

Now in this example used to view pager listener and then send data to adapter and display adapter. you can swipe left to right then change screen layout file and then final layout file to click start button then display welcome activity screen open.