Gridview pager | Horizontal Gridview |GridView with ViewPager in android

Hello Friends,

Today i am posting Gridviewpagger example, it is will display item as you want in Column and row, it is swipe as horizontal direction.  you will get page indicator of total number of pages available

import java.io.File;
import java.util.ArrayList;
import android.os.Bundle;
import android.os.Environment;
import android.support.v4.app.FragmentActivity;
import android.support.v4.view.ViewPager;
import android.support.v4.view.ViewPager.OnPageChangeListener;
import android.util.Log;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.ImageButton;
import android.widget.ImageView;
import android.widget.LinearLayout;
import android.widget.LinearLayout.LayoutParams;

public class MainActivity extends FragmentActivity implements OnClickListener
{

 FragmentPageAdapter mAdapter;
 ViewPager mPager;
 int mNumFragments = 0;
 int mNumItems = 0;

 ArrayList<GridItem> list = new ArrayList<GridItem>();
 
 String imagePath;
 LinearLayout llDots;
 @Override
 protected void onCreate(Bundle savedInstanceState)
 {
  super.onCreate(savedInstanceState);
  setContentView(R.layout.main);
  
  imagePath = Environment.getExternalStorageDirectory().getAbsolutePath() + "/YourFolderName/";
  File fl = new File(imagePath);
  File images[] = null;
  if(fl.exists())
  {
   if(fl.isDirectory())
   {
    images = fl.listFiles();
   }
  }
  if(images != null && images.length > 0)
  {
   for (int i = 0; i < images.length ; i++)
   {
    if(images[i] != null)
    {
     GridItem item = new GridItem();
     item.setImagePath("file://" + images[i].getPath());
     item.setTitle("file://" + images[i].getPath());
     list.add(item);
    }
   }
  }
  
  mAdapter = new FragmentPageAdapter(getSupportFragmentManager(), list, getResources());
  mPager = (ViewPager) findViewById(R.id.viewPagger);
  mPager.setOffscreenPageLimit(4);
  mPager.setAdapter(mAdapter);
  llDots = (LinearLayout) findViewById(R.id.llDots);
  
  for (int i = 0; i < mAdapter.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);
   imgDot.setOnClickListener(this);
   llDots.addView(imgDot);
  }
  
  mPager.setOnPageChangeListener(new OnPageChangeListener()
  {
   
   @Override
   public void onPageSelected(int pos)
   {
    Log.e("", "Page Selected is ===> " + pos);
    for (int i = 0; i < mAdapter.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)
   {
    
   }
  });
 }
 @Override
 public void onClick(View v)
 {
  if(v != null)
  {
   if(v.getTag() != null)
   {
    int pos = (Integer) v.getTag();
    for (int i = 0; i < mAdapter.getCount(); i++)
    {
     if(i != pos)
     {
      ((ImageView)llDots.findViewWithTag(i)).setSelected(false);
     }
    }
    mPager.setCurrentItem(pos, true);
    ((ImageView)llDots.findViewWithTag(pos)).setSelected(true);
   }
  }
 }
}

Note- Don't forget to add Permission Manifest File-
<uses-permission android:name=”android.permission.READ.EXTERNAL.STORAGE”> </uses-permission>

Download full source code from here GridviewpagerDemo

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

Thank you :)

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 :)