How to make a component shake to warn the user


#1

Some apps show a little window or component shaking when we type a wrong login information, such as a wrong password, username, etc.

With AppyBuilder, we can do that too, by using the TextUtils extension which comes included in every AppyBuilder project.

This is how it looks when finished (You can make any component shake, by just changing the component ID in the procedure parameter).

In the next posts, I will explain how it works.


#2
  1. First, we need to add the TextUtils extension from here:

  1. Then we need to add a clock, with these properties set in the designer:

Capture3


#3

In the blocks editor, we create these 3 variables:

Then we create this procedure:

Capture6

And this Clock.Timer event:

What this group of blocks does?

It’s a Timer event that once enabled will be triggered every 50 milliseconds until it is disabled:

First, it makes the device vibrate.

Then it uses the method TextUtils.Rotate to rotate the specified component in the angle provided. But here’s the trick: Every time it gets here the angle is NEGATED, so if the angle is 3 in the first event, next will be -3, then the next will be 3, -3, 3, -3 etc, etc. That way, the components gets rotated rapidly between 3 degrees and -3 degrees, simulating a shaking movement.
How do we negate a number? By multiplying it by -1 (i.e. 8x-1=-8, -4x-1=4)

Now we subtract 1 from ShakeDuration, which controls how many shakes we want to make.
If ShakeDuration = 0, then we need to stop shaking, but we can’t leave the component as it is, because it will be rotated.
So we do one last rotate to angle 0 to leave it straight.
And lastly we turn off the timer, to stop the effect.


#4

After adding all of that, all you need to use is this procedure block to shake any component:

Capture8

ShakeComponent: Is the ID of the component you want to shake. It can be any component!
ShakeAngle: Is how much the component will rotate with each shake.
ShakeDuration: Is how many shakings you want the component to make before stopping.

Try different values to see what looks better in your app.


#5

Very awesome tutorial, @Italo… very nice shake…:+1: Thanks…


#6

i am getting error for this

does width and height matters for this???


#7

Post your blocks please.


#8

width and height is fill parent
i disabled it because it was not working


#9

You should show all your blocks. At the moment they are cut off or not complete.


#10

I haven’t tried with fill parent properties. If it doesn’t work, reduce the size of your arrangement to 90%, or shake a different component, like a button, a textbox, etc.


#11

Like @Peter_Mathijssen said, you are not showing your relevant blocks. Particularly the ones where you call the shake procedure.


#12

@Italo As discussed, added post here: