How to Create Image Slider with Page Indicator

Image slider are used in almost every Android Application .In this post we will Learn about Creating Image Slider with page Indicator.So lets start with Coding part:-


First of all we need to add this library in our build.gradle file

compile 'com.squareup.picasso:picasso:2.3.3'

Step 1:

activity_main.xml

 <RelativeLayout  
 android:layout_width="match_parent"  
 android:layout_height="200dp">  
 <android.support.v4.view.ViewPager  
 android:id="@+id/vp_slider"  
 android:layout_width="match_parent"  
 android:layout_height="match_parent" />  
 <LinearLayout  
 android:id="@+id/ll_dots"  
 android:layout_width="match_parent"  
 android:layout_height="30dp"  
 android:layout_alignParentBottom="true"  
 android:layout_marginBottom="20dp"  
 android:gravity="center"  
 android:orientation="horizontal"></LinearLayout>  
 </RelativeLayout>  

Create the layout for viewpager item

layout_slider.xml

 <?xml version="1.0" encoding="utf-8">  
 <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"  
   android:orientation="vertical" android:layout_width="match_parent"  
   android:layout_height="match_parent">  
   <ImageView  
     android:id="@+id/im_slider"  
     android:layout_width="match_parent"  
     android:layout_height="match_parent"  
     android:scaleType="centerCrop"/>  
 </LinearLayout>  

Step 2:

SliderPagerAdapter.java

 public class SliderPagerAdapter extends PagerAdapter {  
 private LayoutInflater layoutInflater;  
   Activity activity;  
   ArrayList<String> image_arraylist;  
   public SliderPagerAdapter(Activity activity, ArrayList<String> image_arraylist) {  
     this.activity = activity;  
     this.image_arraylist = image_arraylist;  
   }  
   @Override  
   public Object instantiateItem(ViewGroup container, int position) {  
     layoutInflater = (LayoutInflater) activity.getSystemService(Context.LAYOUT_INFLATER_SERVICE);  
     View view = layoutInflater.inflate(R.layout.layout_slider, container, false);  
     ImageView im_slider = (ImageView) view.findViewById(R.id.im_slider);  
     Picasso.with(activity.getApplicationContext())  
         .load(image_arraylist.get(position))  
         .placeholder(R.mipmap.ic_launcher) // optional  
         .error(R.mipmap.ic_launcher)     // optional  
         .into(im_slider);  
     container.addView(view);  
     return view;  
   }  
   @Override  
   public int getCount() {  
     return image_arraylist.size();  
   }  
   @Override  
   public boolean isViewFromObject(View view, Object obj) {  
     return view == obj;  
   }  
   @Override  
   public void destroyItem(ViewGroup container, int position, Object object) {  
     View view = (View) object;  
     container.removeView(view);  
   }  
 }  

and Finally the MainActivity.java

 public class MainActivity extends AppCompatActivity{  
   private ViewPager vp_slider;  
   private LinearLayout ll_dots;  
   SliderPagerAdapter sliderPagerAdapter;  
   ArrayList<String> slider_image_list;  
   private TextView[] dots;  
   int page_position = 0;  
   @Override  
   protected void onCreate(Bundle savedInstanceState) {  
     super.onCreate(savedInstanceState);  
    
     setContentView(R.layout.activity_main);   
     init();  

     addBottomDots(0);  
     final Handler handler = new Handler();  
     final Runnable update = new Runnable() {  
       public void run() {  
         if (page_position == slider_image_list.size()) {  
           page_position = 0;  
         } else {  
           page_position = page_position + 1;  
         }  
         vp_slider.setCurrentItem(page_position, true);  
       }  
     };  
     new Timer().schedule(new TimerTask() {  
       @Override  
       public void run() {  
         handler.post(update);  
       }  
     }, 100, 5000);  
   }  
   private void init() {  
    
     vp_slider = (ViewPager) findViewById(R.id.vp_slider);  
     ll_dots = (LinearLayout) findViewById(R.id.ll_dots);  
     slider_image_list = new ArrayList<>();  

     slider_image_list.add("http://imageurl.com/images/image1.jpg");  
     slider_image_list.add("http://imageurl.com/images/image2.jpg");  
     
     sliderPagerAdapter = new SliderPagerAdapter(MainActivity.this, slider_image_list);  
     vp_slider.setAdapter(sliderPagerAdapter);  
     vp_slider.setOnPageChangeListener(new ViewPager.OnPageChangeListener() {  
       @Override  
       public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {  
       }  
       @Override  
       public void onPageSelected(int position) {  
         addBottomDots(position);  
       }  
       @Override  
       public void onPageScrollStateChanged(int state) {  
       }  
     });  
   }  
   private void addBottomDots(int currentPage) {  
     dots = new TextView[slider_image_list.size()];  
     ll_dots.removeAllViews();  
     for (int i = 0; i < dots.length; i++) {  
       dots[i] = new TextView(this);  
       dots[i].setText(Html.fromHtml("&#8226;"));  
       dots[i].setTextSize(35);  
       dots[i].setTextColor(Color.parseColor("#000000"));  
       ll_dots.addView(dots[i]);  
     }  
     if (dots.length > 0)  
       dots[currentPage].setTextColor(Color.parseColor("#FFFFFF"));  
   }  
 }  

that's all for dynamic image slider its look like this

but sometimes we required padding left and right in images for this we add few lines of code in our viewpager

<android.support.v4.view.ViewPager  
 android:id="@+id/vp_slider"  
 android:layout_width="match_parent"  
 android:layout_height="match_parent"

android:clipToPadding="false"

android:paddingLeft="30dp"

android:padiingRight="30dp"

/> 

and after adding these lines our image slider looks like this

Thank you !! Keep coding and Keep Sharing.