Open In App

How to Make Animated Submit and Failed Buttons in Android?

Last Updated : 09 Apr, 2021
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:



Similar Reads

Fix "Error running android: Gradle project sync failed. Please fix your project and try again" in Android Studio
In this article, we will see how to fix the error: "Gradle project sync failed. Please fix your project and try again" in Android Studio". Before getting into the solution part, let's discuss Gradle. What is Gradle? Gradle is an open-source build automation tool that automates the creation of applications. The various steps involved in creating an
5 min read
Different Ways to fix "Error running android: Gradle project sync failed" in Android Studio
Gradle is one of the most important components of Android apps. It handles all the backend tasks and manages all the external dependencies which we will be going to use in building our Android Application. Sometimes due to any issue or after formatting of your pc. Some of the Gradle files may get deleted unexpectedly. So when you will start buildin
3 min read
How to Fix “Failed to install the following Android SDK packages as some licenses have not been accepted” Error in Android Studio?
When you download the latest Android SDK tools version using the command line to install SDKs and you just try to build gradle then this error shows up: Failed to install the following Android SDK packages as some licenses have not been accepted. platforms;android-27 Android SDK Platform 27 build-tools;27.0.3 Android SDK Build-Tools 27.0.3 To build
4 min read
Fix "Execution Failed for task :app:compileDebugJavaWithJavac" in Android Studio
Working on some important java project with Java code involved, and just when you hit that Build hammer icon, you get this: Error:Execution failed for task ':app:compileDebugJavaWithJavac'. &gt; Compilation failed; see the compiler error output for details. * What went wrong: Execution failed for task ':app:compileDebugJavaWithJavac'. &gt; Compilat
2 min read
Different Ways to fix "Execution failed for task ':processDebugManifest'" in Android Studio
AndroidManifest.xml file is one of the most important files in your Android Project. This file handles all other files in your Android Studio Project and also provides apk name and app logo for the generated apk in Android. Many times while building an Android project our Manifest file gets overwritten. So we will get to see this kind of issue as E
4 min read
Different Ways to fix "Execution failed for task ':app:clean'. Unable to delete file" error in Android Studio
When you try to rebuild or clean and build your project (containing mostly Kotlin code) in Android Studio, it fails and throws the error: Execution failed for task ':app:clean'. Unable to delete file: SpecificFileLocation So, In this article, we are going to see the topics: why there is a need to solve this error and how to solve this error. We wil
3 min read
How to fix "Execution failed for task ':app:transformClassesWithDexForRelease' in Android Studio?
When we run our app in debug mode in Android Studio, it runs successfully but when we switch to release mode, it fails and throws the error: **FAILURE: Build failed with an exception.** &gt; Execution failed for task ':app:transformClassesWithDexForRelease'. &gt; com.android.build.api.transform.TransformException: com.android.ide.common.process.Pro
3 min read
How to Fix Gradle: Execution failed for task ':processDebugManifest' Error in Android Studio?
Gradle assemble-info provided me an indication that the manifestations do not have various versions of SDK and can not be integrated. And after hours of working on some important project you suddenly face such an issue: [caption width="800"]Firgure1. Oops![/caption] Well, getting rid of this is easy, just follow the below-mentioned methods, and you
3 min read
Fix "Execution failed app:processDebugResources" in Android Studio
Resources are the files and static content that the application's code uses, such as animations, images, layouts, and string values. These files stored in the resource directory can be referenced from the application's code but when a non-existent reference is called android throws an "Execution failed app:processDebugResources" error. In this arti
3 min read
Android | How to add Radio Buttons in an Android Application?
Android radio button is a widget that can have more than one option to choose from. The user can choose only one option at a time. Each option here refers to a radio button and all the options for the topic are together referred to as Radio Group. Hence, Radio Buttons are used inside a RadioGroup. Pre-requisites: Android App Development Fundamental
6 min read
Article Tags :
Practice Tags :