View Pager Indicator

Hi Guys,
Today I am going to show you an implementation of  ViewPagerIndicator, which is based on the ViewPagerIndicator library developed by "Jake Wharton".

This sample shows the use of the ViewPager and ViewPagerIndicator. Generally this will useful to show gallery images, some offers etc. It will be a horizontal navigation.

To implement this, we require a ViewPagerIndicator library, which can be downloaded from viewpagerindicator. and we will also need an Android support library.

So let' s start.

Our view will look like this

First we will design our main.xml,

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
     xmlns:app="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:background="#fff">

    <android.support.v4.view.ViewPager
        android:id="@+id/pager"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_above="@+id/indicator"
        />
    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:padding="10dip"
        android:layout_height="wrap_content"
        android:layout_width="wrap_content"
        android:layout_centerHorizontal="true"
        android:layout_alignParentBottom="true"
        />

</RelativeLayout>

Now we will design the page to be displayed in viewpager as page.xml,

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" >
    <LinearLayout
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_margin="10dp"
        android:layout_centerVertical="true"
        android:background="@drawable/image_border" 
        
        android:layout_centerHorizontal="true">

        <ImageView
            android:id="@+id/slider_image"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:contentDescription="@string/content_desc"
            android:layout_margin="10dp"
            android:scaleType="fitXY"
            android:adjustViewBounds="true"
            android:src="@drawable/summer0ne1" />
    </LinearLayout>

</RelativeLayout>

We have to implement a "FragmentPagerAdapter" for a ViewPager as follows,

package com.r2.pageslider;

import android.support.v4.app.Fragment;
import android.support.v4.app.FragmentManager;
import android.support.v4.app.FragmentPagerAdapter;

class TestFragmentAdapter extends FragmentPagerAdapter  {
    private int[] offerImages = {
            R.drawable.summer0ne1,
            R.drawable.summertwo1,
            R.drawable.summerfive1,
            R.drawable.summerfour1
    };

    private int mCount = offerImages.length;

    public TestFragmentAdapter(FragmentManager fm) {
        super(fm);
    }

    @Override
    public Fragment getItem(int position) {
        return new TestFragment(offerImages[position]);
    }

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

    public void setCount(int count) {
        if (count > 0 && count <= 10) {
            mCount = count;
            notifyDataSetChanged();
        }
    }
}

Our page will be a Fragment which is displayed in ViewPager. And it will be as follows,

package com.r2.pageslider;

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

@SuppressLint("ValidFragment")
public final class TestFragment extends Fragment {
    private static final String KEY_CONTENT = "TestFragment:Content";

    int imageSource;
    
    
    public TestFragment(int imageSource) {
        this.imageSource = imageSource;
        
    }
    public TestFragment() {
        
    }

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

        if ((savedInstanceState != null) && savedInstanceState.containsKey(KEY_CONTENT)) {
            imageSource = savedInstanceState.getInt(KEY_CONTENT);
        }
    }

    @Override
    public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle savedInstanceState) {
        ViewGroup root = (ViewGroup) inflater.inflate(R.layout.page, null);
        ImageView image = (ImageView)root.findViewById(R.id.slider_image);
        image.setImageResource(imageSource);
        setRetainInstance(true);
        return root;
    }

    @Override
    public void onSaveInstanceState(Bundle outState) {
        super.onSaveInstanceState(outState);
        outState.putInt(KEY_CONTENT, imageSource);
    }
}

Now see the use of ViewPager and ViewPagerIndicator in MainActivity class,

package com.r2.pageslider;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.view.Menu;

import com.viewpagerindicator.CirclePageIndicator;
import com.viewpagerindicator.PageIndicator;
public class MainActivity extends FragmentActivity {

    TestFragmentAdapter mAdapter;
    ViewPager mPager;
    PageIndicator mIndicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        
         mAdapter = new TestFragmentAdapter(getSupportFragmentManager());

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

            CirclePageIndicator indicator = (CirclePageIndicator)findViewById(R.id.indicator);
            mIndicator = indicator;
            indicator.setViewPager(mPager);

            final float density = getResources().getDisplayMetrics().density;
            indicator.setBackgroundColor(0xFFCCCCCC);
            indicator.setRadius(10 * density);
            indicator.setPageColor(0xFF888888);
            indicator.setFillColor(0x880000FF);
            indicator.setStrokeColor(0xFF000000);
            indicator.setStrokeWidth(2 * density);
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.main, menu);
        return true;
    }

}

  The complete sample source code can be downloaded from here Source Code Download.

I hope you will like this implementation. Add your comments if you like or if you have any issues in implementation.