search

vejei / ViewPagerIndicator

The indicator for Android ViewPager2 and ViewPager.
MIT License
12 stars 5 forks source link
android-viewpager android-viewpager-indicator android-widget viewpager2

readme

ViewPagerIndicator

The indicator for Android ViewPager2 and ViewPager.

Download

dependencies {
    implementation 'io.github.vejei.viewpagerindicator:viewpagerindicator:1.0.0-alpha.1'
}

Usage

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);

Classes

CircleIndicator

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.

RectIndicator

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.

Attributes

CircleIndicator

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

RectIndicator

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

Screenshots

CircleIndicator RectIndicator

Change Log

Change Log

License

MIT