User Guide

Version 1.0.1

Integration

The lib is available on jcenter, you can find it with

dependencies {
    compile 'com.nihaskalam.android:progress-button:1.0.1'
}

Usage

Declare button inside your layout XML file:

<com.nihaskalam.progressbuttonlibrary.CircularProgressButton
            android:id="@+id/circularButton3"
            android:layout_width="196dp"
            android:layout_height="64dp"
            android:layout_marginTop="16dp"
            android:onClick="onClickThirdBtn"
            android:textColor="@color/text_state_selector"
            android:textSize="22sp"
            app:pb_colorIndicator="@color/colorButtonCompleteState"
            app:pb_cornerRadius="48dp"
            app:pb_iconCancel="@drawable/ic_action_cross"
            app:pb_iconComplete="@drawable/ic_action_accept"
            app:pb_iconError="@drawable/ic_action_cancel"
            app:pb_selectorCancel="@color/pb_cancel_state_selector"
            app:pb_selectorComplete="@color/complete_state_selector"
            app:pb_selectorError="@color/error_state_selector"
            app:pb_selectorIdle="@color/idle_state_selector"
            app:pb_textColorAfterClick="@color/colorWhite"
            app:pb_textIdle="@string/submit"
            app:pb_colorCancelText="@color/pb_orange"
            app:pb_colorErrorText="@color/pb_blue"
            app:pb_colorCompleteText="@color/pb_orange"/>

Different button states are:

• normal state [0]
• progress state [1-99]
• success state [100]
• error state [-1]
• cancel state [-2]

You can show different button states using the following methods:

• showProgress()
• showIdle()
• showComplete()
• showError()
• showCancel()

You can check different button states using the following methods:

• isProgress()
• isIdle()
• isErrorOrCompleteOrCancelled()

Or comparing value of getProgress() against different button state values mentioned above(0, -1, -2, 100, 1-99).

Idle state

CircularProgressButton.showIdle()

• To change text app:pb_textIdle="@string/Upload"
• To change background color create color state selector and point to it with `app:pb_selectorIdle="@drawable/idle_state_selector" attribute.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorButtonCompleteState" android:state_pressed="true" />
    <item android:color="@color/colorButtonCompleteState" android:state_focused="true" />
    <item android:color="@color/colorWhite" android:state_enabled="false" />
    <item android:color="@color/colorWhite" android:state_enabled="true"/>
</selector>

Progress state

Button will be morphed to a circular progressbar

CircularProgressButton.showProgress()

To turn on Indeterminate Progress

CircularProgressButton.setIndeterminateProgressMode(true)

Set custom time to Progressbar

CircularProgressButton.setIndeterminateProgressMode(false)
CircularProgressButton.setSweepDuration(time)

You can set listener to get the time update for the fixed time progressbar

CircularProgressButton.setOnAnimationUpdateTimeListener(new OnAnimationUpdateTimeListener() {
            @Override
            public void onAnimationTimeUpdate(int timeElapsed) {
                //Do something
            }
        });

To set manual progress -

CircularProgressButton.setIndeterminateProgressMode(false)
CircularProgressButton.setCustomProgressMode(true)
CircularProgressButton.setCustomProgress(progressAmount);

Progress amount can be any value between 0-100. For instance, 0 for empty state, 50 for half filled, 100 for fully filled progress and so on.

• To change indicator color app:pb_colorIndicator="@color/pb_blue"
• To change indicator background color app:pb_colorIndicatorBackground="@color/pb_grey"
• To change circle background color app:pb_colorProgress="@color/pb_white"
• To change cancel cross icon color app:pb_colorCancel=""="@color/textColor"

Complete state

CircularProgressButton.showComplete()

• To change text app:pb_textComplete="@string/Complete"
• To change complete state text color app:pb_colorCompleteText="@color/pb_orange"
• To change background color create color state selector and point to it with app:pb_selectorComplete="@drawable/complete_state_selector" attribute.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorButtonCompleteState" android:state_pressed="true" />
    <item android:color="@color/colorButtonCompleteState" android:state_focused="true" />
    <item android:color="@color/colorButtonCompleteState" android:state_enabled="false" />
    <item android:color="@color/colorButtonCompleteState" android:state_enabled="true"/>
</selector>

Error state

CircularProgressButton.showError()

• To change text app:pb_textError="@string/Error"
• To change error state text color app:pb_colorErrorText="@color/pb_blue"
• To change background color create color state selector and point to it with app:pb_selectorError="@drawable/error_state_selector" attribute.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/colorRed" android:state_pressed="true" />
    <item android:color="@color/colorRed" android:state_focused="true" />
    <item android:color="@color/colorRed" android:state_enabled="false" />
    <item android:color="@color/colorRed" android:state_enabled="true"/>
</selector>

Cancel state

CircularProgressButton.showCancel()

• To change text app:pb_textCancel=""="@string/cancel"
• To change cancelled state text color app:pb_colorCancelText="@color/pb_orange"
• To change background color create color state selector and point to it with app:pb_selectorCancel="@color/pb_cancel_state_selector" attribute.

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:color="@color/pb_orange" android:state_pressed="true" />
    <item android:color="@color/pb_orange" android:state_focused="true" />
    <item android:color="@color/pb_orange" android:state_enabled="false" />
    <item android:color="@color/pb_orange" android:state_enabled="true" />
</selector>

You can set rounded corners

app:pb_cornerRadius="48dp"

You can use icons for complete, error & cancel states

app:pb_iconComplete="@drawable/ic_action_accept"
app:pb_iconError="@drawable/ic_action_cancel"
app:pb_iconCancel="@drawable/ic_action_cross"

You can set Button stroke color by,

CircularProgressButton.setStrokeColor(ContextCompat.getColor(this, R.color.colorStroke))

You can set background color of button after clicking the idle state button.

You can use the same color of stroke of button for better looking and animations.

app:pb_backgroundColorAfterClick=="@color/backgroundColor"

You can set text color of button after clicking the idle state button

app:pb_textColorAfterClick="@color/textColor"

Licence

Copyright 2016 Nihas Kalam

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.