/LiquidButton

Animation of liquid loading button

Primary LanguageJava

LiquidButton

Android Arsenal

Customised UI from the idea of:https://dribbble.com/shots/2695600-Liquid-check alt tag

Example

demo1

In xml layout file

      <com.gospelware.liquidbutton.LiquidButton
        android:id="@+id/button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_centerInParent="true"
        android:clickable="true" />

Uses startPour() to start the animation.

      LiquidButton liquidButton = (LiquidButton) findViewById(R.id.button);
  
      liquidButton.setOnClickListener(new View.OnClickListener() {
      @Override
      public void onClick(View v) {
            LiquidButton btn = (LiquidButton) v;
            btn.startPour();
      }
      });

Set fillAfter using setFillAfter(), befault as not fill after

      liquidButton.setFillAfter(true);

Set autoPlay using setAutoPlay(), default as not palying automatically

      liquidButton.setAutoPlay(true);

Register PourFinishListener to the widget, it will send a callback onPourFinish() when the animation completed, and onProgressUpdate() when new progress is updated;

      liquidButton.setPourFinishListener(new LiquidButton.PourFinishListener() {
            @Override
            public void onPourFinish() {
                  Toast.makeText(MainActivity.this, "Finish", Toast.LENGTH_SHORT).show();
            }
            
            @Override
            public void onProgressUpdate(float progress) {
                  textView.setText(String.format("%.2f", progress * 100) + "%");
            }          
      });

How to update and finish the animation?

You'll able to uses changeProgress() to alternate the progress of the liquid level. (You need AutoPlay turn Off to be able to do that.) Progress are measure in float, where 1f = 100%;

      liquidButton.changeProgress(progress);

By default the widget starts a finish animation when the progress is 1f, but you can also uses finishPour to start the finish Animation.

      liquidButton.finishPour();

How to?

Gradle

      dependencies {    
            compile 'com.gospelware.liquidbutton:liquidButtonLib:1.1.5'
      }

To Do:

  Prgression update (finished)
  Alternating the Animation speed