Simple ImageView color animation

Question

Hi I am relatively new to Android, and I would like, if possible, some guidelines or suggestions on where to search in order to solve my issue. Apparently, I do not possess the reputation to post images, therefore I'll try to explain it as well as i can.

Let's say I have an empty bottle, and once this fragment/activity is called i want to introduce an animation that will gradually and vertically (from bottom to top) start filling this imageView with water.

Any thoughts or directions,

Thanks a lot and in advance!

Answer 1

How about having 2 images of the bottle? One (on foreground) would be an empty bottle with transparency The (on background) second one would be the "shape of the liquid"

when your activity starts, get the background one and animate it like posted on this topic : https://stackoverflow.com/a/12127985/4232337

Hope this helps!

Answer 2

You can do this by using a custom ProgressBar. Even more simpler

<ProgressBar
            android:id="@+id/progressbar"
            style="?android:attr/progressBarStyleHorizontal"
            android:layout_width="60dp"
            android:layout_height="60dp"
            android:layout_marginBottom="2dp"
            android:layout_marginTop="2dp"
            android:indeterminateOnly="false"
            android:max="100"
            android:progress="30"
            android:progressDrawable="@drawable/progress_bar_clip" >
        </ProgressBar>

progress_bar_clip.xml

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android" >

    <item android:id="@android:id/background">
        <clip
            android:clipOrientation="vertical"
            android:drawable="@drawable/ic_launcher"
            android:gravity="bottom" />
    </item>
    <item android:id="@android:id/progress">
        <clip
            android:clipOrientation="vertical"
            android:gravity="bottom" >
            <bitmap android:src="@drawable/ic_launcher" >
            </bitmap>
        </clip>
    </item>

</layer-list>

You don't have do load any animations. Just use a handler and increment the progress bar by 1.

final ProgressBar bar = (ProgressBar) findViewById(R.id.progressbar);

        final Handler handler = new Handler();
        runnable = new Runnable() {

            @Override
            public void run() {
                if(bar.getProgress() != 100) {
                    bar.incrementProgressBy(1);
                    handler.postDelayed(runnable, 500);
                }
            }
        };;

        handler.post(runnable);