Circleindicator for ViewPager

ViewerPager 하단에 현재 page index를 표시하는 인디케이터

---

1. build.gradle에 dependency 추가

dependencies {
    implementation 'me.relex:circleindicator:2.1.4'
}

---

2. xml에서 ViewPager 하단에 Circleindicator 위젯 추가

<androidx.appcompat.widget.LinearLayoutCompat
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:orientation="vertical"
    tools:context=".Main.MainActivity">

    <androidx.viewpager.widget.ViewPager
        android:id="@+id/pager_images"
        android:layout_width="match_parent"
        android:layout_height="300dp"/>

    <me.relex.circleindicator.CircleIndicator
        android:id="@+id/indicator"
        android:layout_width="match_parent"
        android:layout_height="35dp"
        app:ci_drawable="@drawable/shape_black_oval"
        app:ci_height="7dp"
        app:ci_margin="4dp"
        app:ci_width="7dp"/>

</androidx.appcompat.widget.LinearLayoutCompat>

 

---

3. Activity class 에서 CircleIndicator 에 ViewPager 연결

public class ShopNewsActivity extends AppCompatActivity {

    private static final String TAG = "ShopNewsActivity";
    private ViewPager pager;
    private ShopImagePagerAdapter pagerAdapter;
    private CircleIndicator indicator;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_shop_news);

        pager = findViewById(R.id.pager_images);
        pagerAdapter = new ShopImagePagerAdapter(this);
        pager.setAdapter(pagerAdapter);

        indicator = findViewById(R.id.indicator);
        indicator.setViewPager(pager);
    }
}

 

---

 

참조 : github.com/tommybuonomo/dotsindicator

tommybuonomo/dotsindicator

참조 : github.com/ongakuer/CircleIndicator

ongakuer/CircleIndicator