Android Example RippleView

The attached project comes from here (I have conducted some open heart surgery on it). It is working perfectly on my 7" tablet but on my Samsung S4 mini, unlike what is the case on my tablet, the bitmaps are not centre(?). I guess it has something to do with the difference between the two displays.

The library files are in the /files folder of the attached B4A project. Copy them to your additional library folder.

The "buttons" have a very nice ripple animation. Click anywhere on a "button" and see the circular ripple progressing outwards from the point of touch. Have added a call back to the java code to raise events in the B4A project when the ripple starts and when the ripple ends (the start event can thus be used as a "button" click event. You can also "drag around" the "starting point of the ripple by touching the view, moving your finger to a different position on the view, and the lifting your finger at the position where you want the ripple to start.

Posting the B4A project as it is at present and also the Java code. I hope that someone will be able to use the java code and find a solution for the bitmaps not being centre on some displays (will it help to make the bitmaps smaller? Have not tried it yet...)

The project uses nineoldandroids-2.4.0.jar - so, you need to have it in your additional library folder.

As it stands at present:

ripview
Author: Muthuramakrishnan/Johan Schoeman
Version: 1

• RipView
  Fields:
  • ba As BA
  Methods:
  • BringToFront
  • DesignerCreateView (base As PanelWrapper, lw As LabelWrapper, props As Map)
  • Initialize (EventName As String)
  • Invalidate
  • Invalidate2 (arg0 As Rect)
  • Invalidate3 (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • IsInitialized As Boolean
  • RemoveView
  • RequestFocus As Boolean
  • SendToBack
  • SetBackgroundImage (arg0 As Bitmap)
  • SetColorAnimated (arg0 As Int, arg1 As Int, arg2 As Int)
  • SetLayout (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int)
  • SetLayoutAnimated (arg0 As Int, arg1 As Int, arg2 As Int, arg3 As Int, arg4 As Int)
  • SetVisibleAnimated (arg0 As Int, arg1 As Boolean)
  Properties:
  • AlphaFactor As Float [write only]
  • Background As Drawable
  • ButtonBitmap As Bitmap [write only]
  • ButtonText As String [write only]
  • ButtonTextColor As Int [write only]
  • ButtonTextSize As Float [write only]
  • Color As Int [write only]
  • Enabled As Boolean
  • Height As Int
  • Hover As Boolean [write only]
  • Left As Int
  • RippleColor As Int [write only]
  • Tag As Object
  • Top As Int
  • Visible As Boolean
  • Width As Int

 

[LucaMs]

I can't try it now, unfortunately, then I "need" that you post an animated gif .

Thanks for your sharings, @Johan Schoeman

 

[Johan Schoeman]

I can't try it now, unfortunately, then I "need" that you post an animated gif .

Thanks for your sharings, @Johan Schoeman

 

[LucaMs]

Thank you very much, Johan

 

[ArminKH]

THANK u
but why the effect is not smooth and is't natural ?
effects has a bit delay

 

[Johan Schoeman]

THANK u
but why the effect is not smooth and is't natural ?
effects has a bit delay

Try the attached library (copy the jar and xml to your additional library folder). It allows you to set the duration of the animation. Sample code:

rv1.Color = Colors.Yellow
rv1.RippleColor = Colors.Magenta
rv1.AlphaFactor = 0.1
rv1.ButtonBitmap = bm1
rv1.ButtonText = ""
rv1.ButtonTextColor = Colors.Black
rv1.ButtonTextSize = 30.0
rv1.ButtonText = "Click Click!"   
rv1.RippleDuration = 100.0

 

[ArminKH]

Try the attached library (copy the jar and xml to your additional library folder). It allows you to set the duration of the animation. Sample code:

rv1.Color = Colors.Yellow
rv1.RippleColor = Colors.Magenta
rv1.AlphaFactor = 0.1
rv1.ButtonBitmap = bm1
rv1.ButtonText = ""
rv1.ButtonTextColor = Colors.Black
rv1.ButtonTextSize = 30.0
rv1.ButtonText = "Click Click!"
rv1.RippleDuration = 100.0

Thank u i will try it tonight
what is this error johan?

------------------------------
edit : @Johan Schoeman
johan i test this lib,at first thank u for your hard work
but if u want to know my idea
i think still this effect is not natural
for example when u clicked on a ripview the ripple effect starts after a bit delay but if u see standard ripple effect thats happen imediately when user click on a rip view
for next suggestion : when we click on a rip view the ripple effect starts but at last when the animation wants to be finished the finished effect happen imediately and if u see before the effect must be change from visible to invisible by using reduce alpha from 100% to 0 but not imediately
sorry if my bad english makes misunderstanding and thank u for sharing your experiences
i think your lib can be number one because you make it by yourself not just wrapp a java code , so you can do every change u want to this library

 

[Johan Schoeman]

what is this error johan?

You need to have nineoldandroids-2.4.0.jar in your additional library folder and also have this in your project (as per my original project):

#Region  Project Attributes
    #ApplicationLabel: RippleView
    #VersionCode: 1
    #VersionName:
    'SupportedOrientations possible values: unspecified, landscape or portrait.
    #SupportedOrientations: landscape
    #CanInstallToExternalStorage: False
    #AdditionalJar: nineoldandroids-2.4.0            ***********SEE THIS LINE!!!!!!!!!!!!!!!!
#End Region

 

[DonManfred]

#AdditionalJar: nineoldandroids-2.4.0

You dont need this line if you Library contains a @DependsOn directive

 

[MikeFree]

Does this example work with version B4A 9.8 ? trying to start this project ...copyied needed files to additions library .. always come error:

B4A Version: 9.80
Java Version: 8
Parse den Code. Error
Fehler beim Parsen des Programms:
Fehlerbeschreibung: Unbekannter Typ: rippleview
Haben Sie eine Library-Referenz vergessen?
Fehler in Zeile: 58 (Main)
Dim rv As RippleView

 

[Erel]

Yes. Have you selected RippleView in the libraries tab?