Android Build Intro Slider Using ViewPager

Post Views: 13,702

Android Build Intro Slider Viewpager .Hello Friends, How are you all. In this tutorial we are going to build intro slider using viewpager. Intro slider or Welcome screen is the best way to show main features of your app. In our Intro Slider user user can swipe through few slides before getting into app.

To demonstrate, we will create a simple app that contains few intro slides with next and back navigation. The user can navigate through each slide using swipe gesture or using the next button. So lets start coding.

Demo

Screen Shot (Intro Slider using ViewPager)

Creating New Project

Create a new project in Android Studio File–>New–>New Project.
Enter Application Name, Package Name, Select Empty Activity and click on finish.

Change Theme

Go to App–>values–>style.xml and change style of AppTheme to NoActionBar

&lt;resources&gt;

    &lt;!-- Base application theme. --&gt;
    &lt;style name="AppTheme" parent="Theme.AppCompat.Light.NoActionBar"&gt;
        &lt;!-- Customize your theme here. --&gt;
        &lt;item name="colorPrimary"&gt;@color/colorPrimary&lt;/item&gt;
        &lt;item name="colorPrimaryDark"&gt;@color/colorPrimaryDark&lt;/item&gt;
        &lt;item name="colorAccent"&gt;@color/colorAccent&lt;/item&gt;
    &lt;/style&gt;

&lt;/resources&gt;

<item name="colorPrimary">@color/colorPrimary</item>

<item name="colorPrimaryDark">@color/colorPrimaryDark</item>

<item name="colorAccent">@color/colorAccent</item>

</style>

</resources>

Add ViewPager and Navigation Buttons

Now we will add ViewPager and Navigation Buttons to our Main Layout.
ViewPager is view which allows users to swipe left and right through pages of data.
Open activity_main.xml and in this layout we will take ViewPager inside of LinerLayout and we will also add Back and Next Button to navigate between slides.
Code for activity_main.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    tools:context="com.androidcodefinder.slideintro.MainActivity"
    android:layout_width="match_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical">

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

    </android.support.v4.view.ViewPager>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:background="@color/colorBlack"
        android:orientation="horizontal">

        <Button
            android:id="@+id/backBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.20"
            android:text="BACK"
            android:background="@null"
            android:textColor="@color/colorWhite"/>

        <LinearLayout
            android:id="@+id/dots"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.50"
            android:orientation="horizontal"
            android:gravity="center_horizontal">

        </LinearLayout>

        <Button
            android:id="@+id/nextBtn"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="0.20"
            android:text="NEXT"
            android:background="@null"
            android:textColor="@color/colorWhite"/>

    </LinearLayout>

</LinearLayout>

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

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

xmlns:tools="http://schemas.android.com/tools"

tools:context="com.androidcodefinder.slideintro.MainActivity"

android:layout_width="match_parent"

android:layout_height="fill_parent"

android:orientation="vertical">

<android.support.v4.view.ViewPager

android:id="@+id/viewpager"

android:layout_width="match_parent"

android:layout_height="match_parent"

android:layout_weight="0.75">

</android.support.v4.view.ViewPager>

<LinearLayout

android:layout_width="match_parent"

android:layout_height="wrap_content"

android:background="@color/colorBlack"

android:orientation="horizontal">

<Button

android:id="@+id/backBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="0.20"

android:text="BACK"

android:background="@null"

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

<LinearLayout

android:id="@+id/dots"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="0.50"

android:orientation="horizontal"

android:gravity="center_horizontal">

</LinearLayout>

<Button

android:id="@+id/nextBtn"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_weight="0.20"

android:text="NEXT"

android:background="@null"

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

</LinearLayout>

Create Slide Layout

Now we will create slide layout.
Create one slide.xml file inside Layout folder.
This layout will represent our slide.
In this layout we will take one ImageView for image and two TextView, one for Slide title and another one for slide description. All these items we will take under LinerLayout.
Code for slide.xml.

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:gravity="center"
    android:orientation="vertical"
    android:id="@+id/slidelinearlayout">

    <ImageView
        android:id="@+id/slideimg"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_marginTop="50dp"
        android:src="@mipmap/ic_launcher_round"/>
    <TextView
        android:id="@+id/slidetitle"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Title"
        android:layout_marginTop="25dp"
        android:textSize="30dp"
        android:textColor="@color/colorWhite"
        android:fontFamily="monospace"
        android:gravity="center"/>
    <TextView
        android:id="@+id/slidedescription"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:hint="Description"
        android:layout_marginTop="25dp"
        android:padding="5dp"
        android:textSize="20dp"
        android:textColor="@color/colorGray"
        android:gravity="center"
        android:fontFamily="sans-serif-condensed"/>

</LinearLayout>

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

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

android:layout_width="match_parent"

android:layout_height="match_parent"

android:gravity="center"

android:orientation="vertical"

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

<ImageView

android:id="@+id/slideimg"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:layout_marginTop="50dp"

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

<TextView

android:id="@+id/slidetitle"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:hint="Title"

android:layout_marginTop="25dp"

