Need help with IndicatorBox?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

424 Stars 66 Forks MIT License 7 Commits 0 Opened issues

Services available


Need anything else?

Contributors list

# 217,979
7 commits


I have changed the name to IndicatorBox from wuspViewPkg.

This package includes some of Android custom views I create, most of them have animation effects.
I'll add my custom views to this package and optimize them continually.
Each of them has a .gif animation to simply display the animation effect and at least one using example.




The FlashBorderView extends LinearLayout, so you can add the views you want just like using LinearLayout. Animation is controlled by the parameter mFraction, so for each animation fraction you should invoke

flashBorderView.setmFraction(int animationFraction);
flashBorderView.invalidate();   //from UI thread
flashBorderView.postInvalidate();   //from non-UI thread
to generate animation. Also how this view perform animation has been defined by patternDrawer which is a instance implements Interface DynamicPatternDrawer. If you want to use your own animation effects, just using
flashBorderView.setPatternDrawer(DynamicPatternDrawer patternDrawer);
to change it.

Custom Attributes

   //To indicate how width the border is.
   //To indicate the border color.


The RippleCircle is a circle that has a ripple animation effect, the content drawn on the circle center is not defined. You can dynamically invoke it by calling

setPatternDrawer(StaticPatternDrawer patternDrawer);
or create a subclass of RippleCircle, for example ViewPagerIndicator on ViewPagerIndicatorActivity here.

Custom Attributes

    //To indicate the radius of the circle(solid, ripple circle center).
   //To indicate the background color of the circle.
   //To indicate the ripple effect color.
   //To indicate the ripple effect width.

FlashBorder and RippleCircle using example:

PointIndicator && ViewPagerIndicator

The PointIndicator is that series of points used to indicator something. PointIndicator extends LinearLayout, so you change the direction of points by setting the direction property. Both of them are designed to work with ViewPager and easy to use, after defining on layout.xml, just invoke

indicator.setViewPager(ViewPager viewPager);  //ViewPagerIndicator
pointIndicator.setViewPager(ViewPager viewPager);   //PointIndicator
to bind to ViewPager, but PointIndicator also need to call
pointIndicator.setIndicatorNum(int count);

Custom Attributes


      //To indicate the single indicator width.
   //To indicate the signle indicatorHeigt.
    //To indicate the distance between two indicators.
   //To indicate how does the indicator animates.
   //To indicate the selected indicator, probally is a drawable.
   //To indicate the un-selected indicator.
   //To indicate the small text color.
   //To indicate the big text color.
    //To indicate the slash color.
    //To indicate the small text size.
    //To indicate the big text size.


Nothing sepcial here. Just the example of using DynamicPatternDrawer interface. To display different animation content, just to invoke

markArea.setDynamicPatternDrawer(DynamicPatternDrawer dynamicPatternDrawer);
then the view would perform the animation content you design.


First, it's just an example of combining particle system and other animation effects (ex. circle-expanding and heart-beat here). Second, the ParticleHeartView design idea comes from Twitter like button which you can see on Twitter applications. Third, obviously the particle system is so great and so powerful, you can use particle system to make dramatic animations, don't be restricted by this example, just do your beautiful and amazing customization.


Well, I think that may be this animation is too thin (is not!), which needs to cooperate with other animations to perform a more beautiful and splendid animation effect. The time the bar is visible on window, the animation would be started automatically and stop itself when it's invisible on window.

Custom Attributes

    //To indicate the three points color.
    //To indicate the vibration line color.
   //To indicate the vibration line width.
    //To indicate the vibration line height.


The ShrinkButton is just a rounded button which rectangle part would perform a diminishing animation (specific to a 45 px radius corner here.) and then perform an infinite dynamic animation at the center of the view (if there's an animation) as the follwing.



We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.