(Tutorial Android) Android Image Slider

Hai guys, sudah sekian usang rasanya ane gak nulis di blog ini (kira2 setahun). Maklum guys alasannya yakni ane belakangan ini sibuk banget jadi gak sempat bikin tutorial lagi, ditambah lagi juga malas yang berkepanjangan.. :v

Oke2, kali ini ane mau membahas bagaimana menciptakan Image Slider di Android. Temen2 niscaya sudah tidak abnormal lagi dengan yang namanya Image Slider. Jadi, Image Slider merupakan tampilan ibarat slide gambar yang sanggup di geser satu-persatu utk menampilkannya.

Di Android terdapat fitur ViewPager yang sanggup kita manfaatkan untuk menciptakan slider.

Langsung saja ke TKP.

Konfigurasi gradle dulu dengan menambahkan library Picasso.

… dependencies { compile fileTree(dir: 'libs', include: ['*.jar'])     androidTestCompile('com.android.support.test.espresso:espresso-core:2.2.2', {         exclude group: 'com.android.support', module: 'support-annotations'     })     compile 'com.android.support:appcompat-v7:25.0.1'     compile 'com.squareup.picasso:picasso:2.5.2'     testCompile 'junit:junit:4.12' } 

Buat kelas dengan nama CirclePageIndicator. Kelas ini merupakan custom view untuk menampilkan indicator slider.

Code ini intinya aku ambil dari https://github.com/JakeWharton/ViewPagerIndicator/blob/master/library/src/com/viewpagerindicator/CirclePageIndicator.java

