[Tutorial] Android Process Button - Animated Buttons on Android Studio

Welcome!

In this post, I’ll show you how to use Android Process Button. This is one of my favorite components because this allows you to add animated buttons with progress meters on Android.

Android Process Button

I - About Android Tutorials

I’ll be creating a big number of Android tutorials, showing you how to use nice libraries, UI, tips, and more.

I’ll be using Android Studio and Gradle in all tutorials.

If you need some help with any Android lib or feature, feel free to comment here and if possible, I can write a new tutorial about it :)

Source Codes:

Get updates Follow @aron-bordin
Star it: Star
Contribute: Fork
Download: Download

II - Android Process Button

This library is very simple, and with it you can add something extra to your application and make it more elegant.

You can check the project repository here:

And the project documentation

III - Creating a new project

Now, let’s start to work with it. Start a new Android Studio project.

Create your app with a Blank Activity, called MainActivity.

Now you can add the Android Process Button as a project dependency. Open the Gradle Scripts -> build.gradle (from module: App). Compile the com.github.dmytrodanylyk.android-process-button:library:1.0.4 module. This is my gradle dependencies:

dependencies {
  compile fileTree(dir: 'libs', include: ['*.jar'])
  testCompile 'junit:junit:4.12'
  compile 'com.android.support:appcompat-v7:23.1.1'
  compile 'com.android.support:design:23.1.1'
  compile 'com.github.dmytrodanylyk.android-process-button:library:1.0.4'
}

In this post I’ll show you the components available in this library.

IV - Flat Button

Flat Button is a simple stylish button that you can use in your application.

Open your res/layout/content_main.xml and add the following code:

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    xmlns:custom="http://schemas.android.com/apk/res-auto"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingBottom="@dimen/activity_vertical_margin"
    android:paddingLeft="@dimen/activity_horizontal_margin"
    android:paddingRight="@dimen/activity_horizontal_margin"
    android:paddingTop="@dimen/activity_vertical_margin"
    app:layout_behavior="@string/appbar_scrolling_view_behavior"
    tools:context="com.rhesoft.androidprocessbutton.MainActivity"
    tools:showIn="@layout/activity_main"
    android:orientation="vertical">

    <com.dd.processbutton.FlatButton
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Flat Button"
        android:textColor="@android:color/white"
        custom:pb_colorNormal="@android:color/holo_blue_light"
        custom:pb_colorPressed="@android:color/holo_blue_dark" />
</LinearLayout>

This is using a LinearLayout, but feel free to use any layout. The important part if the button declaration, <com.dd.processbutton.FlatButton. As you can see, the button declaration is quite similar with the native Android Button. Here we have two new fields: custom:pb_colorNormal, color of the button, custom:pb_colorPressed, color of the button when pressed.

Check all attributes here: https://github.com/dmytrodanylyk/android-process-button/wiki/API

You can build and run your application now. If you get any error, post here that I can try to help you.

V - Process Button

This button extends the Flat Button used above and adds a progress behavior. You can set the progress status, a number between 0 and 100.

The process button has four states:

  • Normal: progress = 0
  • Loading: progress [1, 99]
  • Success: progress = 100
  • Error: -1

You can configure different colors to each state, and have a loading animation between 1 and 99.

Again, go to your res/layout/content_main.xml and add the following code(you can add after the Flat Button):

<com.dd.processbutton.iml.ActionProcessButton
    android:id="@+id/btnProcess"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    android:text="Process Button"
    android:textColor="@android:color/white"
    android:layout_marginTop="16dp"
    custom:pb_colorComplete="@color/green_complete"
    custom:pb_colorNormal="@color/blue_normal"
    custom:pb_colorPressed="@color/blue_pressed"
    custom:pb_colorProgress="@color/purple_progress"
    custom:pb_textComplete="Success"
    custom:pb_textProgress="Loading"
    custom:pb_textError="Error"
    custom:pb_colorError="@color/red_error" />

