B4A Library Ripple Effect library

This library wraps this open source project: https://github.com/patrickpissurno/RippleEffect
License: https://github.com/patrickpissurno/RippleEffect/blob/master/LICENSE.txt
You can use it to add ripple effects to views:

demo.gif

SS-2017-04-02_09.46.32.png

(image taken from the open source documentation)

It is simple to use it. See the included example.

If you are applying this effect to a view that is added by code then you need to first add the view to its parent and then add the effect.
 

Attachments

  • RippleEffect.zip
    8.9 KB · Views: 1,197
  • Example.zip
    8.8 KB · Views: 962
Last edited:
Click to expand...
Ohanian

Ohanian

Active Member
Licensed User
Longtime User
Hi,

Is it possible to implement the onComplete event?

If you want to know when the Ripple effect is finished, you can set a listener on your view

rippleView.setOnRippleCompleteListener(new RippleView.OnRippleCompleteListener() {

@override
public void onComplete(RippleView rippleView) {
Log.d("Sample", "Ripple completed");
}

});
Click to expand...
 
ArminKH

ArminKH

Well-Known Member
Ohanian said:
Hi,

Is it possible to implement the onComplete event?
Click to expand...
at this time maybe by using timer you can solve this
i'm interested too if everybody can implement RippleEffect_Complete event listener without timer
 
ilan

ilan

Expert
Licensed User
Longtime User
hi,

i am trying to add the ripple effect to an label that i use in ULV but i get an error

java.lang.ClassCastException:com.andexert.library.Rippleview cannot be cast to android.widget.Button Continue?

what should i do?
 
ilan

ilan

Expert
Licensed User
Longtime User
first i create the items (ULV):

B4X: 
Sub ulv5_itemcr(LayoutName As String, LayoutPanel As Panel)
    'Just a label
   
    LayoutPanel.color = Colors.White

    Dim lbl As Label
    lbl.Initialize("listpeslbl1")
    lbl.color = Colors.RGB(236,240,241) '**c 215,228,242
    lbl.TextColor =  Colors.RGB(44,62,80)' Colors.RGB(112,128,144) 'change if C or B
    lbl.TextSize = Floor(17 + volint)  'IntToDIP(9)
    lbl.Typeface = Typeface.DEFAULT
    If listshowletter = "C" Then
        lbl.TextColor =  Colors.RGB(231,76,60) 'change if C or B
    Else If listshowletter = "B" Then
        lbl.TextColor =  Colors.RGB(127,140,141) 'change if C or B
    End If
    lbl.Gravity = Gravity.RIGHT + Gravity.CENTER_VERTICAL
    LayoutPanel.AddView(lbl, 0, 0, LayoutPanel.Width, LayoutPanel.Height - IntToDIP(1))
   
    Dim lbl2 As Label
    lbl2.Initialize("listpeslbl2")
    lbl2.color = Colors.Transparent
    lbl2.TextColor = Colors.RGB(44,62,80)
    lbl2.TextSize = 14  'IntToDIP(7)
    lbl2.Gravity = Gravity.CENTER + Gravity.CENTER_VERTICAL
    LayoutPanel.AddView(lbl2,IntToDIP(6), IntToDIP(0), IntToDIP(60), IntToDIP(45))
   
    Dim btn As Button
    btn.Initialize("listpesbtn1")   
    LayoutPanel.AddView(btn, IntToDIP(70), IntToDIP(9.5), IntToDIP(40), IntToDIP(26))

End Sub

then i set the item:

B4X: 
Sub ulv5_itemcf(ItemID As Long, LayoutName As String, LayoutPanel As Panel, Position As Int)
    'Updates the text of the label

    Dim spl() As String = Regex.Split("\|", newshlist.Get(ItemID))
   
    Dim rs As RichString
    rs.Initialize("  " & spl(0))   
    If spl(0).Length > 1 Then rs.Strikethrough(2, spl(0).Length+2)
   
    Dim lbl As Label = LayoutPanel.GetView(0)
    lbl.Tag = spl(0)

    If listshowletter = "A" Then
        lbl.Text = "  " & spl(0)
        If style = 1 Then bColors2(lbl,Colors.RGB(236,240,241),Colors.RGB(189,195,199),Colors.RGB(44,62,80)) 'dark style
        If style = 2 Then bColors2(lbl,Colors.ARGB(28,52,152,219),Colors.ARGB(100,52,152,219),Colors.RGB(44,62,80)) 'light style   
        If style = 3 Then bColors2(lbl,Colors.ARGB(28,231,76,60),Colors.ARGB(100,231,76,60),Colors.RGB(44,62,80)) 'light style
        If style = 4 Then bColors2(lbl,Colors.ARGB(28,26,188,156),Colors.ARGB(100,26,188,156),Colors.RGB(44,62,80))  'light style
        If style = 5 Then bColors2(lbl,Colors.ARGB(28,46,204,113),Colors.ARGB(100,46,204,113),Colors.RGB(44,62,80))  'light style
        If style = 6 Then bColors2(lbl,Colors.ARGB(28,241,196,15),Colors.ARGB(100,241,196,15),Colors.RGB(44,62,80))  'light style
        If style = 7 Then bColors2(lbl,Colors.ARGB(28,155,89,182),Colors.ARGB(100,155,89,182),Colors.RGB(44,62,80))  'light style       
    End If
   
    Dim amount As String = spl(4)
    amount = amount.Replace(" ","")
    amount = amount.Replace("שח","")
    If amount = "" Then amount = "0"

    Dim lbl2 As Label = LayoutPanel.GetView(1)
    lbl2.Tag = spl(0)
    lbl2.Text = spl(3) & CRLF & amount & " שח"
    If style = 1 Then bColors2(lbl2,Colors.Transparent,Colors.RGB(189,195,199),Colors.RGB(44,62,80)) 'dark style
    If style = 2 Then bColors2(lbl2,Colors.Transparent,Colors.ARGB(100,52,152,219),Colors.RGB(44,62,80)) 'light style
    If style = 3 Then bColors2(lbl2,Colors.Transparent,Colors.ARGB(100,231,76,60),Colors.RGB(44,62,80))'light style
    If style = 4 Then bColors2(lbl2,Colors.Transparent,Colors.ARGB(100,26,188,156),Colors.RGB(44,62,80))  'light style
    If style = 5 Then bColors2(lbl2,Colors.Transparent,Colors.ARGB(100,46,204,113),Colors.RGB(44,62,80)) 'light style
    If style = 6 Then bColors2(lbl2,Colors.Transparent,Colors.ARGB(100,241,196,15),Colors.RGB(44,62,80)) 'light style
    If style = 7 Then bColors2(lbl2,Colors.Transparent,Colors.ARGB(100,155,89,182),Colors.RGB(44,62,80)) 'light style           

    Dim btn As Button = LayoutPanel.GetView(2)
    btn.Gravity = Gravity.FILL
    btn.Tag = spl(0)
   
    If spl(5) <> " " Then
        btn.SetBackgroundImage(LoadBitmap(File.DirAssets,"info.png"))
    Else
        btn.SetBackgroundImage(LoadBitmap(File.DirAssets,"infox.png"))
    End If
   
End Sub

now in sub bColors2 i also set the rippleview:

B4X: 
ub bColors2 (btnCustom1 As Label,c1 As Int,c2 As Int,c3 As Int)
Try
   Dim cdGreenColorEnabled As ColorDrawable
   cdGreenColorEnabled.Initialize(c1,5) '**c
  ' Define a color for Pessed state
  Dim cdGreenColorPressed As ColorDrawable
  cdGreenColorPressed.Initialize(c2, 5) '*c
  ' Define a StateListDrawable
  Dim stdGreenColor As StateListDrawable
  stdGreenColor.Initialize
  Dim states(2) As Int
  states(0) = stdGreenColor.state_enabled
  states(1) = -stdGreenColor.state_pressed
  stdGreenColor.addState2(states, cdGreenColorEnabled)
  Dim states(1) As Int
  states(0) = stdGreenColor.state_pressed
  stdGreenColor.addState2(states, cdGreenColorPressed)
  ' Set stdGreenColor to button background
  btnCustom1.Background = stdGreenColor
  btnCustom1.TextColor = c3
 
    Dim riple As RippleView
    riple.Initialize(btnCustom1,c2,200,False)   
   
Catch
Log("")
End Try
End Sub

and here i get that error (SUB bColors2)
 
Erel

Erel

B4X founder
Staff member
Licensed User
Longtime User
You should run your code in debug mode and see the exact line that raises the error.

When you initialize the RippleView, the actual view (label or panel or any other view) becomes the child of the RippleView. You can treat the RippleView as a panel and get the actual view with:
B4X: 
Dim p As Panel = LayoutPanel.GetView(2)
Dim b As Button = p.GetView(0)
 
Informatix

Informatix

Expert
Licensed User
Longtime User
Erel said:
You should run your code in debug mode and see the exact line that raises the error.

When you initialize the RippleView, the actual view (label or panel or any other view) becomes the child of the RippleView. You can treat the RippleView as a panel and get the actual view with:
B4X: 
Dim p As Panel = LayoutPanel.GetView(2)
Dim b As Button = p.GetView(0)
Click to expand...
Please note there's a post about this subject:
https://www.b4x.com/android/forum/threads/lib-chargeable-ultimatelistview.22736/page-21#post-283100
 
ilan

ilan

Expert
Licensed User
Longtime User
Erel said:
You should run your code in debug mode and see the exact line that raises the error.

When you initialize the RippleView, the actual view (label or panel or any other view) becomes the child of the RippleView. You can treat the RippleView as a panel and get the actual view with:
B4X: 
Dim p As Panel = LayoutPanel.GetView(2)
Dim b As Button = p.GetView(0)
Click to expand...

Thanx erel i think i understand now what you mean. :)
 
Tayfur

Tayfur

Well-Known Member
Licensed User
Longtime User
Hello;
I have problem;
Same code; I added riplleeffect lib. and activeted it.
I cant read Top value and code broked.
Why I cant read top value?
Because I want move it in program.

Note: EditText_to in "Panel_mail"

rippleeffect ON:
(EditText): Layout not available, Tag=true, Text=

rippleeffect OFF:
(EditText): Left=43, Top=255, Width=345, Height=60, Tag=true, Text=


off.png
on.png
 
Last edited:
ilan

ilan

Expert
Licensed User
Longtime User
first you need to handle the ripple view as a panel to get his views
but even if you do that it seems like the .left and .top will create an error

i am able to change the text and height/width, get tag,.. but .left or .top is not working.

it also seems like if you intialize more then 1 view with the same ripple view you will be able to get only the latest view and not all others

this is an example:

B4X: 
Sub Process_Globals
    Dim t As Timer
End Sub

Sub Globals
    Dim lbl As Label
    Dim b As Button
    Dim e_txt As EditText
    Dim rv1,rv2 As RippleView
End Sub

Sub Activity_Create(FirstTime As Boolean)
    t.Initialize("t",1000)
   
    b.Initialize("btn")
    lbl.Initialize("lbl")
    e_txt.Initialize("etxt")
    Activity.AddView(lbl,0,0,150dip,50dip)
    Activity.AddView(b,100%x-150dip,0,100dip,50dip)
    Activity.AddView(e_txt,0,150dip,100dip,50dip)
   
    b.Text = "Click Me"
    e_txt.Text = "EditTXT"
    lbl.Text = "Label"
    lbl.TextSize = 18
   
    lbl.Tag = "lbl"
    e_txt.Tag = "editxtx"
   
    Activity.Color = Colors.White
   
   
    rv1.Initialize(lbl,Colors.Green,200,False)
    rv2.Initialize(e_txt,Colors.Green,200,False)
End Sub

Sub Activity_Resume
End Sub

Sub Activity_Pause (UserClosed As Boolean)
End Sub

Sub btn_click
    t.Enabled = True
End Sub

Sub t_tick
    Dim p1 As Panel = rv1
    Dim p2 As Panel = rv2
    Dim lbl1 As Label = p1.GetView(0)   
    Dim edittxt As EditText = p2.GetView(0)

    lbl1.Text = DateTime.Now
    edittxt.Text = DateTime.Now
End Sub

if i would add both views (label and edittext) to the same ripple view (rv1) and try to read it like this:

B4X: 
Sub t_tick
    Dim p1 As Panel = rv1
    Dim lbl1 As Label = p1.GetView(0)   
    Dim edittxt As EditText = p1.GetView(1)

    lbl1.Text = DateTime.Now
    edittxt.Text = DateTime.Now