import android.content.Context; import android.content.res.Resources; import android.content.res.TypedArray; import android.graphics.Canvas; import android.graphics.Paint; import android.graphics.drawable.Drawable; import android.os.Parcel; import android.os.Parcelable; import android.support.v4.view.MotionEventCompat; import android.support.v4.view.ViewConfigurationCompat; import android.support.v4.view.ViewPager; import android.util.AttributeSet; import android.view.MotionEvent; import android.view.View; import android.view.ViewConfiguration;   import id.co.blogspot.andronut.android_imageslider.R;  import static android.graphics.Paint.ANTI_ALIAS_FLAG; import static android.widget.LinearLayout.HORIZONTAL; import static android.widget.LinearLayout.VERTICAL;  /*  * Copyright (C) 2011 Patrik Akerfeldt  * Copyright (C) 2011 Jake Wharton  *  * Licensed under the Apache License, Version 2.0 (the "License");  * you may not use this file except in compliance with the License.  * You may obtain a copy of the License at  *  *      http://www.apache.org/licenses/LICENSE-2.0  *  * Unless required by applicable law or agreed to in writing, software  * distributed under the License is distributed on an "AS IS" BASIS,  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  * See the License for the specific language governing permissions and  * limitations under the License.  */  public class CirclePageIndicator extends View implements PageIndicator {      private static final int INVALID_POINTER = -1;      private float mRadius;     private final Paint mPaintPageFill = new Paint(ANTI_ALIAS_FLAG);     private final Paint mPaintStroke = new Paint(ANTI_ALIAS_FLAG);     private final Paint mPaintFill = new Paint(ANTI_ALIAS_FLAG);     private ViewPager mViewPager;     private ViewPager.OnPageChangeListener mListener;     private int mCurrentPage;     private int mSnapPage;     private float mPageOffset;     private int mScrollState;     private int mOrientation;     private boolean mCentered;     private boolean mSnap;      private int mTouchSlop;     private float mLastMotionX = -1;     private int mActivePointerId = INVALID_POINTER;     private boolean mIsDragging;       public CirclePageIndicator(Context context) {         this(context, null);     }      public CirclePageIndicator(Context context, AttributeSet attrs) {         this(context, attrs, R.attr.vpiCirclePageIndicatorStyle);     }      public CirclePageIndicator(Context context, AttributeSet attrs, int defStyle) {         super(context, attrs, defStyle);         if (isInEditMode()) return;          //Load defaults from resources         final Resources res = getResources();         final int defaultPageColor = res.getColor(R.color.default_circle_indicator_page_color);         final int defaultFillColor = res.getColor(R.color.default_circle_indicator_fill_color);         final int defaultOrientation = res.getInteger(R.integer.default_circle_indicator_orientation);         final int defaultStrokeColor = res.getColor(R.color.default_circle_indicator_stroke_color);         final float defaultStrokeWidth = res.getDimension(R.dimen.default_circle_indicator_stroke_width);         final float defaultRadius = res.getDimension(R.dimen.viewpager_circleindicator_radius);         final boolean defaultCentered = res.getBoolean(R.bool.default_circle_indicator_centered);         final boolean defaultSnap = res.getBoolean(R.bool.default_circle_indicator_snap);          //Retrieve styles attributes         TypedArray a = context.obtainStyledAttributes(attrs, R.styleable.CirclePageIndicator, defStyle, 0);          mCentered = a.getBoolean(R.styleable.CirclePageIndicator_centered, defaultCentered);         mOrientation = a.getInt(R.styleable.CirclePageIndicator_android_orientation, defaultOrientation);         mPaintPageFill.setStyle(Paint.Style.FILL);         mPaintPageFill.setColor(a.getColor(R.styleable.CirclePageIndicator_pageColor, defaultPageColor));         mPaintStroke.setStyle(Paint.Style.STROKE);         mPaintStroke.setColor(a.getColor(R.styleable.CirclePageIndicator_strokeColor, defaultStrokeColor));         mPaintStroke.setStrokeWidth(a.getDimension(R.styleable.CirclePageIndicator_strokeWidth, defaultStrokeWidth));         mPaintFill.setStyle(Paint.Style.FILL);         mPaintFill.setColor(a.getColor(R.styleable.CirclePageIndicator_fillColor, defaultFillColor));         mRadius = a.getDimension(R.styleable.CirclePageIndicator_radius, defaultRadius);         mSnap = a.getBoolean(R.styleable.CirclePageIndicator_snap, defaultSnap);          Drawable background = a.getDrawable(R.styleable.CirclePageIndicator_android_background);         if (background != null) {             setBackgroundDrawable(background);         }          a.recycle();          final ViewConfiguration configuration = ViewConfiguration.get(context);         mTouchSlop = ViewConfigurationCompat.getScaledPagingTouchSlop(configuration);     }       public void setCentered(boolean centered) {         mCentered = centered;         invalidate();     }      public boolean isCentered() {         return mCentered;     }      public void setPageColor(int pageColor) {         mPaintPageFill.setColor(pageColor);         invalidate();     }      public int getPageColor() {         return mPaintPageFill.getColor();     }      public void setFillColor(int fillColor) {         mPaintFill.setColor(fillColor);         invalidate();     }      public int getFillColor() {         return mPaintFill.getColor();     }      public void setOrientation(int orientation) {         switch (orientation) {             case HORIZONTAL:             case VERTICAL:                 mOrientation = orientation;                 requestLayout();                 break;              default:                 throw new IllegalArgumentException("Orientation must be either HORIZONTAL or VERTICAL.");         }     }      public int getOrientation() {         return mOrientation;     }      public void setStrokeColor(int strokeColor) {         mPaintStroke.setColor(strokeColor);         invalidate();     }      public int getStrokeColor() {         return mPaintStroke.getColor();     }      public void setStrokeWidth(float strokeWidth) {         mPaintStroke.setStrokeWidth(strokeWidth);         invalidate();     }      public float getStrokeWidth() {         return mPaintStroke.getStrokeWidth();     }      public void setRadius(float radius) {         mRadius = radius;         invalidate();     }      public float getRadius() {         return mRadius;     }      public void setSnap(boolean snap) {         mSnap = snap;         invalidate();     }      public boolean isSnap() {         return mSnap;     }      @Override     protected void onDraw(Canvas canvas) {         super.onDraw(canvas);          if (mViewPager == null) {             return;         }         final int count = mViewPager.getAdapter().getCount();         if (count == 0) {             return;         }          if (mCurrentPage >= count) {             setCurrentItem(count - 1);             return;         }          int longSize;         int longPaddingBefore;         int longPaddingAfter;         int shortPaddingBefore;         if (mOrientation == HORIZONTAL) {             longSize = getWidth();             longPaddingBefore = getPaddingLeft();             longPaddingAfter = getPaddingRight();             shortPaddingBefore = getPaddingTop();         } else {             longSize = getHeight();             longPaddingBefore = getPaddingTop();             longPaddingAfter = getPaddingBottom();             shortPaddingBefore = getPaddingLeft();         }          final float threeRadius = mRadius * 3;         final float shortOffset = shortPaddingBefore + mRadius;         float longOffset = longPaddingBefore + mRadius;         if (mCentered) {             longOffset += ((longSize - longPaddingBefore - longPaddingAfter) / 2.0f) - ((count * threeRadius) / 2.0f);         }          float dX;         float dY;          float pageFillRadius = mRadius;         if (mPaintStroke.getStrokeWidth() > 0) {             pageFillRadius -= mPaintStroke.getStrokeWidth() / 2.0f;         }          //Draw stroked circles         for (int iLoop = 0; iLoop < count; iLoop++) {             float drawLong = longOffset + (iLoop * threeRadius);             if (mOrientation == HORIZONTAL) {                 dX = drawLong;                 dY = shortOffset;             } else {                 dX = shortOffset;                 dY = drawLong;             }             // Only paint fill if not completely transparent             if (mPaintPageFill.getAlpha() > 0) {                 canvas.drawCircle(dX, dY, pageFillRadius, mPaintPageFill);             }              // Only paint stroke if a stroke width was non-zero             if (pageFillRadius != mRadius) {                 canvas.drawCircle(dX, dY, mRadius, mPaintStroke);             }         }          //Draw the filled circle according to the current scroll         float cx = (mSnap ? mSnapPage : mCurrentPage) * threeRadius;         if (!mSnap) {             cx += mPageOffset * threeRadius;         }         if (mOrientation == HORIZONTAL) {             dX = longOffset + cx;             dY = shortOffset;         } else {             dX = shortOffset;             dY = longOffset + cx;         }         canvas.drawCircle(dX, dY, mRadius, mPaintFill);     }      public boolean onTouchEvent(MotionEvent ev) {         if (super.onTouchEvent(ev)) {             return true;         }         if ((mViewPager == null) || (mViewPager.getAdapter().getCount() == 0)) {             return false;         }          final int action = ev.getAction() & MotionEventCompat.ACTION_MASK;         switch (action) {             case MotionEvent.ACTION_DOWN:                 mActivePointerId = MotionEventCompat.getPointerId(ev, 0);                 mLastMotionX = ev.getX();                 break;              case MotionEvent.ACTION_MOVE: {                 final int activePointerIndex = MotionEventCompat.findPointerIndex(ev, mActivePointerId);                 final float x = MotionEventCompat.getX(ev, activePointerIndex);                 final float deltaX = x - mLastMotionX;                  if (!mIsDragging) {                     if (Math.abs(deltaX) > mTouchSlop) {                         mIsDragging = true;                     }                 }                  if (mIsDragging) {                     mLastMotionX = x;                     if (mViewPager.isFakeDragging() || mViewPager.beginFakeDrag()) {                         mViewPager.fakeDragBy(deltaX);                     }                 }                  break;             }              case MotionEvent.ACTION_CANCEL:             case MotionEvent.ACTION_UP:                 if (!mIsDragging) {                     final int count = mViewPager.getAdapter().getCount();                     final int width = getWidth();                     final float halfWidth = width / 2f;                     final float sixthWidth = width / 6f;                      if ((mCurrentPage > 0) && (ev.getX() < halfWidth - sixthWidth)) {                         if (action != MotionEvent.ACTION_CANCEL) {                             mViewPager.setCurrentItem(mCurrentPage - 1);                         }                         return true;                     } else if ((mCurrentPage < count - 1) && (ev.getX() > halfWidth + sixthWidth)) {                         if (action != MotionEvent.ACTION_CANCEL) {                             mViewPager.setCurrentItem(mCurrentPage + 1);                         }                         return true;                     }                 }                  mIsDragging = false;                 mActivePointerId = INVALID_POINTER;                 if (mViewPager.isFakeDragging()) mViewPager.endFakeDrag();                 break;              case MotionEventCompat.ACTION_POINTER_DOWN: {                 final int index = MotionEventCompat.getActionIndex(ev);                 mLastMotionX = MotionEventCompat.getX(ev, index);                 mActivePointerId = MotionEventCompat.getPointerId(ev, index);                 break;             }              case MotionEventCompat.ACTION_POINTER_UP:                 final int pointerIndex = MotionEventCompat.getActionIndex(ev);                 final int pointerId = MotionEventCompat.getPointerId(ev, pointerIndex);                 if (pointerId == mActivePointerId) {                     final int newPointerIndex = pointerIndex == 0 ? 1 : 0;                     mActivePointerId = MotionEventCompat.getPointerId(ev, newPointerIndex);                 }                 mLastMotionX = MotionEventCompat.getX(ev, MotionEventCompat.findPointerIndex(ev, mActivePointerId));                 break;         }          return true;     }      @Override     public void setViewPager(ViewPager view) {         if (mViewPager == view) {             return;         }         if (mViewPager != null) {             mViewPager.setOnPageChangeListener(null);         }         if (view.getAdapter() == null) {             throw new IllegalStateException("ViewPager does not have adapter instance.");         }         mViewPager = view;         mViewPager.setOnPageChangeListener(this);         invalidate();     }      @Override     public void setViewPager(ViewPager view, int initialPosition) {         setViewPager(view);         setCurrentItem(initialPosition);     }      @Override     public void setCurrentItem(int item) {         if (mViewPager == null) {             throw new IllegalStateException("ViewPager has not been bound.");         }         mViewPager.setCurrentItem(item);         mCurrentPage = item;         invalidate();     }      @Override     public void notifyDataSetChanged() {         invalidate();     }      @Override     public void onPageScrollStateChanged(int state) {         mScrollState = state;          if (mListener != null) {             mListener.onPageScrollStateChanged(state);         }     }      @Override     public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {         mCurrentPage = position;         mPageOffset = positionOffset;         invalidate();          if (mListener != null) {             mListener.onPageScrolled(position, positionOffset, positionOffsetPixels);         }     }      @Override     public void onPageSelected(int position) {         if (mSnap || mScrollState == ViewPager.SCROLL_STATE_IDLE) {             mCurrentPage = position;             mSnapPage = position;             invalidate();         }          if (mListener != null) {             mListener.onPageSelected(position);         }     }      @Override     public void setOnPageChangeListener(ViewPager.OnPageChangeListener listener) {         mListener = listener;     }      /*      * (non-Javadoc)      *      * @see android.view.View#onMeasure(int, int)      */     @Override     protected void onMeasure(int widthMeasureSpec, int heightMeasureSpec) {         if (mOrientation == HORIZONTAL) {             setMeasuredDimension(measureLong(widthMeasureSpec), measureShort(heightMeasureSpec));         } else {             setMeasuredDimension(measureShort(widthMeasureSpec), measureLong(heightMeasureSpec));         }     }      /**      * Determines the width of this view      *      * @param measureSpec      *            A measureSpec packed into an int      * @return The width of the view, honoring constraints from measureSpec      */     private int measureLong(int measureSpec) {         int result;         int specMode = MeasureSpec.getMode(measureSpec);         int specSize = MeasureSpec.getSize(measureSpec);          if ((specMode == MeasureSpec.EXACTLY) || (mViewPager == null)) {             //We were told how big to be             result = specSize;         } else {             //Calculate the width according the views count             final int count = mViewPager.getAdapter().getCount();             result = (int)(getPaddingLeft() + getPaddingRight()                     + (count * 2 * mRadius) + (count - 1) * mRadius + 1);             //Respect AT_MOST value if that was what is called for by measureSpec             if (specMode == MeasureSpec.AT_MOST) {                 result = Math.min(result, specSize);             }         }         return result;     }      /**      * Determines the height of this view      *      * @param measureSpec      *            A measureSpec packed into an int      * @return The height of the view, honoring constraints from measureSpec      */     private int measureShort(int measureSpec) {         int result;         int specMode = MeasureSpec.getMode(measureSpec);         int specSize = MeasureSpec.getSize(measureSpec);          if (specMode == MeasureSpec.EXACTLY) {             //We were told how big to be             result = specSize;         } else {             //Measure the height             result = (int)(2 * mRadius + getPaddingTop() + getPaddingBottom() + 1);             //Respect AT_MOST value if that was what is called for by measureSpec             if (specMode == MeasureSpec.AT_MOST) {                 result = Math.min(result, specSize);             }         }         return result;     }      @Override     public void onRestoreInstanceState(Parcelable state) {         SavedState savedState = (SavedState)state;         super.onRestoreInstanceState(savedState.getSuperState());         mCurrentPage = savedState.currentPage;         mSnapPage = savedState.currentPage;         requestLayout();     }      @Override     public Parcelable onSaveInstanceState() {         Parcelable superState = super.onSaveInstanceState();         SavedState savedState = new SavedState(superState);         savedState.currentPage = mCurrentPage;         return savedState;     }      static class SavedState extends BaseSavedState {         int currentPage;          public SavedState(Parcelable superState) {             super(superState);         }          private SavedState(Parcel in) {             super(in);             currentPage = in.readInt();         }          @Override         public void writeToParcel(Parcel dest, int flags) {             super.writeToParcel(dest, flags);             dest.writeInt(currentPage);         }          @SuppressWarnings("UnusedDeclaration")         public static final Creator<SavedState> CREATOR = new Creator<SavedState>() {             @Override             public SavedState createFromParcel(Parcel in) {                 return new SavedState(in);             }              @Override             public SavedState[] newArray(int size) {                 return new SavedState[size];             }         };     } }  

Kemudian buat interface dengan nama PageIndicator.

Code nya juga aku ambil dari sini https://github.com/JakeWharton/ViewPagerIndicator/blob/master/library/src/com/viewpagerindicator/PageIndicator.java

/*  * Copyright (C) 2011 Patrik Akerfeldt  * Copyright (C) 2011 Jake Wharton  *  * Licensed under the Apache License, Version 2.0 (the "License");  * you may not use this file except in compliance with the License.  * You may obtain a copy of the License at  *  *      http://www.apache.org/licenses/LICENSE-2.0  *  * Unless required by applicable law or agreed to in writing, software  * distributed under the License is distributed on an "AS IS" BASIS,  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.  * See the License for the specific language governing permissions and  * limitations under the License.  */  import android.support.v4.view.ViewPager;  /**  * A PageIndicator is responsible to show an visual indicator on the total views  * number and the current visible view.  */  public interface PageIndicator extends ViewPager.OnPageChangeListener {      /**      * Bind the indicator to a ViewPager.      *      * @param view      */     void setViewPager(ViewPager view);      /**      * Bind the indicator to a ViewPager.      *      * @param view      * @param initialPosition      */     void setViewPager(ViewPager view, int initialPosition);      /**      * <p>Set the current page of both the ViewPager and indicator.</p>      *      * <p>This <strong>must</strong> be used if you need to set the page before      * the views are drawn on screen (e.g., default start page).</p>      *      * @param item      */     void setCurrentItem(int item);      /**      * Set a page change listener which will receive forwarded events.      *      * @param listener      */     void setOnPageChangeListener(ViewPager.OnPageChangeListener listener);      /**      * Notify the indicator that the fragment list has changed.      */     void notifyDataSetChanged();  }  

Selanjutnya buat beberapa layout berikut :

list_item_pager.xml
Layout ini berisi ImageView untuk menampilkan image.

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

viewpager_slide.xml
Layout berisi ViewPager dan Custom CirclePageIndicator.

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     android:layout_width="match_parent"     android:layout_height="250dp">      <android.support.v4.view.ViewPager         android:id="@+id/pager"         android:layout_width="match_parent"         android:layout_height="match_parent"         android:background="@null" />      <id.co.blogspot.andronut.android_imageslider.widget.CirclePageIndicator         android:id="@+id/indicator"         android:layout_width="match_parent"         android:layout_height="wrap_content"         android:layout_alignParentBottom="true"         android:padding="10dp" />  </RelativeLayout> 

activity_main.xml

<?xml version="1.0" encoding="utf-8"?> <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"     xmlns:tools="http://schemas.android.com/tools"     android:id="@+id/activity_main"     android:layout_width="match_parent"     android:layout_height="match_parent"     tools:context="id.co.blogspot.andronut.android_imageslider.MainActivity">      <include         layout="@layout/viewpager_slide" />  </RelativeLayout> 

Tambahkan beberapa resource values yang diperlukan.

attrs.xml

<?xml version="1.0" encoding="utf-8"?> <resources>      <attr name="centered" format="boolean" />     <attr name="selectedColor" format="color" />     <attr name="strokeWidth" format="dimension" />     <attr name="unselectedColor" format="color" />      <!-- Circle Page Indicator -->     <declare-styleable name="ViewPagerIndicator">         <!-- Style of the circle indicator. -->         <attr name="vpiCirclePageIndicatorStyle" format="reference"/>         <!-- Style of the icon indicator's views. -->         <attr name="vpiIconPageIndicatorStyle" format="reference"/>         <!-- Style of the line indicator. -->         <attr name="vpiLinePageIndicatorStyle" format="reference"/>         <!-- Style of the title indicator. -->         <attr name="vpiTitlePageIndicatorStyle" format="reference"/>         <!-- Style of the tab indicator's tabs. -->         <attr name="vpiTabPageIndicatorStyle" format="reference"/>         <!-- Style of the underline indicator. -->         <attr name="vpiUnderlinePageIndicatorStyle" format="reference"/>     </declare-styleable>      <declare-styleable name="CirclePageIndicator">         <!-- Whether or not the indicators should be centered. -->         <attr name="centered" />         <!-- Color of the filled circle that represents the current page. -->         <attr name="fillColor" format="color" />         <!-- Color of the filled circles that represents pages. -->         <attr name="pageColor" format="color" />         <!-- Orientation of the indicator. -->         <attr name="android:orientation"/>         <!-- Radius of the circles. This is also the spacing between circles. -->         <attr name="radius" format="dimension" />         <!-- Whether or not the selected indicator snaps to the circles. -->         <attr name="snap" format="boolean" />         <!-- Color of the open circles. -->         <attr name="strokeColor" format="color" />         <!-- Width of the stroke used to draw the circles. -->         <attr name="strokeWidth" />         <!-- View background -->         <attr name="android:background"/>     </declare-styleable>   </resources> 

bools.xml

<?xml version="1.0" encoding="utf-8"?> <resources>     <bool name="default_circle_indicator_centered">true</bool>     <bool name="default_circle_indicator_snap">false</bool> </resources> 

colors.xml

<?xml version="1.0" encoding="utf-8"?> <resources>     <color name="colorPrimary">#5d4037</color>     <color name="colorPrimaryDark">#321911</color>     <color name="colorAccent">#FF4081</color>     <color name="colorWhite">#FFFFFF</color>      <!-- Circle Page Indicator -->     <color name="default_circle_indicator_fill_color">@color/colorPrimary</color>     <color name="default_circle_indicator_page_color">@color/colorWhite</color>     <color name="default_circle_indicator_stroke_color">@android:color/transparent</color>  </resources> 

integers.xml

<?xml version="1.0" encoding="utf-8"?> <resources>      <!-- Circle Page Indicator -->     <integer name="default_circle_indicator_orientation">0</integer>  </resources> 

Kembali ke kelas java, buat kelas dengan nama ImagePagerAdapter.

import android.content.Context; import android.support.v4.view.PagerAdapter; import android.view.LayoutInflater; import android.view.View; import android.view.ViewGroup; import android.widget.ImageView; import android.widget.RelativeLayout;  import com.squareup.picasso.Picasso;  import java.util.ArrayList; import java.util.List;  /**  * Created by kwikkunusantara on 8/10/18.  */  public class ImagePagerAdapter extends PagerAdapter {      private Context context;     private List<String> images;      public ImagePagerAdapter(Context context) {         this.context = context;         this.images = new ArrayList<>();     }      public void setImages(List<String> images) {         for (int i = 0; i < images.size(); i++){             this.images.add(images.get(i));         }         notifyDataSetChanged();     }      @Override     public int getCount() {         return images.size();     }      @Override     public boolean isViewFromObject(View view, Object object) {         return view == object;     }      @Override     public Object instantiateItem(ViewGroup container, int position) {         String image = images.get(position);         LayoutInflater inflater = (LayoutInflater) context.getSystemService(Context.LAYOUT_INFLATER_SERVICE);          View itemView = inflater.inflate(R.layout.item_image_pager, container, false);         ImageView ivHeader = (ImageView) itemView.findViewById(R.id.iv_header);          Picasso.with(context)                 .load(image)                 .into(ivHeader);          container.addView(itemView);          return itemView;     }      @Override     public void destroyItem(ViewGroup container, int position, Object object) {         container.removeView((RelativeLayout) object);     } }  

Setelah itu tambahkan code berikut di MainActivity. 

Di sini aku menambahkan Timer supaya Slider-nya sanggup bergerak otomatis. Beberapa image aku ambil dari link Facebook nya Aliga <3. *Dasar Jones

import android.os.Bundle; import android.support.v4.view.ViewPager; import android.support.v7.app.AppCompatActivity;  import java.util.ArrayList; import java.util.List; import java.util.Timer; import java.util.TimerTask;  import id.co.blogspot.andronut.android_imageslider.widget.CirclePageIndicator;  public class MainActivity extends AppCompatActivity {      private ViewPager viewPager;     private CirclePageIndicator pagerIndicator;      private ImagePagerAdapter imagePagerAdapter;      private Timer timer;      private List<String> images;      @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);          viewPager = (ViewPager) findViewById(R.id.pager);         pagerIndicator = (CirclePageIndicator) findViewById(R.id.indicator);          imagePagerAdapter = new ImagePagerAdapter(this);          viewPager.setAdapter(imagePagerAdapter);         pagerIndicator.setViewPager(viewPager);          images = new ArrayList<>();         images.add("https://scontent.fcgk12-1.fna.fbcdn.net/v/t1.0-9/30260981_1697358283684452_5345280777774956544_n.jpg?_nc_cat=0&oh=780b2eba44f38c3400b8e219060b3278&oe=5C08A56E");         images.add("https://scontent.fcgk12-1.fna.fbcdn.net/v/t1.0-9/30412288_1697358530351094_6652467221207449600_n.jpg?_nc_cat=0&oh=9c39ae9327064d3c21490a556acf28a3&oe=5C137E2E");         images.add("https://scontent.fcgk12-1.fna.fbcdn.net/v/t1.0-9/30412267_1697358943684386_6572812530102566912_n.jpg?_nc_cat=0&oh=1876343af22cad2f49d352343eb3eb6b&oe=5C12B116");         images.add("https://scontent.fcgk12-1.fna.fbcdn.net/v/t1.0-9/30261069_1697359000351047_8720462127048949760_n.jpg?_nc_cat=0&oh=44a1c82bebff0f61b811ef2bb94b3196&oe=5BC978E2");          imagePagerAdapter.setImages(images);          timer = new Timer();         timer.scheduleAtFixedRate(new SliderTimer(), 3000, 5000);     }      private class SliderTimer extends TimerTask {          @Override         public void run() {             runOnUiThread(new Runnable() {                 @Override                 public void run() {                     if (viewPager.getCurrentItem() < imagePagerAdapter.getCount() - 1) {                         viewPager.setCurrentItem(viewPager.getCurrentItem() + 1);                     } else {                         viewPager.setCurrentItem(0);                     }                 }             });         };     }      @Override     protected void onDestroy() {         super.onDestroy();          timer.cancel();     } } 

Terakhir tambahkan permission INTERNET di AndroidManifest.

<?xml version="1.0" encoding="utf-8"?> <manifest xmlns:android="http://schemas.android.com/apk/res/android"     package="id.co.blogspot.andronut.android_imageslider">      <uses-permission android:name="android.permission.INTERNET" />      <application         android:allowBackup="true"         android:icon="@mipmap/ic_launcher"         android:label="@string/app_name"         android:supportsRtl="true"         android:theme="@style/AppTheme">         <activity android:name=".MainActivity">             <intent-filter>                 <action android:name="android.intent.action.MAIN" />                  <category android:name="android.intent.category.LAUNCHER" />             </intent-filter>         </activity>     </application>  </manifest> 

Build dan jalankan maka hasinya sebagai berikut :

Source code lengkap sanggup dilihat di https://github.com/andronut/Android-ImageSlider
Sekian dulu untuk tutorial kali ini dan biar bermanfaat.

Jangan lupa share ^^