Advanced Usage

Material ViewPageIndicator's default configuration is designed to match Google examples as closely as possible. However, if the minimal configuration doesn't meet all of your needs, the indicator as a number of styleable attributes and a matching Java API to allow some customization.

(XML) Styleable Attributes

The easiest way to use customize the indicator is to use XML styleable attributes.

<com.itsronald.widget.ViewPagerIndicator
    android:layout_width="dimension"
    android:layout_height="dimension"
    android:layout_gravity="bottom|top|center_vertical|center"
    android:paddingTop="dimension"
    android:paddingLeft="dimension"
    android:paddingRight="dimension"
    android:paddingBottom="dimension"
    android:gravity="center_vertical|top|bottom"
    app:dotRadius="dimension"
    app:dotPadding="dimension"
    app:selectedDotColor="color"
    app:unselectedDotColor="color"
    app:viewPagerId="id" />

The following attributes can be customized:

• dotRadius: half the width of each dot.
• dotPadding: the width of the space between each dot.
• selectedDotColor: the color of the dot for the currently selected page.
• unselectedDotColor: the color of indicator dots and animation paths for unselected pages

If you do not want to layout the indicator as a direct child of your ViewPager, you can make it a sibling of the ViewPager in a different ViewGroup and then use the app:viewPagerId attribute to point the indicator to its associated ViewPager by its view ID. You must attach the indicator to a ViewPager using either this attribute or by using the implicit binding created when the indicator is added as a child view of the pager.

Java

There are corresponding methods for each XML styleable attribute for usage at runtime:

/**
 * Get the {@link Gravity} used to position dots within the indicator.
 * Only the vertical gravity component is used.
 */
public int getGravity();

/**
 * Set the {@link Gravity} used to position dots within the indicator.
 * Only the vertical gravity component is used.
 *
 * @param newGravity {@link Gravity} constant for positioning indicator dots.
 */
public void setGravity(int newGravity);

/**
 * Get the current spacing between each indicator dot.
 *
 * @return The distance between each indicator dot, in pixels.
 */
@Px
public int getDotPadding();

/**
 * Set the spacing between each indicator dot.
 *
 * @param newDotPadding The distance to use between each indicator dot, in pixels.
 */
public void setDotPadding(@Px int newDotPadding);

/**
 * Get the current radius of each indicator dot.
 *
 * @return The radius of each indicator dot, in pixels.
 */
@Px
public int getDotRadius();

/**
 * Set the radius of each indicator dot.
 *
 * @param newRadius The new radius to use for each indicator dot.
 */
public void setDotRadius(@Px int newRadius);

/**
 * Get the current color for unselected indicator dots.
 *
 * @return The unselected dot color.
 */
@ColorInt
public int getUnselectedDotColor();

/**
 * Set the current color for unselected indicator dots.
 *
 * @param color The new unselected dot color to use.
 */
public void setUnselectedDotColor(@ColorInt int color);

/**
 * Get the current color for selected indicator dots.
 *
 * @return The selected dot color.
 */
@ColorInt
public int getSelectedDotColor();

/**
 * Set the current color for selected indicator dots.
 *
 * @param color The new selected dot color to use.
 */
public void setSelectedDotColor(@ColorInt int color);