IndicatorBox

by wusp

424 Stars 66 Forks Last release: Not found MIT License 7 Commits 0 Releases

Available items

No Items, yet!

The developer of this repository has not created any items for sale yet. Need a bug fixed? Help with integration? A different license? Create a request here:

IndicatorBox

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.

Menu

FlashBorderView
RippleCircle
PointIndicator&&ViewPagerIndicator
DynamicMarkArea
ParticleHeartView
BounceFreeBar
ShrinkButton

FlashBorderView

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

Java
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
Java
flashBorderView.setPatternDrawer(DynamicPatternDrawer patternDrawer);
to change it.

Custom Attributes

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

RippleCircle

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

Java
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

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

Custom Attributes

PointIndicator

      //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.
ViewPagerIndicator
   //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.

DynamicMarkArea


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

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

ParticleHeartView


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.

BounceFreeBar


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.

ShrinkButton


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.

License

MIT

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.