Android Question Button Animation Border

Emme Developer

Well-Known Member
Licensed User
Longtime User
Hi!
I've a button with border and radius. Is possible to animate the appear of border when an user clicks on button? I mean that before click border is set to 0, and when user click border appear like an animation with this libs. I tried different animation libraries, but i don't find nothing. I cannot use an svg because in iOS is not avaialble such library.

This is button.
upload_2017-9-3_16-22-14.png

Thanks!
 

Star-Dust

Expert
Licensed User
Longtime User
That very animation I do not believe. Because you should have strings to insert on the GlyphStrings field that forms the animated image.
I do not know if it's a new idea to create new animations compared to existing and documented ones.

However, you can create other animations.
In Desgin, you can put an image or graphic setting for the button in the normal state, one for when clicked and one if it is disabled.

Or when the Button_Click event occurs, you can insert an Animation (Button) function in the sub event that changes or creates an animation in the View Background. The ways would be different.

Precisely do not know what you want to get as an animation.
 
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
A generic animation implementation is available here: https://www.b4x.com/android/forum/threads/b4x-custom-view-circularprogressbar.81604/#content
You just need to implement the frame drawing. In this case:
B4X:
Private Sub DrawValue(View As View, Value As Float)
   Dim cd As ColorDrawable
   cd.Initialize2(Colors.Transparent, 2dip, Value, Colors.Red)
   View.Background = cd
End Sub

It will be easier to animate the border of a label as the button's background is made of multiple drawables grouped in a StateListDrawable.

See the attached example.
 

Attachments

  • AnimatedBorder.zip
    7.8 KB · Views: 343
Upvote 0

Emme Developer

Well-Known Member
Licensed User
Longtime User
Thanks for the answer!
@Erel i tried your example, but i doesn't look what i want to achieve. I prefer that border is not complete at start. For explain clearly what i mean, i write this code. But i don't know why, it doesnt work properly. Vertical line doesn't animate

B4X:
Sub AnimateClick(v As View)
    Sleep(200)
   
    Dim cv As Canvas
    cv.Initialize(v)
   
    Dim x As Int = v.Width/2-2dip
    Dim x2 As Int = v.Width/2+2dip
    Dim t As Int = 100/(v.Width/5dip)
    Dim vH As Int = (v.Height-2dip)/t
    Dim y As Int = v.Height/2-vH
    Dim y2 As Int = v.Height/2+vH
   
    For i = 0 To (v.Width/5dip)-1
        cv.DrawLine(x,2dip,x2,2dip,0xffffffff,2dip)
        cv.DrawLine(x,v.Height-2dip,x2,v.Height-2dip,0xffffffff,2dip)
        cv.DrawLine(2dip,y,2dip,y2,0xffffffff,2dip)
        cv.DrawLine(v.Width-2dip,y,v.Width-2dip,y2,0xffffffff,2dip)
        x = x -5dip
        x2 = x2 +5dip
        y = y -vH
        y2 = y2+vH
        Sleep(t)
        v.Invalidate
    Next

End Sub
 
Upvote 0

Emme Developer

Well-Known Member
Licensed User
Longtime User
We cannot guess what you want to achieve. You should post a screenshot or two that demonstrate it.
I want to achieve this effect. Border that appear like in attached image

Or like "Center" in this page
 

Attachments

  • Mockup-Recuperato.png
    Mockup-Recuperato.png
    265.2 KB · Views: 284
  • Mockup-Recuperato.png
    Mockup-Recuperato.png
    265.2 KB · Views: 274
Last edited:
Upvote 0

Erel

B4X founder
Staff member
Licensed User
Longtime User
The correct way to implement a custom animation should be based on the code I posted.

test.gif



B4X:
Private Sub AnimateBorder(View As View)
   Dim n As Long = DateTime.Now
   Dim duration As Int = 500
   Dim start As Float = 0
   Dim tempValue As Float
   Dim cvs As Canvas
   cvs.Initialize(View)
   cvs.DrawColor(Colors.Transparent)
   Do While DateTime.Now < n + duration
     tempValue = ValueFromTimeLinear(DateTime.Now - n, start, 100 - start, duration)
     DrawValue(View, cvs, tempValue)
     Sleep(10)
   Loop
   DrawValue(View, cvs, 100)
End Sub

