CirclePageIndicator pada ImageSlide

Pada artikel sebelumnya tentang image sliding, terasa kurang apabila slide slide tersebut tidak mempunyai sebuah page indicator. Artikel kali ini akan menjelaskan bagaimana menambahkan page indicator di image slide. Page indicator yang digunakan adalah CirclePagerIndicator dari Jake Wharton. Pertama kita tambahkan dependency untuk mendapatkan viewpagerindicator

compile 'com.viewpagerindicator:library:2.4.1@aar'

dan juga tambahkan repositoy pada top-level build.gradle sebagai berikut

maven { url "http://dl.bintray.com/populov/maven"}

Setelah itu kitta dapat menambahkan komponen CirclePageIndicator dibawah ViewPager
Berikut ini contoh layout :
activity_main.xml

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:id="@+id/relativeLayout"
    xmlns:app="http://schemas.android.com/apk/res-auto">

    <android.support.v4.view.ViewPager xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/pager"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
    </android.support.v4.view.ViewPager>
    <com.viewpagerindicator.CirclePageIndicator
        android:id="@+id/indicator"
        android:layout_width="fill_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:padding="10dp"
        android:gravity="bottom"
        app:strokeWidth="1dp"
        />
</RelativeLayout>

Setelah menambahkan circlepageindicator , mungkin akan muncul problem dalam preview layout anda yang berkaitan dengan vpCirclePageIndicatorStyle, hal ini dikarenakan style tersebut belum terdaftar, untuk itu tambahkan potongan code berikut pada styles.xml.

<style name="CustomCirclePageIndicator">
        <item name="fillColor">#FF888888</item>
        <item name="strokeColor">#FF000000</item>
        <item name="strokeWidth">2dp</item>
        <item name="radius">5dp</item>
        <item name="centered">true</item>
    </style>

Dan tambahkan style tersebut pada AppTheme :

<item name="vpiCirclePageIndicatorStyle">@style/CustomCirclePageIndicator</item>

Kembali ke Activity dimana viewpager berada. Cukup dengan menambahkan

circlePageIndicator.setViewPager(viewPager);

maka CirclePageIndicator anda sudah bisa terlihat.
Berikut ini contoh class activity : MainActivity.java

public class MainActivity extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        ViewPager viewPager = (ViewPager) findViewById(R.id.pager);
        List imageUrl = new ArrayList<>();
        //silahkan isi imageUrl dengan url gambar yang di inginkan 
        SwipeImageAdapter swipeImageAdapter = new SwipeImageAdapter(getBaseContext(),imageUrl);
        CirclePageIndicator circlePageIndicator = (CirclePageIndicator) findViewById(R.id.indicator);
        viewPager.setAdapter(swipeImageAdapter);
        circlePageIndicator.setViewPager(viewPager);

    }

}

Selanjutanya, run your app , and finish!!
Demikian tutorial dari saya kali ini , semoga bermanfaat , Thanks !

Sumber :https://github.com/JakeWharton/ViewPagerIndicator