¿Cómo hacer botones animados de envío y fallidos en Android?

En las aplicaciones de Android, un botón es una interfaz de usuario que se utiliza para realizar alguna acción cuando se hace clic o se toca. Es un widget muy común en Android y los desarrolladores lo usan a menudo. Este artículo muestra cómo crear botones de envío y fallidos animados en Android Studio.

¿Qué vamos a construir en este artículo? 

En este artículo, desarrollaremos una aplicación de muestra que contendrá algunos botones en su MainActivity. Al hacer clic en el evento de los botones, veremos una animación en esos botones. A continuación se muestra un video de muestra para tener una idea de lo que vamos a hacer en este artículo. Tenga en cuenta que vamos a implementar este proyecto utilizando el lenguaje Java . 

Implementación paso a paso

Paso 1: Crear un nuevo proyecto

Para crear un nuevo proyecto en Android Studio, consulte Cómo crear/iniciar un nuevo proyecto en Android Studio . Tenga en cuenta que seleccione Java como lenguaje de programación. 

Paso 2: Agregar dependencia

Ahora, navegue a Gradle Scripts > build.gradle(Module:app) y agregue la siguiente dependencia en la sección de dependencias.

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

Ahora, sincronice su proyecto y ahora tenemos todo lo que necesitaremos durante la implementación, así que ahora avance hacia su implementación.  

Paso 3: trabajar con el archivo activity_main.xml

Ahora es el momento de diseñar el diseño de la aplicación. Entonces, para eso, vaya a la aplicación> res> diseño> actividad_principal.xml y pegue el código escrito a continuación en el archivo  actividad_principal.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>

Paso 4: trabajar con el archivo MainActivity.java

Vaya a la aplicación > java > nombre del paquete > archivo MainActivity.java y consulte el siguiente código. A continuación se muestra el código del archivo MainActivity.java . Se agregan comentarios dentro del código para comprender el código con más detalle.

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

Eso es todo, ahora la aplicación está lista para instalarse en el dispositivo. Así es como se ve la salida de la aplicación.

Producción: