View Pager Example in Android Development

This example shows how you can create an image pager in android.

Algorithm:

1.) Create a new project by File-> New -> Android Project name it ViewPagerExample.

2.) Write following into main.xml:

xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:orientation="vertical" >

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
         />

</LinearLayout>

3.) Create and write following into res/layout/details.xml:

xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <TextView
        android:id="@+id/detailsText"
        android:layout_width="wrap_content"
        android:layout_height="match_parent"
        android:layout_gravity="center_horizontal|center_vertical"
        android:layout_marginTop="20dip"
        android:text="Large Text"
        android:textAppearance="?android:attr/textAppearanceLarge"
        android:textSize="30dip" />

</LinearLayout>

4.) Create and write following into res/layout/details.xml:

xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <ImageView
        android:id="@+id/imageView1"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:src="@drawable/ic_launcher" />

</LinearLayout>

5.) Create and Write following into src/DetailFragment.java:

package com.example.viewpagerexample;

import com.example.viewpagerexample.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.TextView;

public class DetailFragment extends Fragment {
        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                Log.e("Test", "hello");
        }

        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
                super.onActivityCreated(savedInstanceState);

        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                        Bundle savedInstanceState) {
                View view = inflater.inflate(R.layout.details, container, false);
                TextView textView = (TextView)view.findViewById(R.id.detailsText);
                textView.setText("Testing");
                return view;
        }
}

6.) Create and Write following into src/ImageFragment.java:

package com.example.viewpagerexample;

import com.example.viewpagerexample.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.util.Log;
import android.view.LayoutInflater;
import android.view.View;
import android.view.ViewGroup;
import android.widget.ImageView;

public class ImageFragment extends Fragment {
        private final int imageResourceId;

        public ImageFragment(int imageResourceId) {
                this.imageResourceId = imageResourceId;
        }

        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                Log.e("Test", "hello");
        }

        @Override
        public void onActivityCreated(Bundle savedInstanceState) {
                super.onActivityCreated(savedInstanceState);

        }

        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                        Bundle savedInstanceState) {
                View view = inflater.inflate(R.layout.image_layout, container,false);
                ImageView imageView = (ImageView)view.findViewById(R.id.imageView1);
                imageView.setImageResource(imageResourceId);
                return view;
        }
}

7.) Run for output.

Steps:

1.) Create a project named ViewPagerExample and set the information as stated in the image.

Build Target: Android 4.0
Application Name: ViewPagerExample
Package Name: com. example. ViewPagerExample
Activity Name: ViewPagerExample
Min SDK Version: 8

2.) Open ViewPagerExample.java file and write following code there:

package com.example.viewpagerexample;

import com.example.viewpagerexample.R;

import android.os.Bundle;
import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;
import android.support.v4.view.ViewPager;

public class ViewPagerExample extends FragmentActivity {
        private MyAdapter mAdapter;
        private ViewPager mPager;

        /** Called when the activity is first created. */
        @Override
        public void onCreate(Bundle savedInstanceState) {
                super.onCreate(savedInstanceState);
                setContentView(R.layout.main);
                mAdapter = new MyAdapter(getSupportFragmentManager());

                mPager = (ViewPager) findViewById(R.id.pager);
                mPager.setAdapter(mAdapter);
        }

        public static class MyAdapter extends FragmentPagerAdapter {
                public MyAdapter(FragmentManager fm) {
                        super(fm);
                }

                @Override
                public int getCount() {
                        return 3;
                }

                @Override
                public Fragment getItem(int position) {
                        switch (position) {
                        case 0:
                                return new DetailFragment();
                        case 1:
                                return new ImageFragment(R.drawable.ic_launcher);
                        case 2:
                                return new ImageFragment(R.drawable.thumb);

                        default:
                                return null;
                        }
                }
        }
}

3.) Compile and build the project.

Output