ViewPager for Horizental Screen Slides

Hello Guys!!! Hope you all doing well...

Swipe left or right to see an entirely new screen Image  or Pages in Android is done by using support library android-support-v4.jar.  A ViewPager provided by the this  support library. ViewPagers can animate screen slides automatically . Here I am going to show an example of ViewPager to swipe image left or right with page count. I am also putting Timer method in it for automatically sliding of images.

Here is necessary java classes and xml file . You can also download source code from Github.
1. MainActivity.java
2. ViewPagerAdapter.java
3. activity_main.xml
4. pages.xml
5. Put image you want for swiping in drwable folder inside res folder

1. MainActivity.java is the class in wich you can set your ViewPager adapter for image sliding. Please read the comment inside code for better understanding of flow .

package com.sks.androidviewpager;

import java.util.Timer;

import java.util.TimerTask; 

import com.androidsurya.androidviewpager.R; 

import android.app.Activity;

import android.os.Bundle;

import android.support.v4.view.ViewPager;

import android.view.Menu;

public class MainActivity extends Activity {

       int noofsize = 5;

       ViewPager myPager = null;

       int count = 0;

       Timer timer;

       @Override

       protected void onCreate(Bundle savedInstanceState) {

              super.onCreate(savedInstanceState);             

              //set the layout which is containg viewPager Tag for image

              setContentView(R.layout.activity_main); 

            

              //ViewPager Adapter to set image

              ViewPagerAdapter adapter = new ViewPagerAdapter(MainActivity.this,noofsize);

           myPager = (ViewPager) findViewById(R.id.reviewpager);

              myPager.setAdapter(adapter);

              myPager.setCurrentItem(0);

             

              // Timer for auto sliding

              timer  = new Timer();

              timer.schedule(new TimerTask() {

            @Override

            public void run() {

                runOnUiThread(new Runnable() {

                    @Override

                    public void run() {

                        if(count<=5){

                              myPager.setCurrentItem(count);

                              count++;

                              }else{

                                     count = 0;

                                     myPager.setCurrentItem(count);

                              }

                    }

                });

            }

        }, 500, 3000);

       }

}

2.  ViewPagerAdapter.java this the main class for image seting in Adapter and display. Please follow the comment inside code for better understanding

package com.sks.androidviewpager; 

import com.androidsurya.androidviewpager.R; 

import android.app.Activity;

import android.content.Context;

import android.graphics.Color;

import android.os.Parcelable;

import android.support.v4.view.PagerAdapter;

import android.support.v4.view.ViewPager;

import android.view.LayoutInflater;

import android.view.View;

import android.widget.Button;

import android.widget.ImageView;

import android.widget.TextView; 

public class ViewPagerAdapter extends PagerAdapter {

       int size;

       Activity act;

       View layout;

       TextView pagenumber1,pagenumber2,pagenumber3,pagenumber4,pagenumber5;

       ImageView pageImage;

       Button click; 

       public ViewPagerAdapter(MainActivity mainActivity, int noofsize) {

              // TODO Auto-generated constructor stub

              size = noofsize;

              act = mainActivity;

       }

        @Override

       public int getCount() {

              // TODO Auto-generated method stub

              return size;

       }

        @Override

       public Object instantiateItem(View container, int position) {

              // TODO Auto-generated method stub

              LayoutInflater inflater = (LayoutInflater) act

                           .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

              layout = inflater.inflate(R.layout.pages, null);

              pagenumber1 = (TextView)layout.findViewById(R.id.pagenumber1);

              pagenumber2 = (TextView)layout.findViewById(R.id.pagenumber2);

              pagenumber3 = (TextView)layout.findViewById(R.id.pagenumber3);

              pagenumber4 = (TextView)layout.findViewById(R.id.pagenumber4);

              pagenumber5 = (TextView)layout.findViewById(R.id.pagenumber5);

              pageImage = (ImageView)layout.findViewById(R.id.imageView1);

              int pagenumberTxt=position + 1;

              //pagenumber1.setText("Now your in Page No  " +pagenumberTxt );

             

              try {

                     if(pagenumberTxt == 1){

                           pageImage.setBackgroundResource(R.drawable.android_1);

                           pagenumber1.setTextColor(Color.RED);

                           pagenumber2.setTextColor(Color.WHITE);

                           pagenumber3.setTextColor(Color.WHITE);

                           pagenumber4.setTextColor(Color.WHITE);

                           pagenumber5.setTextColor(Color.WHITE);

                     }

                     else if(pagenumberTxt == 2){

                           pageImage.setBackgroundResource(R.drawable.android_2);

                           pagenumber1.setTextColor(Color.WHITE);

                           pagenumber2.setTextColor(Color.RED);

                           pagenumber3.setTextColor(Color.WHITE);

                           pagenumber4.setTextColor(Color.WHITE);

                           pagenumber5.setTextColor(Color.WHITE);

                     }else if(pagenumberTxt == 3){

                           pageImage.setBackgroundResource(R.drawable.android_3);

                           pagenumber1.setTextColor(Color.WHITE);

                           pagenumber2.setTextColor(Color.WHITE);

                           pagenumber3.setTextColor(Color.RED);

                           pagenumber4.setTextColor(Color.WHITE);

                           pagenumber5.setTextColor(Color.WHITE);

                     }

                     else if(pagenumberTxt == 4){

                           pageImage.setBackgroundResource(R.drawable.android_4);

                           pagenumber1.setTextColor(Color.WHITE);

                           pagenumber2.setTextColor(Color.WHITE);

                           pagenumber3.setTextColor(Color.WHITE);

                           pagenumber4.setTextColor(Color.RED);

                           pagenumber5.setTextColor(Color.WHITE);

                     }

                     else if(pagenumberTxt == 5){

                           pageImage.setBackgroundResource(R.drawable.android_5);

                           pagenumber1.setTextColor(Color.WHITE);

                           pagenumber2.setTextColor(Color.WHITE);

                           pagenumber3.setTextColor(Color.WHITE);

                           pagenumber4.setTextColor(Color.WHITE);

                           pagenumber5.setTextColor(Color.RED);

                     }

              } catch (Exception e) {

                     // TODO Auto-generated catch block

                     e.printStackTrace();

              }

             

              ((ViewPager) container).addView(layout, 0);

              return layout;

       }

        @Override

       public void destroyItem(View arg0, int arg1, Object arg2) {

              ((ViewPager) arg0).removeView((View) arg2);

       }

       @Override

       public boolean isViewFromObject(View arg0, Object arg1) {

              return arg0 == ((View) arg1);

       }

       @Override

       public Parcelable saveState() {

              return null;

       }

       // }

}

Now xml file
1. activity_main.xml it contain Vewpager view for images.

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

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

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    tools:context=".MainActivity" > 

    <RelativeLayout

        android:id="@+id/relativeTextview"

        android:layout_width="fill_parent"

        android:layout_height="fill_parent"

        android:layout_below="@+id/header"

        android:padding="5dp" > 

        <android.support.v4.view.ViewPager

            android:id="@+id/reviewpager"

            android:layout_width="fill_parent"

            android:layout_height="fill_parent" />

    </RelativeLayout>

 </RelativeLayout>

2.Pages.xml it contain textview for page count and an imageview for image.
 <FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:layout_width="match_parent"

    android:layout_height="match_parent" > 

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:background="@drawable/android_3"

        android:contentDescription="@string/app_name" /> 

    <LinearLayout

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:gravity="bottom|center" > 

        <TextView

            android:id="@+id/pagenumber1"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_margin="10dp"

            android:background="#000"

            android:onClick="pageOneClick"

            android:text=" 1 "

            android:textColor="#fff"

            android:textSize="14sp"

            android:textStyle="bold" /> 

        <TextView

            android:id="@+id/pagenumber2"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_margin="10dp"

            android:background="#000"

            android:textColor="#fff"

            android:text=" 2 "

            android:textSize="14sp"

            android:textStyle="bold" /> 

        <TextView

            android:id="@+id/pagenumber3"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_margin="10dp"

            android:background="#000"

            android:textColor="#fff"

            android:text=" 3 "

            android:textSize="14sp"

            android:textStyle="bold" /> 

        <TextView

            android:id="@+id/pagenumber4"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_margin="10dp"

            android:background="#000"

            android:textColor="#fff"

            android:text=" 4 "

            android:textSize="14sp"

            android:textStyle="bold" />

         <TextView

            android:id="@+id/pagenumber5"

            android:layout_width="wrap_content"

            android:layout_height="wrap_content"

            android:layout_margin="10dp"

            android:background="#000"

            android:textColor="#fff"

            android:text=" 5 "

            android:textSize="14sp"

            android:textStyle="bold" />

    </LinearLayout> 

</FrameLayout>

lastly you have to put 5 images inside your drawable folder to show the images as left or right swipe.
This is all about an easy example of Viewpager slide for image. You can Download  whole code from here.
        Happy Coding!!!