Android image slider

If you wanna to use most optimized approach then you should use this Library for Image Slider,and there are full implementation is given so you can understand and use it easily.

But if you wanna to use only simple ViewPager then refer this site.In this tutorial there is simple implementation of ImageSlider is given.

Hope you get your answer, Thanks.

add code in xml for slider

 <RelativeLayout android:id="@+id/cardView_adv_Slider_surchbuses_fragment" android:layout_width="match_parent" android:layout_height="200dp" android:layout_marginBottom="@dimen/margin_10" android:background="@drawable/bg_shadow_transperent_rounded" > <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/view_pager" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentStart="true" android:layout_alignParentTop="true" /> <LinearLayout android:id="@+id/layoutDots" android:layout_width="match_parent" android:layout_height="30dp" android:layout_alignParentBottom="true" android:layout_marginBottom="@dimen/margin_10" android:background="@color/transparent" android:gravity="center" android:orientation="horizontal"></LinearLayout> </RelativeLayout> <TextView android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_margin="@dimen/margin_5" android:background="@drawable/btn_bg_white_rounded" android:text="Exp - 29 Oct, 2018" android:textColor="@color/colorGreen" android:textStyle="bold" /> </RelativeLayout> 

Add these methods in onCreate method //To show slider of images-------------

 SetAdViewPager(); SetDummyDataToImage(); 