android:textSize="30dp"

android:textColor="@color/colorWhite"

android:fontFamily="monospace"

android:gravity="center"/>

<TextView

android:id="@+id/slidedescription"

android:layout_width="wrap_content"

android:layout_height="wrap_content"

android:hint="Description"

android:layout_marginTop="25dp"

android:padding="5dp"

android:textSize="20dp"

android:textColor="@color/colorGray"

android:gravity="center"

android:fontFamily="sans-serif-condensed"/>

</LinearLayout>

our design part is completed.

Create Adapter for ViewPager

Create a new java class named SlideAdapter.java which will be adapter for viewpager.
The class should Extend PageAdapter.
Add required methods.
In this adapter we will define list of Images, Title, Description and Slide Colors which we will use in our app.
In this adapter we need to add two more important methods instantiateItem() and destroyItem().
Code for SlideAdapter.java –

package com.androidcodefinder.slideintro;

import android.content.Context;
import android.graphics.Color;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.TextView;

/**
 * Created by Sumeet Jain on 25-02-2018.
 */

public class SlideAdapter extends PagerAdapter {

    Context context;
    LayoutInflater inflater;

    public SlideAdapter(Context context){
        this.context=context;
    }

    //Array
    public int[] list_images={

            R.drawable.phone,
            R.drawable.flight,
            R.drawable.bus,
            R.drawable.train
    };

    public String[] list_title={

            "Phone",
            "Flight",
            "Bus",
            "Train"
    };

    public String[] list_description={

            "Big discounts on Smart Phones",
            "Upto 25% off on Domestic Flights",
            "Enjoy Travelling on bus with flat 100 off",
            "10% cashback on first train booking"
    };
    public int[] list_color={

            Color.rgb(193, 66, 44),
            Color.rgb(193, 172, 44),
            Color.rgb(193, 41, 249),
            Color.rgb(68, 83, 242)

    };

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

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

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

        inflater = (LayoutInflater)context.getSystemService(context.LAYOUT_INFLATER_SERVICE);
        View view = inflater.inflate(R.layout.slide,container,false);

        LinearLayout linearLayout = (LinearLayout)view.findViewById(R.id.slidelinearlayout);
        ImageView img = (ImageView)view.findViewById(R.id.slideimg);
        TextView txt1 = (TextView) view.findViewById(R.id.slidetitle);
        TextView txt2 = (TextView) view.findViewById(R.id.slidedescription);


        img.setImageResource(list_images[position]);
        txt1.setText(list_title[position]);
        txt2.setText(list_description[position]);
        linearLayout.setBackgroundColor(list_color[position]);

        container.addView(view);

        return view;
    }

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

package com.androidcodefinder.slideintro;

import android.content.Context;

import android.graphics.Color;

import android.support.v4.view.PagerAdapter;

import android.view.LayoutInflater;

import android.view.View;

import android.view.ViewGroup;

import android.widget.ImageView;

import android.widget.LinearLayout;

import android.widget.TextView;

