ViewPager in Android allows the user to flip left
and right through pages of data. In our android ViewPager application we’ll
implement a ViewPager that swipes through three views with different images and
texts.
Android ViewPager widget is found in the support
library and it allows the user to swipe left or right to see an entirely new
screen.
Today we’re implementing a ViewPager by using Views
and PagerAdapter.
Go to Build.Gradle
------------------------
dependencies {
compile
'me.relex:circleindicator:1.2.1@aar'
}
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"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:orientation="vertical"
tools:context="com.sgp.anil.viewpager.MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
</android.support.v4.view.ViewPager>
<me.relex.circleindicator.CircleIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_gravity="center_horizontal|bottom"
android:background="#000" />
</FrameLayout>
</LinearLayout>
<LinearLayout 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"
android:orientation="vertical"
tools:context="com.sgp.anil.viewpager.MainActivity">
<FrameLayout
android:layout_width="match_parent"
android:layout_height="match_parent">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scrollbars="none">
</android.support.v4.view.ViewPager>
<me.relex.circleindicator.CircleIndicator
android:id="@+id/indicator"
android:layout_width="match_parent"
android:layout_height="25dp"
android:layout_gravity="center_horizontal|bottom"
android:background="#000" />
</FrameLayout>
</LinearLayout>
pager_list.xml
----------------------
<?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">
<ImageView
android:id="@+id/large_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/araku"
/>
</RelativeLayout>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent">
<ImageView
android:id="@+id/large_image"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:scaleType="fitXY"
android:src="@drawable/araku"
/>
</RelativeLayout>
Nature.Java
--------------------
package
com.sgp.anil.viewpager;
/**
* Created by Anil on 23-08-2016.
*/
public class Nature {
private int imageId;
public Nature(int imageId) {
this.imageId = imageId;
}
public int getImageId() {
return imageId;
}
public void setImageId(int imageId) {
this.imageId = imageId;
}
}
/**
* Created by Anil on 23-08-2016.
*/
public class Nature {
private int imageId;
public Nature(int imageId) {
this.imageId = imageId;
}
public int getImageId() {
return imageId;
}
public void setImageId(int imageId) {
this.imageId = imageId;
}
}
CustomPageAdapter.java
------------------------------
package
com.sgp.anil.viewpager;
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.List;
/**
* Created by Anil on 23-08-2016.
*/
public class CustomPageAdapter extends PagerAdapter {
private Context context;
private List<Nature> dataObjectList;
private LayoutInflater layoutInflater;
public CustomPageAdapter(Context context, List<Nature> dataObjectList) {
this.context = context;
this.layoutInflater = (LayoutInflater) this.context.getSystemService(this.context.LAYOUT_INFLATER_SERVICE);
this.dataObjectList = dataObjectList;
}
@Override
public int getCount() {
return dataObjectList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == ((View) object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = this.layoutInflater.inflate(R.layout.pager_list, container, false);
ImageView displayImage = (ImageView) view.findViewById(R.id.large_image);
displayImage.setImageResource(this.dataObjectList.get(position).getImageId());
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
import android.content.Context;
import android.support.v4.view.PagerAdapter;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;
import java.util.List;
/**
* Created by Anil on 23-08-2016.
*/
public class CustomPageAdapter extends PagerAdapter {
private Context context;
private List<Nature> dataObjectList;
private LayoutInflater layoutInflater;
public CustomPageAdapter(Context context, List<Nature> dataObjectList) {
this.context = context;
this.layoutInflater = (LayoutInflater) this.context.getSystemService(this.context.LAYOUT_INFLATER_SERVICE);
this.dataObjectList = dataObjectList;
}
@Override
public int getCount() {
return dataObjectList.size();
}
@Override
public boolean isViewFromObject(View view, Object object) {
return view == ((View) object);
}
@Override
public Object instantiateItem(ViewGroup container, int position) {
View view = this.layoutInflater.inflate(R.layout.pager_list, container, false);
ImageView displayImage = (ImageView) view.findViewById(R.id.large_image);
displayImage.setImageResource(this.dataObjectList.get(position).getImageId());
container.addView(view);
return view;
}
@Override
public void destroyItem(ViewGroup container, int position, Object object) {
container.removeView((View) object);
}
}
MainActivity,Java
------------------------------
package
com.sgp.anil.viewpager;
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.List;
import me.relex.circleindicator.CircleIndicator;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
List<Nature> getData = dataSource();
viewPager = (ViewPager) findViewById(R.id.viewpager);
CustomPageAdapter mCustomPagerAdapter = new CustomPageAdapter(MainActivity.this, getData);
viewPager.setAdapter(mCustomPagerAdapter);
CircleIndicator indicator = (CircleIndicator) findViewById(R.id.indicator);
indicator.setViewPager(viewPager);
}
private List<Nature> dataSource() {
List<Nature> data = new ArrayList<Nature>();
data.add(new Nature(R.drawable.araku));
data.add(new Nature(R.drawable.araku2));
data.add(new Nature(R.drawable.araku3));
data.add(new Nature(R.drawable.araku4));
return data;
}
}
import android.os.Bundle;
import android.support.v4.view.ViewPager;
import android.support.v7.app.AppCompatActivity;
import java.util.ArrayList;
import java.util.List;
import me.relex.circleindicator.CircleIndicator;
public class MainActivity extends AppCompatActivity {
private ViewPager viewPager;
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_main);
List<Nature> getData = dataSource();
viewPager = (ViewPager) findViewById(R.id.viewpager);
CustomPageAdapter mCustomPagerAdapter = new CustomPageAdapter(MainActivity.this, getData);
viewPager.setAdapter(mCustomPagerAdapter);
CircleIndicator indicator = (CircleIndicator) findViewById(R.id.indicator);
indicator.setViewPager(viewPager);
}
private List<Nature> dataSource() {
List<Nature> data = new ArrayList<Nature>();
data.add(new Nature(R.drawable.araku));
data.add(new Nature(R.drawable.araku2));
data.add(new Nature(R.drawable.araku3));
data.add(new Nature(R.drawable.araku4));
return data;
}
}
This comment has been removed by the author.
ReplyDeletehow to change the color of the circular page indicators
ReplyDeletesir code for updating indicators while changing the view pager
ReplyDeletesir the code has an error with oncreate statement
ReplyDeleteThis comment has been removed by the author.
Delete