Flash or Pulse Animation for a Button Android

At times we may require to get user’s attention to click on a Button, to view some important information in app. For this purpose Flash or Pulse animation helps us very well. Below are code snippets to implement these animations.

Implementing Flash animation

We can use AnimationDrawable class, to add frames of two different colours, which produces flash animation. Below is an example code.

Here im displaying rounded shape button, so i used RoundRectShape class, given radii as argument. If you want a rectangle shape, just replace radii withnull

AnimationDrawable adBtn;

private void applyFlashBackgroundAnimation(){
     float[] radii = new float[8];
     radii[0] = getResources().getDimension(R.dimen.spacing_10);
     radii[1] = getResources().getDimension(R.dimen.spacing_10);
     radii[2] = getResources().getDimension(R.dimen.spacing_10);
     radii[3] = getResources().getDimension(R.dimen.spacing_10);

     radii[4] = getResources().getDimension(R.dimen.spacing_10);
     radii[5] = getResources().getDimension(R.dimen.spacing_10);
     radii[6] = getResources().getDimension(R.dimen.spacing_10);
     radii[7] = getResources().getDimension(R.dimen.spacing_10);
     ShapeDrawable selShape = new ShapeDrawable();
     selShape.setShape(new RoundRectShape(radii, null, null));
     selShape.getPaint().setColor(Color.GREEN);

     ShapeDrawable defShape = new ShapeDrawable();
     defShape.setShape(new RoundRectShape(radii, null, null));
     defShape.getPaint().setColor(Color.GRAY);
     
     adBtn = new AnimationDrawable();
     adBtn.addFrame(selShape, DELAY);
     adBtn.addFrame(defShape, DELAY);
     adBtn.setOneShot(false);
     btnObj.setBackgroundDrawable(adPick);//btnObj is your Button object
     Handler handler== new Handler();
     handler.postDelayed(new Runnable() {
         @Override
          public void run() {
              adBtn.start();
          }
     }, 100);
}

//To Stop Animation, simply use stop method of AnimationDrawable object as below.
private void stopFlashAnimation()
    adBtn.stop();
}

Implementing Pulse animation

To produce Pulse or Heartbeat animation, we use ObjectAnimator class. Below is the example code.

ObjectAnimator objAnim;
private void pulseAnimation(){
    objAnim= ObjectAnimator.ofPropertyValuesHolder(btnObj, PropertyValuesHolder.ofFloat("scaleX", 1.5f), PropertyValuesHolder.ofFloat("scaleY", 1.5f));
    objAnim.setDuration(300);
    objAnim.setRepeatCount(ObjectAnimator.INFINITE);
    objAnim.setRepeatMode(ObjectAnimator.REVERSE);
    objAnim.start();
}

//To Stop Animation, simply use cancel method of ObjectAnimator object as below.

private void stopPulseAnimation()
    objAnim.cancel();
}

That’s it.

Hope it helps somebody… 🙂

You may also interested in..

Create Rounded Shapes to apply Button background dynamically

Create Rounded Shapes with colours, and apply Button stateslist as background dynamically

While working on applying dynamic themes to app screens, I happen to work on applying Rounded Shapes with the colours dynamically, to display button states (i.e. default, pressed or focused etc) and also Text colors based on the colour codes in API response.

Rounded Shapesrounded_gray

below is the sample XML API response which shows color codes and XML data.

XML Color codes

 <!-- sample xml data -->
<DefBtnColour>#24014c</DefBtnColour>
<SelBtnColour>#5656ff</SelBtnColour>
<DefBtnFontColour>#afdbb6</DefBtnFontColour>
<SelBtnFontColour>#aa0197</SelBtnFontColour>

Applying shapes and button colour states is easy by creating a selector xml file in drawable folder. but applying dynamically need some more insight to implement in code.

Here is the code snippet… for it

First implemented two rounded shapes with <DefBtnColour> and <SelBtnColour> colours data, using ShapeDrawable class.

Rounded Shapes drawables using ShapeDrawable class

float[] radii = new float[8];
radii[0] = getResources().getDimension(R.dimen.spacing_10); //spacing_10 is 10dp
radii[1] = getResources().getDimension(R.dimen.spacing_10);
radii[2] = getResources().getDimension(R.dimen.spacing_10);
radii[3] = getResources().getDimension(R.dimen.spacing_10);

radii[4] = getResources().getDimension(R.dimen.spacing_10);
radii[5] = getResources().getDimension(R.dimen.spacing_10);
radii[6] = getResources().getDimension(R.dimen.spacing_10);
radii[7] = getResources().getDimension(R.dimen.spacing_10);

ShapeDrawable selShape = new ShapeDrawable();
selShape.setShape(new RoundRectShape(radii, null, null));
selShape.getPaint().setColor(selectedColour);

ShapeDrawable defShape = new ShapeDrawable();
defShape.setShape(new RoundRectShape(radii, null, null));
defShape.getPaint().setColor(defaultcolour);

now add these shapes to the StateListDrawable for default and pressed states..

StateListDrawable stateListDrawable = new StateListDrawable();
stateListDrawable.addState(new int[] {android.R.attr.state_pressed}, selShape);
stateListDrawable.addState(new int[] {}, defShape);

now you can return this stateListDrawable object to apply button background drawable.

whole code snippets is below

 //step 1
protected StateListDrawable applyButtonSelector(int defaultcolour,int selectedColour){
    float[] radii = new float[8];
    radii[0] = getResources().getDimension(R.dimen.spacing_10);
    radii[1] = getResources().getDimension(R.dimen.spacing_10);
    radii[2] = getResources().getDimension(R.dimen.spacing_10);
    radii[3] = getResources().getDimension(R.dimen.spacing_10);

    radii[4] = getResources().getDimension(R.dimen.spacing_10);
    radii[5] = getResources().getDimension(R.dimen.spacing_10);
    radii[6] = getResources().getDimension(R.dimen.spacing_10);
    radii[7] = getResources().getDimension(R.dimen.spacing_10);

    ShapeDrawable selShape = new ShapeDrawable();
    selShape.setShape(new RoundRectShape(radii, null, null));
    selShape.getPaint().setColor(selectedColour);

    ShapeDrawable defShape = new ShapeDrawable();
    defShape.setShape(new RoundRectShape(radii, null, null));
    defShape.getPaint().setColor(defaultcolour);

    StateListDrawable stateListDrawable = new StateListDrawable();
    stateListDrawable.addState(new int[] {android.R.attr.state_pressed}, selShape);
    stateListDrawable.addState(new int[] {}, defShape);
    return stateListDrawable;
}

apply to button background as below

//step 2
themeBtn.setBackgroundDrawable(applyButtonSelector(convertToColorInt(DefaultButtonColour), convertToColorInt(SelectedButtonColour)));

below is the code to convert response colour code text to integer colour code

public static int convertToColorInt(String argb) throws IllegalArgumentException {
   if (!argb.startsWith(HASH)) {
      argb = HASH + argb;
   }
   return Color.parseColor(argb);
}

with this code (step 1,2) you can see,  shape and states drawable applied to button dynamically.

To apply ColorStates for button text you can see this post or SO ref link.

Hope this helps somebody…

ref links: http://stackoverflow.com/a/16502692/341443
http://stackoverflow.com/a/5963179/341443

🙂

You may be also interested in