/**

* Created by Sumeet Jain on 25-02-2018.

public class SlideAdapter extends PagerAdapter {

Context context;

LayoutInflater inflater;

public SlideAdapter(Context context){

this.context=context;

}

//Array

public int[] list_images={

R.drawable.phone,

R.drawable.flight,

R.drawable.bus,

R.drawable.train

};

public String[] list_title={

"Phone",

"Flight",

"Bus",

"Train"

};

public String[] list_description={

"Big discounts on Smart Phones",

"Upto 25% off on Domestic Flights",

"Enjoy Travelling on bus with flat 100 off",

"10% cashback on first train booking"

};

public int[] list_color={

Color.rgb(193, 66, 44),

Color.rgb(193, 172, 44),

Color.rgb(193, 41, 249),

Color.rgb(68, 83, 242)

};

@Override

public int getCount() {

return list_title.length;

}

@Override

public boolean isViewFromObject(View view, Object obj) {

return view==(LinearLayout)obj;

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

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

View view = inflater.inflate(R.layout.slide,container,false);

LinearLayout linearLayout = (LinearLayout)view.findViewById(R.id.slidelinearlayout);

ImageView img = (ImageView)view.findViewById(R.id.slideimg);

TextView txt1 = (TextView) view.findViewById(R.id.slidetitle);

TextView txt2 = (TextView) view.findViewById(R.id.slidedescription);

img.setImageResource(list_images[position]);

txt1.setText(list_title[position]);

txt2.setText(list_description[position]);

linearLayout.setBackgroundColor(list_color[position]);

container.addView(view);

return view;

}

@Override

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

container.removeView((LinearLayout)object);

}

Instantiate ViewPager and Adapter

Open MainActivity.java and instantiate viewpager and adapter.
we will also use some HTML tricks to show slider dots.
and by using OnPageListener method we will control our navigation buttons which will help us to navigate through our slides.
So here is final codes for MainActivity.java

package com.androidcodefinder.slideintro;

import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.text.Html;
import android.view.View;
import android.widget.Button;
import android.widget.LinearLayout;
import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

    private ViewPager viewpager;
    private LinearLayout liner;
    private SlideAdapter myadapter;

    private TextView[] mdots;
    private Button next,back;

    private int mCureentPage;

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

        viewpager=(ViewPager)findViewById(R.id.viewpager);
        liner=(LinearLayout)findViewById(R.id.dots);

        next=(Button)findViewById(R.id.nextBtn);
        back=(Button)findViewById(R.id.backBtn);

        myadapter=new SlideAdapter(this);
        viewpager.setAdapter(myadapter);
        adddots(0);

        viewpager.addOnPageChangeListener(viewlistener);

        next.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewpager.setCurrentItem(mCureentPage+1);
            }
        });

        back.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                viewpager.setCurrentItem(mCureentPage-1);
            }
        });
    }

    public void adddots(int i){

        mdots=new TextView[4];
        liner.removeAllViews();

        for (int x=0;x<mdots.length;x++){

            mdots[x]=new TextView(this);
            mdots[x].setText(Html.fromHtml("&#8226;"));
            mdots[x].setTextSize(35);
            mdots[x].setTextColor(getResources().getColor(R.color.colorGray));

            liner.addView(mdots[x]);
        }
        if (mdots.length>0){

            mdots[i].setTextColor(getResources().getColor(R.color.colorWhite));

        }

    }

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

        }

        @Override
        public void onPageSelected(int position) {

            adddots(position);
            mCureentPage = position;

            if (position==0){
                next.setEnabled(true);
                back.setEnabled(false);
                back.setVisibility(View.INVISIBLE);

                next.setText("NEXT");
                back.setText("");
            }
            else if(position==mdots.length-1){

                next.setEnabled(true);
                back.setEnabled(true);
                back.setVisibility(View.VISIBLE);

                next.setText("FINISH");
                back.setText("BACK");

            }
            else {
                next.setEnabled(true);
                back.setEnabled(true );
                back.setVisibility(View.VISIBLE);

                next.setText("NEXT");
                back.setText("BACK");
            }

        }

        @Override
        public void onPageScrollStateChanged(int state) {

        }
    };
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

package com.androidcodefinder.slideintro;

import android.support.v4.view.ViewPager;

import android.support.v7.app.AppCompatActivity;

import android.os.Bundle;

import android.text.Html;

import android.view.View;

import android.widget.Button;

import android.widget.LinearLayout;

import android.widget.TextView;

public class MainActivity extends AppCompatActivity {

private ViewPager viewpager;

private LinearLayout liner;

private SlideAdapter myadapter;

private TextView[] mdots;

private Button next,back;

private int mCureentPage;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

setContentView(R.layout.activity_main);

viewpager=(ViewPager)findViewById(R.id.viewpager);

liner=(LinearLayout)findViewById(R.id.dots);

next=(Button)findViewById(R.id.nextBtn);

back=(Button)findViewById(R.id.backBtn);

myadapter=new SlideAdapter(this);

viewpager.setAdapter(myadapter);

adddots(0);

viewpager.addOnPageChangeListener(viewlistener);

next.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

viewpager.setCurrentItem(mCureentPage+1);

}

});

back.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View view) {

viewpager.setCurrentItem(mCureentPage-1);

}

});

}

public void adddots(int i){

mdots=new TextView[4];

liner.removeAllViews();

for (int x=0;x<mdots.length;x++){

mdots[x]=new TextView(this);

mdots[x].setText(Html.fromHtml("•"));

mdots[x].setTextSize(35);

mdots[x].setTextColor(getResources().getColor(R.color.colorGray));

liner.addView(mdots[x]);

}

if (mdots.length>0){

mdots[i].setTextColor(getResources().getColor(R.color.colorWhite));

}

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

@Override

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

}

@Override

public void onPageSelected(int position) {

adddots(position);

mCureentPage = position;

if (position==0){

next.setEnabled(true);

back.setEnabled(false);

back.setVisibility(View.INVISIBLE);

next.setText("NEXT");

back.setText("");

}

else if(position==mdots.length-1){

next.setEnabled(true);

back.setEnabled(true);

back.setVisibility(View.VISIBLE);

next.setText("FINISH");

back.setText("BACK");

}

else {

next.setEnabled(true);

back.setEnabled(true );

back.setVisibility(View.VISIBLE);

next.setText("NEXT");

back.setText("BACK");

}

@Override

public void onPageScrollStateChanged(int state) {

}

};

}

Now run your project and you will have fantastic Intro Slider for your app.

Download Complete Project

Android Build Intro Slider Using ViewPager Complete Project

Subscribe To Our YouTube Channel

Like Us On Facebook

Android Code Finder

Android Build Intro Slider Using ViewPager

Demo

Screen Shot (Intro Slider using ViewPager)

Creating New Project

Change Theme

Add ViewPager and Navigation Buttons

Create Slide Layout

Create Adapter for ViewPager

Instantiate ViewPager and Adapter

Download Complete Project

Subscribe To Our YouTube Channel

Like Us On Facebook

Other Tutorials-

RECENT POST

Leave a Reply Cancel reply