Android Horizontal View Paging

Horizontal view paging is based upon APIs only available with the Android Compatibility package v4; these APIs are not available in the standard Android SDK at this time. Therefore, you will need to add the Android compatibility package to your Android project to access the appropriate APIs.

Define a ViewPager

activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"

    android:orientation="vertical"

    android:layout_width="fill_parent"

    android:layout_height="fill_parent">

<android.support.v4.view.ViewPager

    android:layout_width="match_parent"

    android:layout_height="match_parent"

    android:id="@+id/myfivepanelpager"/>

</LinearLayout>

MainActivity.java

package example.helloworld2;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.app.Activity;

import android.content.Context;

import android.os.Bundle;

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.Toast;

public class MainActivity extends Activity {

        /** Called when the activity is first created. */

        @Override

        public void onCreate(Bundle savedInstanceState) {

                super.onCreate(savedInstanceState);

                setContentView(R.layout.activity_main);

                MyPagerAdapter adapter = new MyPagerAdapter();

                ViewPager myPager = (ViewPager) findViewById(R.id.myfivepanelpager);

                myPager.setAdapter(adapter);

                myPager.setCurrentItem(2);

        }

        

        public void farLeftButtonClick(View v)

        {

                Toast.makeText(this, "Far Left Button Clicked", Toast.LENGTH_SHORT).show(); 

        }

        public void farRightButtonClick(View v)

        {

                Toast.makeText(this, "Far Right Elephant Button Clicked", Toast.LENGTH_SHORT).show(); 

        }

        private class MyPagerAdapter extends PagerAdapter {

                public int getCount() {

                        return 5;

                }

                public Object instantiateItem(View collection, int position) {

                        LayoutInflater inflater = (LayoutInflater) collection.getContext()

                                        .getSystemService(Context.LAYOUT_INFLATER_SERVICE);

                        int resId = 0;

                        switch (position) {

                        case 0:

                                resId = R.layout.farleft;

                                break;

                        case 1:

                                resId = R.layout.left;

                                break;

                        case 2:

                                resId = R.layout.middle;

                                break;

                        case 3:

                                resId = R.layout.right;

                                break;

                        case 4:

                                resId = R.layout.farright;

                                break;

                        }

                        View view = inflater.inflate(resId, null);

                        ((ViewPager) collection).addView(view, 0);

                        return view;

                }

                @Override

                public void destroyItem(View arg0, int arg1, Object arg2) {

                        ((ViewPager) arg0).removeView((View) arg2);

                }

                @Override

                public void finishUpdate(View arg0) {

                        // TODO Auto-generated method stub

                }

                @Override

                public boolean isViewFromObject(View arg0, Object arg1) {

                        return arg0 == ((View) arg1);

                }

                @Override

                public void restoreState(Parcelable arg0, ClassLoader arg1) {

                        // TODO Auto-generated method stub

                }

                @Override

                public Parcelable saveState() {

                        // TODO Auto-generated method stub

                        return null;

                }

                @Override

                public void startUpdate(View arg0) {

                        // TODO Auto-generated method stub

                }

        }

}

layout/farleft.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:weightSum="1" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/farleft_text" />

    <Button

        android:id="@+id/button1"

        android:layout_width="match_parent"

        android:layout_height="wrap_content"

        android:layout_weight="0.54"

        android:onClick="farLeftButtonClick"

        android:text="I am a Button. Click Me. " >

    </Button>

</LinearLayout>

layout/farright.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" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/farright_text" />

    <ImageButton

        android:id="@+id/button2"

        android:layout_width="wrap_content"

        android:layout_height="wrap_content"

        android:adjustViewBounds="true"

        android:onClick="farRightButtonClick"

        android:scaleType="fitXY"

        android:src="@drawable/ic_launcher"

        android:text="I am a Button. Click Me. " >

    </ImageButton>

</LinearLayout>

layout/left.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" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/left_text" />

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:adjustViewBounds="true"

        android:scaleType="fitXY"

        android:src="@drawable/ic_launcher" >

    </ImageView>

</LinearLayout>

layout/middle.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" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/middle_text" />

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:adjustViewBounds="true"

        android:scaleType="fitXY"

        android:src="@drawable/ic_launcher" >

    </ImageView>

</LinearLayout>

layout/right.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" >

    <TextView

        android:layout_width="fill_parent"

        android:layout_height="wrap_content"

        android:text="@string/right_text" />

    <ImageView

        android:id="@+id/imageView1"

        android:layout_width="match_parent"

        android:layout_height="match_parent"

        android:adjustViewBounds="true"

        android:scaleType="fitXY"

        android:src="@drawable/ic_launcher" >

    </ImageView>

</LinearLayout>