End Sub

i will get an error.
 
ilan

ilan

Expert
Licensed User
Longtime User
Informatix said:
I improved my version of the lib. You can find it a few posts above.
What's new: the RippleView is a view like any other B4A view, with all functions and properties, and I added the Zoom feature, which was there but not used.

The RippleView object is a panel with a single view inside. You can retrieve the embedded view with the View property.

How to use this lib:
  • If you load a layout:
    You load the layout, you create an instance of RippleView (you could do that in Globals) and you initialize this instance.
    In this example, I load a layout with a button and I apply the ripple effect on the button:
    B4X: 
    Activity.LoadLayout("mylayout")
Dim rv As RippleView
rv.Initialize(Button1, Colors.Red, 200, True)
    If I want to apply the effect on other views of this layout, I create a new instance and call Initialize() for each view.

  • If you create your views by code:
    You can do like I explained above, after you added the view to its parent. If you cannot add the view to its parent (for example, when you pass this view to a class or library that will add it for you), you create the view, you create an instance of RippleView and you initialize this instance as usual, then you pass this instance to the class/library that will add it, instead of the view. Example:
    B4X: 
    Dim Button1 As Button
Button1.Initialize("")
Button1.Text = "Click me"
Dim rv As RippleView
rv.Initialize(Button1, Colors.Red, 200, True)
DialogCreator(rv) 'Here, I pass my RippleView, not the Button
    That works fine with BetterDialogs, for example.
Click to expand...

hi,

i have tried your version of rippleview (1.3) but i cant get the top value of my button.

i try to get the attached view but it still gives me the same error.

i intialize the RV with a button i create via designer

then i try this:

B4X: 
    Dim btn As Button = rpeffect.View
    Log(btn.Tag)
    Log(btn.Top)

i do receive the Tag of the view (its 5 as you can see in the logs) but the top gives me an error

** Service (starter) Create **
** Service (starter) Start **
** Activity (main) Create, isFirst = true **
Selected date is: 01/2017
** Activity (main) Resume **
5
Error occurred on line: 178 (Main)
java.lang.ClassCastException: android.widget.RelativeLayout$LayoutParams cannot be cast to anywheresoftware.b4a.BALayout$LayoutParams
at anywheresoftware.b4a.objects.ViewWrapper.getTop(ViewWrapper.java:157)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.shell.Shell.runMethod(Shell.java:708)
at anywheresoftware.b4a.shell.Shell.raiseEventImpl(Shell.java:337)
at anywheresoftware.b4a.shell.Shell.raiseEvent(Shell.java:247)
at java.lang.reflect.Method.invoke(Native Method)
at anywheresoftware.b4a.ShellBA.raiseEvent2(ShellBA.java:134)
at anywheresoftware.b4a.BA.raiseEvent2(BA.java:157)
at anywheresoftware.b4a.BA.raiseEvent(BA.java:153)
at anywheresoftware.b4a.objects.ViewWrapper$1.onClick(ViewWrapper.java:78)
at android.view.View.performClick(View.java:5697)
at android.widget.TextView.performClick(TextView.java:10826)
at android.view.View$PerformClick.run(View.java:22526)
at android.os.Handler.handleCallback(Handler.java:739)
at android.os.Handler.dispatchMessage(Handler.java:95)
at android.os.Looper.loop(Looper.java:158)
at android.app.ActivityThread.main(ActivityThread.java:7224)
at java.lang.reflect.Method.invoke(Native Method)
at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1230)
at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1120)
** Activity (main) Pause, UserClosed = true **
Click to expand...
 
Informatix

Informatix

Expert
Licensed User
Longtime User
ilan said:
hi,

i have tried your version of rippleview (1.3) but i cant get the top value of my button.

i try to get the attached view but it still gives me the same error.

i intialize the RV with a button i create via designer

then i try this:

B4X: 
    Dim btn As Button = rpeffect.View
    Log(btn.Tag)
    Log(btn.Top)

i do receive the Tag of the view (its 5 as you can see in the logs) but the top gives me an error
Click to expand...
RpEffect.Top will give you the top of your view.
 
J

jtare