Private Sub DrawValue(View As View, cvs As Canvas, Value As Float)
   Dim clr As Int = Colors.White
   Dim strokewidth As Int = 4dip
   Dim cx = View.Width / 2 As Float
   Dim width As Float = View.Width / 50 * Min(50, Value)
   cvs.DrawLine(cx - width / 2, 0, cx + width / 2, 0, clr, strokewidth)
   cvs.DrawLine(cx - width / 2, View.Height, cx + width / 2, View.Height, clr, strokewidth)
   If Value > 50 Then
     Dim height As Float = View.Height / 50 * (Value - 50)
     cvs.DrawLine(0, 0, 0, height / 2, clr, strokewidth)
     cvs.DrawLine(0, View.Height, 0,  View.Height - height / 2, clr, strokewidth)
     cvs.DrawLine(View.Width, 0, View.Width, height / 2, clr, strokewidth)
     cvs.DrawLine(View.Width, View.Height, View.Width, View.Height - height / 2, clr, strokewidth)
   End If
   View.Invalidate
End Sub

It works in both debug and release modes. The animation is smooth in release mode.
 
Upvote 0

Star-Dust

Expert
Licensed User
Longtime User
The correct way to implement a custom animation should be based on the code I posted.

View attachment 59321


B4X:
Private Sub AnimateBorder(View As View)
   Dim n As Long = DateTime.Now
   Dim duration As Int = 500
   Dim start As Float = 0
   Dim tempValue As Float
   Dim cvs As Canvas
   cvs.Initialize(View)
   cvs.DrawColor(Colors.Transparent)
   Do While DateTime.Now < n + duration
     tempValue = ValueFromTimeLinear(DateTime.Now - n, start, 100 - start, duration)
     DrawValue(View, cvs, tempValue)
     Sleep(10)
   Loop
   DrawValue(View, cvs, 100)
End Sub

Private Sub DrawValue(View As View, cvs As Canvas, Value As Float)
   Dim clr As Int = Colors.White
   Dim strokewidth As Int = 4dip
   Dim cx = View.Width / 2 As Float
   Dim width As Float = View.Width / 50 * Min(50, Value)
   cvs.DrawLine(cx - width / 2, 0, cx + width / 2, 0, clr, strokewidth)
   cvs.DrawLine(cx - width / 2, View.Height, cx + width / 2, View.Height, clr, strokewidth)
   If Value > 50 Then
     Dim height As Float = View.Height / 50 * (Value - 50)
     cvs.DrawLine(0, 0, 0, height / 2, clr, strokewidth)
     cvs.DrawLine(0, View.Height, 0,  View.Height - height / 2, clr, strokewidth)
     cvs.DrawLine(View.Width, 0, View.Width, height / 2, clr, strokewidth)
     cvs.DrawLine(View.Width, View.Height, View.Width, View.Height - height / 2, clr, strokewidth)
   End If
   View.Invalidate
End Sub

It works in both debug and release modes. The animation is smooth in release mode.
Exceptional Erel
 
Upvote 0

Emme Developer

Well-Known Member
Licensed User
Longtime User
The correct way to implement a custom animation should be based on the code I posted.

View attachment 59321


B4X:
Private Sub AnimateBorder(View As View)
   Dim n As Long = DateTime.Now
   Dim duration As Int = 500
   Dim start As Float = 0
   Dim tempValue As Float
   Dim cvs As Canvas
   cvs.Initialize(View)
   cvs.DrawColor(Colors.Transparent)
   Do While DateTime.Now < n + duration
     tempValue = ValueFromTimeLinear(DateTime.Now - n, start, 100 - start, duration)
     DrawValue(View, cvs, tempValue)
     Sleep(10)
   Loop
   DrawValue(View, cvs, 100)
End Sub

Private Sub DrawValue(View As View, cvs As Canvas, Value As Float)
   Dim clr As Int = Colors.White
   Dim strokewidth As Int = 4dip
   Dim cx = View.Width / 2 As Float
   Dim width As Float = View.Width / 50 * Min(50, Value)
   cvs.DrawLine(cx - width / 2, 0, cx + width / 2, 0, clr, strokewidth)
   cvs.DrawLine(cx - width / 2, View.Height, cx + width / 2, View.Height, clr, strokewidth)
   If Value > 50 Then
     Dim height As Float = View.Height / 50 * (Value - 50)
     cvs.DrawLine(0, 0, 0, height / 2, clr, strokewidth)
     cvs.DrawLine(0, View.Height, 0,  View.Height - height / 2, clr, strokewidth)
     cvs.DrawLine(View.Width, 0, View.Width, height / 2, clr, strokewidth)
     cvs.DrawLine(View.Width, View.Height, View.Width, View.Height - height / 2, clr, strokewidth)
   End If
   View.Invalidate
End Sub

It works in both debug and release modes. The animation is smooth in release mode.
Very Very impressive!
Only one question, why this works, but in for loop with the wait doesnt work?
Thanks anyway
 
Last edited:
Upvote 0
Top