nihasKalam07/ProgressButton

A button having inbuilt circular progressbar

Download

Step 1. Add the JitPack repository to your build file

Add it in your root settings.gradle at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url 'https://jitpack.io' }
		}
	}

Add it in your settings.gradle.kts at the end of repositories:

	dependencyResolutionManagement {
		repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
		repositories {
			mavenCentral()
			maven { url = uri("https://jitpack.io") }
		}
	}

Add to pom.xml

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add it in your build.sbt at the end of resolvers:

 
    resolvers += "jitpack" at "https://jitpack.io"

Add it in your project.clj at the end of repositories:

 
    :repositories [["jitpack" "https://jitpack.io"]]

Step 2. Add the dependency

	dependencies {
		implementation 'com.github.nihasKalam07:ProgressButton:'
	}
	dependencies {
		implementation("com.github.nihasKalam07:ProgressButton:")
	}
	<dependency>
	    <groupId>com.github.nihasKalam07</groupId>
	    <artifactId>ProgressButton</artifactId>
	    <version></version>
	</dependency>

                            
    libraryDependencies += "com.github.nihasKalam07" % "ProgressButton" % ""
        
        

                            
    :dependencies [[com.github.nihasKalam07/ProgressButton ""]]

Readme

<img src="https://github.com/nihasKalam07/ProgressButton/blob/master/screenshots/Screenshot1_framed.png" width="350px" height="600px" /> <img src="https://github.com/nihasKalam07/ProgressButton/blob/master/screenshots/Screenshot_framed.png" width="350px" height="600px" />

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>

alt text

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
            }
        });

alt text

To set manual progress -

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

alt text

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>

alt text

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>

alt text

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>

alt text

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.