Active Member
Licensed User
Longtime User
I been using this library for a while now but since I targeted my app for sdk 23+ (for runtime permission) I get this error.
B4X: 
java.lang.IllegalStateException: Underflow in restore - more restores than saves
    at android.graphics.Canvas.native_restore(Native Method)
    at android.graphics.Canvas.restore(Canvas.java:581)
    at com.andexert.library.RippleView.draw(RippleView.java:146)
    at android.view.View.updateDisplayListIfDirty(View.java:16534)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3910)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3890)
    at android.view.View.updateDisplayListIfDirty(View.java:16494)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3910)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3890)
    at android.view.View.updateDisplayListIfDirty(View.java:16494)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3910)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3890)
    at android.view.View.updateDisplayListIfDirty(View.java:16494)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3910)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3890)
    at android.view.View.updateDisplayListIfDirty(View.java:16494)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3910)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3890)
    at android.view.View.updateDisplayListIfDirty(View.java:16494)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3910)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3890)
    at android.view.View.updateDisplayListIfDirty(View.java:16494)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3910)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3890)
    at android.view.View.updateDisplayListIfDirty(View.java:16494)
    at android.view.ViewGroup.recreateChildDisplayList(ViewGroup.java:3910)
    at android.view.ViewGroup.dispatchGetDisplayList(ViewGroup.java:3890)
    at android.view.View.updateDisplayListIfDirty(View.java:16494)
    at android.view.ThreadedRenderer.updateViewTreeDisplayList(ThreadedRenderer.java:325)
    at android.view.ThreadedRenderer.updateRootDisplayList(ThreadedRenderer.java:331)
    at android.view.ThreadedRenderer.draw(ThreadedRenderer.java:366)
    at android.view.ViewRootImpl.draw(ViewRootImpl.java:3251)
    at android.view.ViewRootImpl.performDraw(ViewRootImpl.java:3050)
    at android.view.ViewRootImpl.performTraversals(ViewRootImpl.java:2632)
    at android.view.ViewRootImpl.doTraversal(ViewRootImpl.java:1544)
    at android.view.ViewRootImpl$TraversalRunnable.run(ViewRootImpl.java:7613)
    at android.view.Choreographer$CallbackRecord.run(Choreographer.java:911)
    at android.view.Choreographer.doCallbacks(Choreographer.java:686)
    at android.view.Choreographer.doFrame(Choreographer.java:622)
    at android.view.Choreographer$FrameDisplayEventReceiver.run(Choreographer.java:897)
    at android.os.Handler.handleCallback(Handler.java:739)
    at android.os.Handler.dispatchMessage(Handler.java:95)
    at android.os.Looper.loop(Looper.java:148)
    at android.app.ActivityThread.main(ActivityThread.java:7409)
    at java.lang.reflect.Method.invoke(Native Method)
    at com.android.internal.os.ZygoteInit$MethodAndArgsCaller.run(ZygoteInit.java:1230)
    at com.android.internal.os.ZygoteInit.main(ZygoteInit.java:1120)
Is there any solution? For what I read there are many peolpe with this same issue, but haven't found any solution.
 
J

jtare

Active Member
Licensed User
Longtime User
Erel said:
Where was it reported? In this library or the open source project?
Click to expand...
On the open source project.
Here are some links for the github project issues: https://github.com/traex/RippleEffect/issues , many threads over there are related to this issue. Apparently it is fixed, not sure though.
EDIT: With fixed I meant that the project is fixed, not the wrapper for b4a.

If you can read this too: https://github.com/traex/RippleEffect/commit/df5f9e4456eae8a8e98e2827a3c6f9e7185596e1.

Thanks!
 
Last edited:
You must log in or register to reply here.

Similar Threads

DarkWolfalpha
  • Question
Android Question Ripple Effect Animation
Replies
3
Views
2K
TILogistic
TILogistic
rraswisak
  • Article
B4A Class RippleButton Class
Replies
3
Views
3K
rraswisak
rraswisak
Marvel
  • Question
Android Question Keeping ripple effect within rounded panel
Replies
6
Views
2K
Marvel
Marvel
Alexander Stolte
  • Article
B4A Class [B4X] [XUI] AS Ripple View
Replies
1
Views
3K
Alexander Stolte
Alexander Stolte
thedesolatesoul
  • Article
Share My Creation Blur Effect Demo
2
Replies
21
Views
13K
wonder
wonder
Top