The indicator for Android ViewPager2 and ViewPager.
dependencies {
implementation 'io.github.vejei.viewpagerindicator:viewpagerindicator:1.0.0-alpha.1'
}Add Indicator to your layout:
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:background="@android:color/white"
tools:context=".CircleIndicatorFragment">
<androidx.viewpager2.widget.ViewPager2
android:id="@+id/view_pager2"
android:layout_width="match_parent"
android:layout_height="180dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toTopOf="parent"/>
<io.github.vejei.viewpagerindicator.indicator.CircleIndicator
android:id="@+id/circle_indicator"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_marginTop="16dp"
app:layout_constraintStart_toStartOf="parent"
app:layout_constraintEnd_toEndOf="parent"
app:layout_constraintTop_toBottomOf="@id/view_pager2"
app:indicatorColor="@android:color/darker_gray"
app:indicatorSelectedColor="@color/colorAccent"
app:indicatorGap="8dp"
app:indicatorRadius="8dp"/>
</androidx.constraintlayout.widget.ConstraintLayout>And setup in your fragment or activity:
PageAdapter pageAdapter = new PageAdapter();
pageAdapter.setData(Arrays.asList(activity.data));
ViewPager2 viewPager2 = view.findViewById(R.id.view_pager2);
viewPager2.setAdapter(pageAdapter);
CircleIndicator circleIndicator = view.findViewById(R.id.circle_indicator);
circleIndicator.setWithViewPager2(viewPager2, false);
circleIndicator.setItemCount(activity.data.length);
circleIndicator.setAnimationMode(CircleIndicator.AnimationMode.SLIDE);| Method | Description |
|---|---|
setWithViewPager2 |
Set ViewPager2 for the indicator. The userItemCount parameter indicates whether to use the item count of ViewPager2. If the value is true, the indicator use the ViewPager's item count, if it is false, you need to call setItemCount every time the adapter's dataset changed, the default value is true. |
setWithViewPager |
Set ViewPager for the indicator. The userItemCount parameter indicates whether to use the item count of ViewPager. If the value is true, the indicator use the ViewPager's item count, if it is false, you need to call setItemCount every time the adapter's dataset changed, the default value is true. |
setAnimationMode |
Set animation used by the indicator. |
release |
Unregister the callback or listener of the ViewPager2(or ViewPager) and the observer of the ViewPager2(or ViewPager)'s adapter |
Check the Attributes section for details of other methods.
| Method | Description |
|---|---|
setWithViewPager2 |
Set ViewPager2 for the indicator. The userItemCount parameter indicates whether to use the item count of ViewPager2. If the value is true, the indicator use the ViewPager's item count, if it is false, you need to call setItemCount every time the adapter's dataset changed, the default value is true. |
setWithViewPager |
Set ViewPager for the indicator. The userItemCount parameter indicates whether to use the item count of ViewPager. If the value is true, the indicator use the ViewPager's item count, if it is false, you need to call setItemCount every time the adapter's dataset changed, the default value is true. |
setAnimationMode |
Set animation used by the indicator. |
release |
Unregister the callback or listener of the ViewPager2(or ViewPager) and the observer of the ViewPager2(or ViewPager)'s adapter |
Check the Attributes section for details of other methods.
| Attribute | Description | Type | Example Value |
|---|---|---|---|
indicatorColor |
The color of unselected items. | Color | @android:color/darker_gray or #ddd |
indicatorSelectedColor |
The color of selected item. | Color | @color/colorAccent or #ffffff |
indicatorGap |
The gap between indicator items. | Dimension | 8dp |
indicatorRadius |
The indicator item radius. | Dimension | 4dp |
indicatorItemCount |
The indicators item count | Integer | 5 |
| Attribute | Description | Type | Example Value |
|---|---|---|---|
indicatorColor |
The color of unselected items. | Color | @android:color/darker_gray or #ddd |
indicatorSelectedColor |
The color of selected item. | Color | @color/colorAccent or #ffffff |
indicatorGap |
The gap between indicator items. | Dimension | 8dp |
indicatorItemCount |
The indicator item count | Integer | 5 |
indicatorWidth |
The width of the rectangle. | Dimension | 24dp |
indicatorHeight |
The height of the rectangle. | Dimension | 4dp |
indicatorCornerRadius |
The rounded radius of the rectangle. radius. | Dimension | 0dp |
CircleIndicator |
RectIndicator |
|---|---|
 |
 |
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent