Fredrik Wallén Fredrik Wallén -4 years ago 112
Java Question

How to create a "fill-up" animation in Android

I'm trying to create a "fill-up" animation on a shape in Android. It should start being completely invisible and then gradually "fill up" from the bottom like this:
enter image description here

What I am specifically trying to animate is a circle such as this one:

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

<solid
android:color="#666666"/>

<size
android:width="120dp"
android:height="120dp"/>
</shape>


I have checked out the AlphaAnimation, RotateAnimation, ScaleAnimation and TranslateAnimation (sublasses of Animation) but I can't find a way to use them for this.

Answer Source

Here is how I eventually solved it:

I included this library from github https://github.com/lzyzsd/CircleProgress which contains a circular progress bar (CircleProgress). I added a countdowntimer to gradually increase the "progress" it is displaying

Here is the code:

final CircleProgress circularProgress =(CircleProgress)findViewById(R.id.circleProgress);

//Hides the text and the part of the circle which should not be shown
circularProgress.setUnfinishedColor(Color.parseColor("#00000000"));
circularProgress.setTextColor(Color.parseColor("#00000000"));

//Makes the circle red
circularProgress.setFinishedColor("#FF0000");

final int timeToCountDownMilis = 10000;
circularProgress.setMax(timeToCountDownMilis);

//Initiates and starts the countdowntimer which gradually increases the "progress" in the progress bar
new CountDownTimer(timeToCountDownMilis,70){

    onTick(long milisUntilFinished){
       circularProgress.setProgress(timeToCountDownMilis-(int)milisUntilFinished);
    }

    onFinish(){
    }
}.start();

Thanks to Stan for pointing me to circular progress bars!

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download