Here I have added dummy data in arraylist.. you have to add ur data in arraylist

 private void SetDummyDataToImage() { PostImageModel postImageModel = new PostImageModel(); postImageModel.setImage("fbhgdkfjvbg/5c024b2c86b4c.jpg"); ImageList.add(postImageModel); PostImageModel postImageModel1 = new PostImageModel(); postImageModel1.setImage("coecureiou/5c0130b533cca.jpg"); ImageList.add(postImageModel1); PostImageModel postImageModel2 = new PostImageModel(); postImageModel2.setImage("fgvomtig/5c0130c67dbac.jpg"); ImageList.add(postImageModel2); PostImageModel postImageModel3 = new PostImageModel(); postImageModel3.setImage("frejtufgi/5c01309d3ca33.jpg"); ImageList.add(postImageModel3); NUM_PAGES = ImageList.size(); viewPager.getAdapter().notifyDataSetChanged(); myViewPagerAdapter.notifyDataSetChanged(); // viewPager.setAdapter(myViewPagerAdapter); addBottomDots(0); SetSliderAutoTimer(); } private void SetAdViewPager() { ImageList = new ArrayList<>(); myViewPagerAdapter = new MyViewPagerAdapter(ImageList); viewPager.setSaveFromParentEnabled(false); viewPager.setAdapter(myViewPagerAdapter); viewPager.addOnPageChangeListener(viewPagerPageChangeListener); } // viewpager change listener ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { addBottomDots(position); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }; private void addBottomDots(int currentPage) { dots = new TextView[ImageList.size()]; layoutDots.removeAllViews(); for (int i = 0; i < dots.length; i++) { dots[i] = new TextView(Constants.mDashboardActivity); dots[i].setText(Html.fromHtml("&#8226;")); dots[i].setTextSize(35); dots[i].setTextColor(Constants.mDashboardActivity.getResources().getColor(R.color.colorGray)); layoutDots.addView(dots[i]); } if (dots.length > 0) dots[currentPage].setTextColor(Constants.mDashboardActivity.getResources().getColor(R.color.colorText)); } /** * View pager adapter */ public class MyViewPagerAdapter extends PagerAdapter { private LayoutInflater layoutInflater; private ArrayList<PostImageModel> adsModelArrayList; public MyViewPagerAdapter(ArrayList<PostImageModel> madsModelArrayList) { adsModelArrayList = madsModelArrayList; } @Override public Object instantiateItem(ViewGroup container, final int position) { layoutInflater = (LayoutInflater) getActivity().getSystemService(Context.LAYOUT_INFLATER_SERVICE); View view = layoutInflater.inflate(R.layout.row_post_image, container, false); ImageView imgAd = view.findViewById(R.id.imgAd); Picasso.get().load(adsModelArrayList.get(position).getImage()).into(imgAd); container.addView(view); view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { /* Intent browserIntent = new Intent(Intent.ACTION_VIEW, Uri.parse(adsModelArrayList.get(position).getLink())); startActivity(browserIntent);*/ } }); return view; } @Override public int getCount() { return adsModelArrayList.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); } } //Method to set timer to slider private void SetSliderAutoTimer() { final Handler handler = new Handler(); final Runnable update = new Runnable() { public void run() { if (currentPage == NUM_PAGES) { currentPage = 0; } try { viewPager.setCurrentItem(currentPage++, true); } catch (Exception e) { e.printStackTrace(); } } }; new Timer().schedule(new TimerTask() { @Override public void run() { handler.post(update); } }, 100, 5000); } 

 private LinearLayout dotsLayout; private TextView[] dots; ArrayList<BannerModel> BannerArrayList; private ViewPager viewPager; private MyViewPagerAdapter myViewPagerAdapter; int currentPage = 0, NUM_PAGES = 0; Timer timer; 

Add this in oncreate

 dotsLayout = (LinearLayout) findViewById(R.id.layoutDots); viewPager = (ViewPager) findViewById(R.id.view_pager_banner); BannerArrayList = new ArrayList<>(); SetAdViewPager(); //Call this in webservice response .. now i m setting dummy data ------------------------------------------ //Add data in arraylist for (int i = 0; i < 6; i++) { BannerModel bannerModel = new BannerModel(); //Add your data here in model BannerArrayList.add(bannerModel); } NUM_PAGES = BannerArrayList.size(); viewPager.getAdapter().notifyDataSetChanged(); myViewPagerAdapter.notifyDataSetChanged(); viewPager.setAdapter(myViewPagerAdapter); addBottomDots(0); SetSliderAutoTimer(); //--------------------------------------------------------------------------- 

Add these methods

 //Method to set timer to slider private void SetSliderAutoTimer() { Log.e("SetSliderAutoTimer", "SetSliderAutoTimer"); final Handler handler = new Handler(); final Runnable update = new Runnable() { public void run() { Log.e("update", "update"); if (currentPage == NUM_PAGES) { currentPage = 0; } viewPager.setCurrentItem(currentPage++, true); } }; timer = new Timer(); timer.schedule(new TimerTask() { @Override public void run() { handler.post(update); } }, 100, 6000); } //Set viepager and adapter private void SetAdViewPager() { myViewPagerAdapter = new MyViewPagerAdapter(BannerArrayList); viewPager.setSaveFromParentEnabled(false); viewPager.setAdapter(myViewPagerAdapter); viewPager.addOnPageChangeListener(viewPagerPageChangeListener); } // viewpager change listener ViewPager.OnPageChangeListener viewPagerPageChangeListener = new ViewPager.OnPageChangeListener() { @Override public void onPageSelected(int position) { addBottomDots(position); } @Override public void onPageScrolled(int arg0, float arg1, int arg2) { } @Override public void onPageScrollStateChanged(int arg0) { } }; //Method to set dots according to slider position private void addBottomDots(int currentPage) { dots = new TextView[BannerArrayList.size()]; dotsLayout.removeAllViews(); for (int i = 0; i < dots.length; i++) { dots[i] = new TextView(SetLocationActivity.this); dots[i].setText(Html.fromHtml("&#8226;")); dots[i].setTextSize(50); dots[i].setTextColor(SetLocationActivity.this.getResources().getColor(R.color.colorGray)); dotsLayout.addView(dots[i]); } if (dots.length > 0) dots[currentPage].setTextColor(SetLocationActivity.this.getResources().getColor(R.color.colorText)); } /** * View pager adapter */ public class MyViewPagerAdapter extends PagerAdapter { private LayoutInflater layoutInflater; private ArrayList<BannerModel> bannerModelArrayList; public MyViewPagerAdapter(ArrayList<BannerModel> mbannerModelArrayList) { bannerModelArrayList = mbannerModelArrayList; } @Override public Object instantiateItem(ViewGroup container, final int position) { layoutInflater = (LayoutInflater) getSystemService(Context.LAYOUT_INFLATER_SERVICE); View view = layoutInflater.inflate(R.layout.row_banner, container, false); ImageView imgAd = view.findViewById(R.id.imgAd); Picasso.get().load(bannerModelArrayList.get(position).getImage()).into(imgAd); container.addView(view); view.setOnClickListener(new View.OnClickListener() { @Override public void onClick(View view) { } }); return view; } @Override public int getCount() { return bannerModelArrayList.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); } } 

xml is as below:

 <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" tools:context="com.sweedesi.android.customerapp.SetLocationActivity"> <android.support.v7.widget.CardView android:id="@+id/cardView_adv_Slider_surchbuses_fragment" android:layout_width="match_parent" android:layout_height="250dp" app:cardBackgroundColor="@color/colorWhite" app:cardElevation="@dimen/margin_10"> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:app="http://schemas.android.com/apk/res-auto" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent"> <android.support.v4.view.ViewPager android:id="@+id/view_pager_banner" android:layout_width="match_parent" android:layout_height="match_parent" android:layout_alignParentStart="true" android:layout_alignParentBottom="true" /> <LinearLayout android:id="@+id/layoutDots" android:layout_width="match_parent" android:layout_height="wrap_content" android:layout_alignParentBottom="true" android:gravity="center" android:orientation="horizontal"></LinearLayout> </RelativeLayout> </android.support.v7.widget.CardView> </LinearLayout>