Circular Loading Button – Library

implementation 'br.com.simplepass:loading-button-android:1.14.0'

<br.com.simplepass.loadingbutton.customViews.CircularProgressButton
    	    android:id="@+id/btn_id"
    	    android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:background="@drawable/circular_border_shape"
            app:spinning_bar_width="4dp" <!-- Optional -->
            app:spinning_bar_color="#FFF" <!-- Optional -->
            app:spinning_bar_padding="6dp" <!-- Optional -->

Include above code instead of android Button.

CircularProgressButton btn = (CircularProgressButton) findViewById(R.id.btn_id)

    btn.startAnimation();

[do some async task. When it finishes]
//You can choose the color and the image after the loading is finished
	btn.doneLoadingAnimation(fillColor, bitmap);
	[or just revert de animation]
	btn.revertAnimation();

Steps:

• Instantiate the button.
• Call startAnimation() before starting background process.
• Call revertAnimation() to switch back to default state. called after completing background process.

Switch to determinant progress

You can switch between indeterminant and determinant progress:

circularProgressButton.setProgress(10)
...
circularProgressButton.setProgress(50)
...
circularProgressButton.setProgress(100)

– Show ‘done’ animation

When the loading animation is running, call:

//Choose the color and the image that will be show
circularProgressButton.doneLoadingAnimation(fillColor, bitmap);

– Revert the loading animation with different text or image

progressButton.revertAnimation {
    progressButton.text = "Some new text"
}

or

progressImageButton.revertAnimation {
    progressImageButton.setImageResource(R.drawable.image)
}

Configure XML

• app:spinning_bar_width : Changes the width of the spinning bar inside the button
• app:spinning_bar_color: Changes the color of the spinning bar inside the button
• app:spinning_bar_padding: Changes the padding of the spinning bar in relation of the button bounds.
• app:initialCornerAngle: The initial corner angle of the animation. Insert 0 if you have a square button.
• app:finalCornerAngle: The final corner angle of the animation.

Example for using Rounded button

XML

 <br.com.simplepass.loading_button_lib.customViews.CircularProgressButton
            android:id="@+id/cirLoginButton"
            app:spinning_bar_width="4dp"
            app:spinning_bar_color="#FFF"
            android:text="@string/login_button_text"
            android:layout_gravity="center_horizontal"
            android:layout_marginTop="@dimen/loginViewsMargin"
            app:spinning_bar_padding="6dp"
            app:initialCornerAngle="27dp"
            android:textStyle="bold"
            android:background="@drawable/login_button_bk"
            android:textColor="@color/whiteTextColor"
            android:layout_height="wrap_content"
            android:layout_width="wrap_content" />

Example uses a button background for rounded corner and gradient background. If you need same , create login background file in drawable and add the following code.

login_button_bk.xml

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle" >
    <corners
        android:radius="27dp"
        />
    <gradient
        android:angle="45"
        android:centerX="35%"
        android:startColor="#408bff"
        android:endColor="#79EBFD"
        android:type="linear"
        />
    <size
        android:width="182dp"
        android:height="54dp"
        />
</shape>

Java

private CircularProgressButton cirLoginButton; 
cirLoginButton = viewParent.findViewById(R.id.cirLoginButton);
        cirLoginButton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {

cirLoginButton.startAnimation();
//TODO:- replace with background task
        });

Oncompletion

   private void stopButtonAnimation(){
        cirLoginButton.revertAnimation();
    }