Saurabh Sharma Software Developer, Voracious Reader and Caffeine Addict: 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>

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!!!