zeroarst/PagerIndicator

PagerIndicator

Customize your pager view with ease.

Usage

1. You need to specify attribute selector_id with a view id and horizontalscrollview_id with a HorizontalScrollView id.
2. PagerIndicatorLayout extendes from RelativeLayout, which means your can put your selector view wherever you want.
3. You can use any view as your selector, or even a layout.
4. You can put decoration in PagerIndicatorLayout to style your pager indicator, for example, add a foreground gradient. Check sample/ there are some implementations.
5. You need to define a layout as a pager container in HorizontalScrollView, LinearLayout with android:orientation="horizontal" is easier.
6. If you are using LinearLayout as your pager container, DO NOT specify android:layout_gravity, otherwise it wont behave as expect.
7. set select callback withPagerIndicatorLayout.setItemSelectListener(OnItemSelectListener listener)
8. You can use it along with ViewPager. Check out sample/ for all implementation.

Ideally a layout file would be like this:

<com.royliao.pagerindicator.PagerIndicatorLayout
    android:id="@+id/lo_pi"
    style="@style/PagerIndicatorLayout"
    xmlns:pagerIndicator="http://schemas.android.com/apk/res-auto"
    pagerIndicator:horizontalscrollview_id="@+id/hsv"
    pagerIndicator:selector_id="@+id/iv_selector">

    <HorizontalScrollView
        android:id="@+id/hsv"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:scrollbarThumbHorizontal="@android:color/transparent">
        <!-- a container for pager, no layout_gravity defined -->
        <LinearLayout
            android:id="@+id/lo_container"
            android:layout_width="wrap_content"
            android:layout_height="match_parent"
            android:gravity="center_vertical"
            android:orientation="horizontal">

            <TextView
                style="@style/Pager"
                android:text="Page1" />

            <TextView
                style="@style/Pager"
                android:text="Page2" />

            <TextView
                style="@style/Pager"
                android:text="Page3" />

            <TextView
                style="@style/Pager"
                android:text="Page4" />
        </LinearLayout>

    </HorizontalScrollView>
    <!-- selector usually is set after HorizontalScrollView so that it can be on it's top -->
    <ImageView
        android:id="@+id/iv_selector"
        android:layout_width="60dp"
        android:layout_height="match_parent"
        android:layout_centerInParent="true" />

</com.royliao.pagerindicator.PagerIndicatorLayout>