Saturday 27 October 2012

Android View Pager With Remote Images



Android View Pager is Layout Manager you can change it Left and Right.And you can see more than one view using swapping.And its works like image galllery.

First insert ViewPager in your xml  layout file ::

 <android.support.v4.view.ViewPager
        xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_above="@+id/button1"
        android:layout_margin="5dp" />


Now View Pager is working as a horizontal ScrollView.And View Pager have rows for each view.So create row for each view in layout,

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent"
    android:padding="1dip" >

    <ImageView
        android:id="@+id/image"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:adjustViewBounds="true"
        android:contentDescription="desc" />

    <ProgressBar
        android:id="@+id/loading"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center"
        android:visibility="gone" />

</FrameLayout>


Now at Java Coding side create object of ViewPager and give References from XML file,And ViewPager set  Adapter for pager.

ViewPager pager = (ViewPager) findViewById(R.id.pager);
pager.setAdapter(new ImagePagerAdapter(imageUrls));


Now extends PagerAdapter Class For  View Pager's Adapter.Now we have override method which is inflate each row in pager and create view for Pager


        @Override
        public Object instantiateItem(View view, int position) {

            final View imageLayout = inflater.inflate(
                    R.layout.item_pager_image, null);
            final ImageView imageView = (ImageView) imageLayout
                    .findViewById(R.id.image);
            final ProgressBar spinner = (ProgressBar) imageLayout
                    .findViewById(R.id.loading);
}






instantiateItem Method is working as like as getView method in listView.

Now View Pager has PageChangeListener to listen page changing.You get current page using getCurrentPage from DetailOnPageChangeListener class.

pager.setOnPageChangeListener(new DetailOnPageChangeListener());

    public class DetailOnPageChangeListener extends
            ViewPager.SimpleOnPageChangeListener {

        private int currentPage;

        @Override
        public void onPageSelected(int position) {

            currentPage = position;
        }

        public int getCurrentPage() {
            return currentPage;
        }

    }

you get Current page using button click.So when you click on button get current page From Pager Listener. also and you can download below full source code:


Download Android View Pager

No comments:

Post a Comment

Android Testing App