Android Question Keeping ripple effect within rounded panel

[Marvel]

I have been trying to use the ripple effect library inside a rounded panel, the ripple keeps going out out the corners. I also tried using Erels halo animation example but I still get the same effect.

Is there any solution to this?

 

[TILogistic]

To keep the wave effect inside the panel, you need to adjust this:

Use: B4A,B4J and B4I

Dim InnerRadius As Int = Max(Parent.Width, Parent.Height) * 1.20

or

Dim InnerRadius As Int = Max(Parent.Width, Parent.Height)

Public Sub RippleEffect (Parent As B4XView, Color As Int, Duration As Int)
    Dim cvs As B4XCanvas
    Dim p As B4XView = xui.CreatePanel("")
    Dim InnerRadius As Int = Max(Parent.Width, Parent.Height) * 1.20
    p.SetLayoutAnimated(0, 0, 0, InnerRadius, InnerRadius)
    cvs.Initialize(p)
    cvs.DrawCircle(cvs.TargetRect.CenterX, cvs.TargetRect.CenterY, cvs.TargetRect.Width / 2, Color, True, 0)
    cvs.Invalidate
    cvs.Release
    Dim bmp As B4XBitmap = cvs.CreateBitmap
    p.RemoveViewFromParent
    Dim iv As ImageView
    iv.Initialize("")
    Dim p As B4XView = iv
    Dim Radius As Int = InnerRadius/2
    Dim x As Int = Parent.Width/2
    Dim y As Int = Parent.Height/2
    p.SetBitmap(bmp)
    Parent.AddView(p, x, y, 0, 0)
    p.SetLayoutAnimated(Duration , x - Radius, y - Radius, Radius * 2, Radius * 2)
    p.SetVisibleAnimated(Duration , False)
    Sleep(Duration )
    p.RemoveViewFromParent
End Sub

Sample in B4J:

 

[Marvel]

To keep the wave effect inside the panel, you need to adjust this:

Use: B4A,B4J and B4I


or

Public Sub RippleEffect (Parent As B4XView, Color As Int, Duration As Int)
    Dim cvs As B4XCanvas
    Dim p As B4XView = xui.CreatePanel("")
    Dim InnerRadius As Int = Max(Parent.Width, Parent.Height) * 1.20
    p.SetLayoutAnimated(0, 0, 0, InnerRadius, InnerRadius)
    cvs.Initialize(p)
    cvs.DrawCircle(cvs.TargetRect.CenterX, cvs.TargetRect.CenterY, cvs.TargetRect.Width / 2, Color, True, 0)
    cvs.Invalidate
    cvs.Release
    Dim bmp As B4XBitmap = cvs.CreateBitmap
    p.RemoveViewFromParent
    Dim iv As ImageView
    iv.Initialize("")
    Dim p As B4XView = iv
    Dim Radius As Int = InnerRadius/2
    Dim x As Int = Parent.Width/2
    Dim y As Int = Parent.Height/2
    p.SetBitmap(bmp)
    Parent.AddView(p, x, y, 0, 0)
    p.SetLayoutAnimated(Duration , x - Radius, y - Radius, Radius * 2, Radius * 2)
    p.SetVisibleAnimated(Duration , False)
    Sleep(Duration )
    p.RemoveViewFromParent
End Sub

Sample in B4J:

Thanks for this code, it solves most of my problem. The only thing is that it always starts in the centre of the view. when I modify it to start exactly at the touch coordinates I still get the same effect. Probably because this code only makes sure the ripples disappear before it gets to the edge of the view, but when the ripple starts close to the edge of the view it reaches the edge before it can disappear.

 

[TILogistic]

For the waves to start from where you clicked, you must send x, y and calculate the radius.

This is a basic example to understand the use of canvases and animations.

regards

 

[TILogistic]

You can create a class to create waves in the label, image view, etc.
for the button type it is more complex.

Regards,

 

[rraswisak]

Please take a look here

Create Ripple effect inside Panel

Hi All, This code snippet base on a question here, i have never deal with Canvas/B4XCanvas before, but can't sleep thinking that i have idea how to solve the question but all reference i read should be using canvas. So here we go... I hope everyone find it useful. Thank you

www.b4x.com

 

[Marvel]

Please take a look here

Create Ripple effect inside Panel

Hi All, This code snippet base on a question here, i have never deal with Canvas/B4XCanvas before, but can't sleep thinking that i have idea how to solve the question but all reference i read should be using canvas. So here we go... I hope everyone find it useful. Thank you

www.b4x.com

Thanks I'll check it out