Check that now we have some new attributes.

We control it using Java. Open your MainActivity, and add the following code in the end of onCreate:

// get the button view
ActionProcessButton btnProcess = (ActionProcessButton) findViewById(R.id.btnProcess);

//set the animation type. The PROGRESS display a bar with the percentage
//        btnProcess.setMode(ActionProcessButton.Mode.PROGRESS);
//or ENDLESS, that indicate the it's loading
btnProcess.setMode(ActionProcessButton.Mode.ENDLESS);

//start with progress = 0
btnProcess.setProgress(0);

//to test the animations, when we touch the button it will start counting
btnProcess.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       ActionProcessButton btn = (ActionProcessButton) view;
       // we add 25 in the button progress each click
       if(btn.getProgress() < 100){
           btn.setProgress(btn.getProgress() + 25);
       }
   }
});

VI - Submit Process Button

This is very similar with the process button, but you’ll see the difference in the loading animation.

Add the button xml (this is the same xml used to ActionProcessButton, just changed the id!):

    <com.dd.processbutton.iml.SubmitProcessButton
        android:id="@+id/btnSubmit"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:text="Submit Button"
        android:textColor="@android:color/white"
        android:layout_marginTop="16dp"
        custom:pb_colorComplete="@color/green_complete"
        custom:pb_colorNormal="@color/blue_normal"
        custom:pb_colorPressed="@color/blue_pressed"
        custom:pb_colorProgress="@color/purple_progress"
        custom:pb_textComplete="Success"
        custom:pb_textProgress="Loading"
        custom:pb_textError="Error"
        custom:pb_colorError="@color/red_error" />

the java code is very similar, but now we cannot set the button mode:

// get the button view
SubmitProcessButton btnSubmit = (SubmitProcessButton) findViewById(R.id.btnSubmit);

//start with progress = 0
btnSubmit.setProgress(0);

//to test the animations, when we touch the button it will start counting
btnSubmit.setOnClickListener(new View.OnClickListener() {
   @Override
   public void onClick(View view) {
       SubmitProcessButton btn = (SubmitProcessButton) view;
       // we add 25 in the button progress each click
       if(btn.getProgress() < 100){
           btn.setProgress(btn.getProgress() + 25);
       }
   }
});

VII - Generate Process Button

Now, this button has is identical to the Submit button, just changing the animation orientation.

Button xml:

<com.dd.processbutton.iml.GenerateProcessButton
   android:id="@+id/btnGenerate"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:text="Generate Button"
   android:textColor="@android:color/white"
   android:layout_marginTop="16dp"
   custom:pb_colorComplete="@color/green_complete"
   custom:pb_colorNormal="@color/blue_normal"
   custom:pb_colorPressed="@color/blue_pressed"
   custom:pb_colorProgress="@color/purple_progress"
   custom:pb_textComplete="Success"
   custom:pb_textProgress="Loading"
   custom:pb_textError="Error"
   custom:pb_colorError="@color/red_error" />

and the Java code:

// get the button view
GenerateProcessButton btnGenerate = (GenerateProcessButton) findViewById(R.id.btnGenerate);

//start with progress = 0
btnGenerate.setProgress(0);

//to test the animations, when we touch the button it will start counting
btnGenerate.setOnClickListener(new View.OnClickListener() {
    @Override
    public void onClick(View view) {
        GenerateProcessButton btn = (GenerateProcessButton) view;
        // we add 25 in the button progress each click
        if(btn.getProgress() < 100){
            btn.setProgress(btn.getProgress() + 25);
        }
    }
});

This is the demo app:

Demo app

You can download the source code and demo apk in the github repo.

That’s it, thanks for reading!

Aron Bordin

Aron Bordin

Aron Bordin
Computer Science Student and AI researcher. Always coding something fun :)

[Tutorial] Developing Android Background Services

### Welcome!In this post, I'll show you how to develop background services on Android Studio. We'll see two type of services: `Service` a...… Continue reading