Search code examples
javaandroidanimationopengl-esgraphics2d

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);

Solution

  • 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.