Capitulo 11 ➜ Botones y el evento onclick

Un button en Android permite darle interactividad a la aplicación, entonces ¿Cómo se programa un botón? y ¿Cómo le da interactividad?. Veamos a continuación:

Crear o programar un botón en una aplicación Android es relativamente sencillo pues solo necesitamos agregarlo mediante la vista de diseño seleccionando el Widget Button o también podríamos escribir xml en la vista texto.

Y darle interactividad requiere de usar métodos en este caso el onclick, este método encapsula las instrucciones que queramos darle a evento click, es decir la ejecución de funcionalidades que debemos programar antes, como lanzar un mensaje, lanzar una nueva actividad, etc..

03 Formas de Programar un Botón en Android 

Primera forma

En la vista xml debemos agregar atributos el más importante es el atributo id seguido del text y debe verse de la siguiente manera:

<Button
        android:id="@+id/btn"
        android:background="@color/colorPrimary"
        android:textSize="15dp"
        android:textColor="#fff"
        android:layout_width="wrap_content"
        android:text="0"
        android:layout_height="wrap_content" />

Tengan en cuenta que este xml esta basado en el anterior video donde declaramos colores en values/colors, y es por ello que podemos usar colorPrimary, aunque ello viene por default cuando creamos una app vacía.

Ahora veamos el código Java, en el cual declaramos que vamos a usar la clase Button luego asociamos el id del boton xml y por último agregamos el evento de escucha onclick con el método onclicklistener y dentro programamos un mensaje tipo notificación que es este caso es el más sencillo de implementar que es el Toast.

// aquí arriba van los import que por defecto se insertan al usar el IDE de Android Studio.
public class MainActivity extends AppCompatActivity {

    private Button boton;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        boton = findViewById(R.id.btn);
        boton.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View view) {
                    Toast.makeText(
                            getApplicationContext(),
                            "HICISTE CLICK EN EL BOTÓN",
                            Toast.LENGTH_LONG).show();
                }
            }
        });



    }
}

Ahora la Segunda forma

En esta forma pues no necesitamos declara  un id , pero si debemos declarar en el evento onclick en la vista xml del boton el método a cual  llamaremos boton, para que se vea más legible veamos el xml en mención:

<Button
        android:onclick="boton"
        android:layout_width="wrap_content"
        android:text="PRESIONAR"
        android:layout_height="wrap_content" />

Viendo el código en Java debemos crear ésta función llamada boton y darle la correspondiente interactividad, la cual será lanzar un mensaje Toast. Y queda de la siguiente forma:

public class MainActivity extends AppCompatActivity{

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

    }
    // segunda forma    
    public void boton(){
        Toast.makeText(
                getApplicationContext(),
                "Segunda  forma",
                Toast.LENGTH_LONG).show();
    }
}

Y por último la tercera forma

Esta última forma es ideal o recomendable usarla cuando tengamos más de dos botones en la estructura de la aplicación que estemos desarrollando. Es por ello que usaremos 02 botones en el Xml  para mostrar las ventajas de su uso. Donde notamos que cada botón tiene un identificados único y muestran un texto diferente.

<Button
        android:id="@+id/btn1"
        android:layout_width="wrap_content"
        android:text="PRESIONAR 1"
        android:layout_height="wrap_content" />
<Button
        android:id="@+id/btn2"
        android:layout_width="wrap_content"
        android:text="PRESIONAR 2"
        android:layout_height="wrap_content" />

Ahora veamos la parte correspondiente a Java

Donde declaramos o instanciamos a dos clases, luego casteamos los dos botones xml mediante sus ID´s, Aclaramos que para que funcione correctamente ésta tercera forma debemos implementar el escuchador onclick listener en toda la activity, este procedimiento creará una función que gestionará las acciones que deban ejecutarse por cada botón, finalmente debemos asociar el onclicklistener a cada boton enviando cómo parámetro la vista en la que se encuentran. Veamos el código completo en Java:

public class MainActivity extends AppCompatActivity implements View.OnClickListener {

    private Button boton1,boton2;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        boton1 = findViewById(R.id.btn1);
        boton2 = findViewById(R.id.btn2);
        boton1.setOnClickListener(this);
        boton2.setOnClickListener(this);

    }

    @Override
    public void onClick(View view) {
        switch (view.getId()){
            case R.id.btn1:
                Toast.makeText(
                        getApplicationContext(),
                        "presionaste 1",
                        Toast.LENGTH_LONG).show();
                break;
            case R.id.btn2:
                Toast.makeText(
                        getApplicationContext(),
                        "presionaste 2",
                        Toast.LENGTH_LONG).show();
                break;
        }

    }
}

Finalmente concluimos

Que el uso de botones en cualquier aplicación es indispensable para darle interactividad, y hemos vista las tres forma de programarlo, obviamente se debe adecuar al proyecto que estén desarrollando. Otra cosa a tener en cuenta es que el evento onclick no es exclusivo del botón sino que tambien se puede asociar a un TextView y con un poco de diseño xml se puede darle la apariencia de botón.

Bueno, en el siguiente video empezaremos con el diseño XML de la calculadora.