Badr Badr - 1 month ago 17
Java Question

Liquid level animation( Battery Doctor )

I want to know how to make this kind of animation in android ( The same in Battery Doctor app ).

Animation from Battery Doctor

I found a way to do this using two green images with an oppacity of 50% one behind the other and another one on the front to hide the unwanted content ( The circle ),I animate the first green image by XML using the code below

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="1850"
android:fromDegrees="-4"
android:pivotX="50%"
android:pivotY="50%"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:interpolator="@android:anim/linear_interpolator"
android:toDegrees="4" />
<translate
android:fromXDelta="0"
android:toXDelta="0"
android:fromYDelta="0"
android:toYDelta="1"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:interpolator="@android:anim/linear_interpolator"
android:duration="1500" />

</set>


And the second green one by using this:

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<rotate
android:duration="1800"
android:fromDegrees="-1"
android:pivotX="50%"
android:pivotY="50%"

android:repeatCount="infinite"
android:repeatMode="reverse"
android:interpolator="@android:anim/linear_interpolator"
android:toDegrees="1" />
<translate
android:fromXDelta="80"
android:toXDelta="-4"
android:fromYDelta="-1"
android:toYDelta="1"
android:repeatCount="infinite"
android:repeatMode="reverse"
android:interpolator="@android:anim/linear_interpolator"
android:duration="1500" />

</set>


But how can I create the view programatically ?I want to set the level dynamically from code. for example myView.setLevel(45);

Answer

I have finally found a library: WaveView

https://github.com/john990/WaveView

Edit

This library https://github.com/gelitenight/WaveView also does the same thing with more features. You can :

  • Shift the wave horizontally.
  • Set water level.
  • Set vertical size of wave.
  • Set horizontal size of wave.