ViewPager for Horizental Screen Slides in Android

Hello Guys!!!

Hope you all doing well...
In this tutorial, you will learn how to implement a viewpager gallery of images and texts in your Android application. ViewPager allows the user to flip left and right through pages of data. We will create a viewpager and on flip left or right will show different images. I am also putting Timer method in it for automatically sliding of images. So lets begin…

Here is necessary java classes and xml files.

1. MainActivity.java 

MainActivity is the class in which 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

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

       }

       // }

}

3. activity_main.xml

 activity_main.xml 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>

4. Pages.xml 

It contains 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.

Here is the output of the program.

This is all about an easy example of Viewpager slide for image.

Happy Coding !!