Skip to main content

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.


Comments

Popular posts from this blog

How to Download Apk file from Url and Install Programmatically

In this post we learn about download apk file from server or website and then install it Programmatically in Phone. Sometimes we have to download external apk file from server and then install if downloading successfully finished.For this we use AsyncTask class  for background process. So here is Code Snippet for this task.Lets Start :- Before this we have to add these Permissions in Manifest.xml file : <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" /> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" /> DownloadNewVersion.java class DownloadNewVersion extends AsyncTask<String,Integer,Boolean> { @Override protected void onPreExecute() { super.onPreExecute(); bar = new ProgressDialog(getActivity()); bar.setCancelable(false); bar.setMessage("Downl

How to open pdf file url using webview in Android

 Sometimes we have requirement of showing pdf file in our Android Application. Although there are many third party gradle dependencies available online by which you can show your pdf file easily but one of the major drawback of using these libraries are they will increase you apk size .In some cases they will increase apk size upto ~14 MB. Alternatively you can access and show pdf file using assets and from storage options. This can take less size than any third party library. Here we use pdf using url and if you directly open your pdf file url in webview you will get no result because it will start downoad if you open this link in any web browser.  So in this article we will learn how we can open our pdf url using webview and without using any third party library. So lets Start step by Step:- Lets Suppose you have a pdf file url something like   http://yourwebsite.com/files/mydocumentfile.pdf Step 1: So we you this pdf file url to embed in our webview .First of all you have to host yo

How to use UPI Deep Linking in Android

 In this Article we will discuss about the UPI Deep linking. By this Deep linking we can perform UPI Payments through intent .Basically it open the All UPI supported Application in our mobile then user choose their preference and initiate the Payment and through this we get the payment credentials like payment id ,transaction id ,etc. without any payment gateway. So lets start with what is UPI? Unified Payments Interface(UPI) is an instant real-time payment system developed by National Payments Corporation of India facilitating inter-bank transactions. The interface is regulated by the Reserve Bank of India and works by instantly transferring funds between two bank accounts on a mobile platform. (from Wikipedia) Coding part: package com.example.droidmedium; import android.content.Intent; import android.net.Uri; import android.support.v7.app.AppCompatActivity; import android.os.Bundle; import android.util.Log; import android.view.View; import android.widget.Butt