Viewpager Indicator | Viewpagger example Android

Hello Friends,

View Pager  is one of the important component for swipe images felt to right or vice versa.
In this tutorial, you can set view pager indicator in your Android application without using any lib.  you can set own indicator with view pager.

Protrait Mode :

 Landscape Mode :

MainActivity :

import android.app.Activity;
import android.os.Bundle;
import android.support.v4.view.PagerAdapter;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;

public class MainActivity extends Activity 
{
 ViewPager viewPager;
 PagerAdapter adapter; 
 int[] flag;
 LinearLayout llDots;

 @Override
 public void onCreate(Bundle savedInstanceState) 
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.viewpager_main);
  
  flag = new int[] { R.drawable.abc, R.drawable.xyz,
    R.drawable.abc, R.drawable.xyz,
    R.drawable.abc, R.drawable.xyz, R.drawable.abc,
    R.drawable.xyz, R.drawable.abc, R.drawable.xyz };

  llDots=(LinearLayout) findViewById(R.id.llDots);  
  viewPager = (ViewPager) findViewById(R.id.pager);
  
  adapter = new ViewPagerAdapter(this, flag);
  viewPager.setAdapter(adapter); 
  
  for (int i = 0; i < adapter.getCount(); i++)
  {
   ImageButton imgDot = new ImageButton(this);
   imgDot.setTag(i);
   imgDot.setImageResource(R.drawable.dot_selector);
   imgDot.setBackgroundResource(0);
   imgDot.setPadding(5, 5, 5, 5);
   LayoutParams params = new LayoutParams(20, 20);
   imgDot.setLayoutParams(params);
   if(i == 0)
    imgDot.setSelected(true);
  
   llDots.addView(imgDot);
  }
  
  viewPager.setOnPageChangeListener(new OnPageChangeListener()
  {
   
   @Override
   public void onPageSelected(int pos)
   {
    Log.e("", "Page Selected is ===> " + pos);
    for (int i = 0; i < adapter.getCount(); i++)
    {
     if(i != pos)
     {
      ((ImageView)llDots.findViewWithTag(i)).setSelected(false);
     }
    }
    ((ImageView)llDots.findViewWithTag(pos)).setSelected(true);
   }
   
   @Override
   public void onPageScrolled(int pos, float arg1, int arg2)
   {
    
   }
   
   @Override
   public void onPageScrollStateChanged(int arg0)
   {
    
   }
  });
  
  //Uncomment for set padding Margin between images.
  
  //int margin = (int)TypedValue.applyDimension(TypedValue.COMPLEX_UNIT_DIP, 20*2,     getResources().getDisplayMetrics());
  //viewPager.setPageMargin(-20); 

 }
 
}

Download full source code from here ViewPagerIndicatorDemo

I will be happy if you will provide your feedback or follow this blog. Any suggestion and help will be appreciated.

Thank you :)