Open In App

How to Make Animated Submit and Failed Buttons in Android?

Improve
Improve
Like Article
Like
Save
Share
Report

In Android applications, a Button is a user interface that is used to perform some action when clicked or tapped. It is a very common widget in Android and developers often use it. This article demonstrates how to create Animated Submit and Failed Buttons in Android Studio.

What we are going to build in this article? 

In this article, we will develop a sample application that will contain some Buttons in its MainActivity. Using clicking event of the Buttons we will see an animation on those buttons. A sample video is given below to get an idea about what we are going to do in this article. Note that we are going to implement this project using the Java language. 

Step by Step Implementation

Step 1: Create a New Project

To create a new project in Android Studio please refer to How to Create/Start a New Project in Android Studio. Note that select Java as the programming language. 

Step 2: Add dependency

Now, Navigate to the Gradle Scripts > build.gradle(Module:app) add the below dependency in the dependencies section.

Java




implementation 'me.spark:submitbutton:1.0.1'
implementation 'com.unstoppable:submitbutton:1.1.3'


Now, sync your project and now we have everything which we will need during implementation so now, move towards its implementation.  

Step 3: Working with the activity_main.xml file

Now it’s time to design the layout of the application. So for that go to the app > res > layout > activity_main.xml and paste the below-written code in the activity_main.xml file. 

XML




<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout 
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:id="@+id/relative_layout"
    tools:context=".MainActivity"
    android:orientation="vertical"
    >
    
    <!--creation of first type submit button that is 
        unique_check_button which is located at the top-->
    <com.spark.submitbutton.SubmitButton
        android:id="@+id/unique_check_button"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_marginTop="120dp"
        android:layout_centerHorizontal="true"
        android:text="Click Me"
        android:textColor="#131212"
        app:sub_btn_background="@color/white"
        app:sub_btn_duration="3000"
        app:sub_btn_line_color="#0F9D58"
        app:sub_btn_ripple_color="#0F9D58"
        app:sub_btn_tick_color="@color/white" />
  
    <!--creation of a common loading button which 
        will show two different events submit or failed -->
    <com.unstoppable.submitbuttonview.SubmitButton
        android:id="@+id/sbtn_loading"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        app:buttonText="Submit"
        app:buttonTextSize="25sp" />
  
    <!-- creation of progress button-->
    <com.unstoppable.submitbuttonview.SubmitButton
        android:id="@+id/sbtn_progress"
        android:layout_width="200dp"
        android:layout_height="50dp"
        android:layout_centerInParent="true"
        android:layout_marginTop="30dp"
        android:visibility="gone"
        app:buttonText="Submit"
        app:buttonTextSize="25sp"
        app:progressStyle="progress" />
  
    <!-- creation of normal succeed button-->
    <Button
        android:id="@+id/btn_succeed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_margin="10dp"
        android:text="succeed" />
  
    <!-- creation of normal failed button-->
    <Button
        android:id="@+id/btn_failed"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_centerHorizontal="true"
        android:layout_margin="10dp"
        android:text="failed" />
  
    <!-- creation of normal reset button-->
    <Button
        android:id="@+id/btn_reset"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentBottom="true"
        android:layout_alignParentRight="true"
        android:layout_margin="10dp"
        android:text="reset" />
  
</RelativeLayout>


Step 4: Working with the MainActivity.java file

Go to the app > java > package name > MainActivity.java file and refer to the following code. Below is the code for the MainActivity.java file. Comments are added inside the code to understand the code in more detail.

Java




import androidx.appcompat.app.AppCompatActivity;
  
import android.os.AsyncTask;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.Switch;
import android.widget.Toast;
import com.unstoppable.submitbuttonview.SubmitButton;
  
public class MainActivity extends AppCompatActivity implements View.OnClickListener {
    private SubmitButton sBtnLoading, sBtnProgress;
    private Button btnSucceed, btnFailed, btnReset;
    private Switch mSwitch;
    private MyTask task;
  
    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
  
        // initialization of all buttons created in activity_main.xml 
          // file using findViewById()
        sBtnLoading = (SubmitButton) findViewById(R.id.sbtn_loading);
        sBtnProgress = (SubmitButton) findViewById(R.id.sbtn_progress);
        btnFailed = (Button) findViewById(R.id.btn_failed);
        btnSucceed = (Button) findViewById(R.id.btn_succeed);
        btnReset = (Button) findViewById(R.id.btn_reset);
  
        // apply setOnClickListener to all buttons
        sBtnLoading.setOnClickListener(this);
        sBtnProgress.setOnClickListener(this);
        btnSucceed.setOnClickListener(this);
        btnFailed.setOnClickListener(this);
        btnReset.setOnClickListener(this);
  
        // apply setOnResultEndListener to sBtnLoading button
        sBtnLoading.setOnResultEndListener(new SubmitButton.OnResultEndListener() {
            @Override
            public void onResultEnd() {
                // toast class use makeText method to show short time message in android
                Toast.makeText(MainActivity.this, "ResultEnd", Toast.LENGTH_SHORT).show();
            }
        });
  
    }
  
    // set onClick method to all buttons when the buttons 
    // get clicked left to the unique_check_button button
    // of activity_main.xml file
    @Override
    public void onClick(View v) {
        switch (v.getId()) {
  
  
            case R.id.sbtn_loading:
  
                // when btn_loading gets clicked then this section will run
                Toast.makeText(this, "SubmitButton is just clicked", Toast.LENGTH_SHORT).show();
                break;
  
            case R.id.sbtn_progress:
  
                // when btn_progress gets clicked then this section will run
                if (task == null || task.isCancelled()) {
                    task = new MyTask();
                    task.execute();
                }
                break;
  
            case R.id.btn_succeed:
  
                    // when btn_succeed gets clicked then this section will run
                    sBtnLoading.doResult(true);
  
                break;
            case R.id.btn_failed:
  
                    // when btn_failed gets clicked then this section will run
                    sBtnLoading.doResult(false);
  
                break;
            case R.id.btn_reset:
  
                    // when btn_reset gets clicked then this section will run
                    if (task != null && !task.isCancelled()) {
                        task.cancel(true);
                        sBtnProgress.reset();
                    }
                 else {
                    sBtnLoading.reset();
                }
                break;
        }
    }
  
    // creating new private MyTaskClass to perform background functioning
    private class MyTask extends AsyncTask<Void, Integer, Boolean> {
  
        // creation of method doInBackground()
        @Override
        protected Boolean doInBackground(Void... params) {
            int i = 0;
            while (i <= 100) {
                if (isCancelled()) {
                    return null;
                }
                try {
                    Thread.sleep(30);
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
                i++;
                publishProgress(i);
            }
            return true;
        }
  
        // creation of onPostExecute()
        @Override
        protected void onPostExecute(Boolean aBoolean) {
            if (aBoolean == null) {
                sBtnProgress.reset();
            }
            sBtnProgress.doResult(aBoolean);
        }
  
        // creation of onProgressUpdate()
        @Override
        protected void onProgressUpdate(Integer... values) {
            sBtnProgress.setProgress(values[0]);
        }
    }
}


That’s all, now the application is ready to install on the device. Here is what the output of the application looks like.

Output:



Last Updated : 09 Apr, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads