Android ViewPager is a widget that lets the user to swipe left or right to view a completely new screen. It is used to create multiple tabs and can dynamically add or remove pages (or tabs) at anytime.
Mostly, Android ViewPager is used in association with fragment, the best way to manage the lifecycle of each page. FragmentPagerAdapter and FragmentStatePagerAdapter are some of the standard adapters implemented for using fragments with the ViewPager. In this lesson, we are going to explain how to do screen slides with a Android ViewPager supported by the support library.
The following example illustrates how to create static image slideshow using ViewPager, PageAdapter and Fragment.
First create MainActivty.java in your Application Project and save 4 images named image1, image2, image3 and image4 in res/drawable folder.
MainActivity.java:
[java]
public class MainActivity extends FragmentActivity {
//variable declaration
Context context;
MyPageAdapter pageAdapter;
ViewPager pager;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
//set activity content to external view
setContentView(R.layout.activity_main);
//find view by Id
pager = (ViewPager)findViewById(R.id.viewpager);
//get all fragments
List<Fragment> fragments = getFragments();
//create instance of PageAdapter(MyPageAdapter)
pageAdapter = new MyPageAdapter(getSupportFragmentManager(), fragments);
//set adapter
pager.setAdapter(pageAdapter);
}
private static List<Fragment> getFragments(){
List<Fragment> fList = new ArrayList<Fragment>();
//add fragments to List
fList.add(MyFragment.newInstance(R.drawable.image1));
fList.add(MyFragment.newInstance(R.drawable.image2));
fList.add(MyFragment.newInstance(R.drawable.image3));
fList.add(MyFragment.newInstance(R.drawable.image4));
return fList;
}
}
[/java]
Create a PageAdapter called MyPageAdapter.java.
MyPageAdapter.java:
[java]
public class MyPageAdapter extends FragmentPagerAdapter {
private List<Fragment> fragments;
public MyPageAdapter(FragmentManager fm, List<Fragment> fragments) {
super(fm);
this.fragments = fragments;
}
@Override
public Fragment getItem(int position) {
return this.fragments.get(position);
}
@Override
public int getCount() {
return this.fragments.size();
}
}
[/java]
Create a Fragment class called MyFragment.java.
MyFragment.java:
[java]
public class MyFragment extends Fragment {
public static final String MESSAGE = " MESSAGE";
//constructor
public static final MyFragment newInstance(int image)
{
MyFragment f = new MyFragment();
Bundle bdl = new Bundle(1);
bdl.putInt(MESSAGE, image);
f.setArguments(bdl);
return f;
}
@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container,Bundle savedInstanceState)
{
int message3 = getArguments().getInt(MESSAGE);
View v = inflater.inflate(R.layout.myfragment, container, false);
ImageView imageV = (ImageView)v.findViewById(R.id.text);
imageV.setBackgroundResource(message3);
return v;
}
}
[/java]
Now create the XML files, activity_main.xml and myfragment.xml.
activity_main.xml:
[code lang="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"
android:background="#FFFFFF">
<android.support.v4.view.ViewPager
android:id="@+id/viewpager"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_alignParentTop="true" />
</RelativeLayout>
[/code]
myfragment.xml:
[code lang="xml"]
<?xml version="1.0" encoding="utf-8"?>
<ImageView xmlns:android="http://schemas.android.com/apk/res/android"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:layout_gravity="center"
android:id="@+id/text"
/>
[/code]
AndroidManifest.xml:
[code lang="xml"]
<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
package="com.spl.project"
android:versionCode="1"
android:versionName="1.0" >
<uses-sdk
android:minSdkVersion="8"
android:targetSdkVersion="16" />
<application
android:allowBackup="true"
android:icon="@drawable/ic_launcher"
android:label="@string/app_name"
android:theme="@style/AppTheme" >
<activity
android:name="com.spl.project.MainActivity"
android:label="@string/app_name" >
<intent-filter>
<action android:name="android.intent.action.MAIN" />
<category android:name="android.intent.category.LAUNCHER" />
</intent-filter>
</activity>
</application>
</manifest>
[/code]
Output:
