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
