Monday, February 25, 2013

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>

2 comments:

  1. hi
    if i use login button in place of last button then on click of login button i want to go to login class.can u tell me how to code for the same in onClick() function.

    ReplyDelete
  2. thanx. done it.the problm was due to image button

    ReplyDelete