How to Make Animated Submit and Failed Buttons in Android?
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:android = "http://schemas.android.com/apk/res/android" xmlns:app = "http://schemas.android.com/apk/res-auto" 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: