A la hora de crear un botón para Android, lo más normal es utilizar el típico View Button. Este nos crea un botón gris, característico en los sistemas Android que, aunque es lo más rápido de añadir y configurar, probablemente, no encaje con la estética de una aplicación. En este curso de desarrollo android vamos a ver cómo crear botones diferentes, a partir de imágenes previamente diseñadas, por ejemplo, un icono o un logotipo.

Android cuenta con un tipo de View específico llamado “ImageButton” que nos va a permitir utilizar una imagen cualquiera como un botón, sobre el cual el usuario puede pulsar para ir, por ejemplo, a otra actividad. Un ejemplo de ImageButton es, entre otros, un botón con forma de teléfono que nos abriría el teclado para llamar. En vez de pulsar sobre un botón gris llamado “Teléfono”, el ImageButton nos permite dar una apariencia más agradable a este.

Cómo crear una imagen multi-resolución para desarrollo Android

Antes de crear un ImageButton debemos tener en cuenta una serie de aspectos:

  • La imagen que vamos a añadir debe ir, como todos los otros recursos, en res/drawable
  • Debemos añadir 5 imágenes diferentes, una por cada tipo de resolución, de manera que la imagen se vea bien tanto en pantallas pequeñas como en grandes. En función del tamaño de la imagen mdpi, la resolución del resto de recursos será:
    • drawable-ldpi – 75% del tamaño del mdpi – Por ejemplo, 75px
    • drawable-mdpi – imagen original – Por ejemplo, 100px
    • drawable-hdpi – 150% del tamaño del mdpi – Por ejemplo, 150px
    • drawable-xhdpi – 200% del tamaño del mdpi – Por ejemplo, 200px
    • drawable-xxhdpi – 300% del tamaño del mdpi – Por ejemplo, 300px

Cómo utilizar ImageButton en Android Studio

Una vez tenemos los recursos creados, ya podemos empezar con nuestro nuevo tema de desarrollo Android Studio. Lo primero que haremos será crear un nuevo proyecto llamado “ImageButton” y con las propiedades de siempre: API 9 y Empty Activity.

Una vez tengamos nuestro proyecto en el IDE nos fijamos en la lista de Views, concretamente dentro del apartado “Widgets”.

Android Studio - View ImageButton

Aquí veremos el View “ImageButton“. Arrastramos este hasta nuestra Activity, viendo una interfaz similar a la siguiente.

Android Studio - Añadir ImageButton a App

Una vez que tenemos el “ImageButton” añadido, vamos a asociarlo con una imagen. Para ello, en el menú de propiedades de la parte derecha de la pantalla buscamos la entrada “src“.

Android Studio - Propiedades ImageButton

Pulsamos sobre ella y se nos abrirá una ventana donde podremos buscar nuestro recurso, en nuestro caso, un logo de MovilZona.

Android Studio - Seleccionar recurso para ImageButton

Pulsamos sobre “Ok” y el logo se asociará con el “ImageButton”.

Android Studio - ImageButton

Ya tenemos una imagen funcionando como un botón. Igual que cualquier otro View, este botón podemos hacerlo más grandes, más pequeño y cambiarle cualquiera de sus propiedades.

Si queremos, podemos añadir un Button clásico en la Activity para que, al ejecutar la aplicación, veamos el cambio en la estética de un View a otro.

Android Studio - ImageButton y Button

Ahora, para dar un poco de utilidad al programa, añadiremos una notificación Toast (veremos para qué sirven estas notificaciones y cómo se utilizan en el próximo tema) a cada botón. Si pulsamos sobre el ImageButton nos dirá “Esto es el ImageButton”, de lo contrario, si pulsamos sobre el botón, nos aparecerá un mensaje “Esto es el botón”.

El código en cuestión es el siguiente:

package com.rvdeveloper.imagebutton;

import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;
import android.view.View;
import android.widget.Button;
import android.widget.ImageButton;
import android.widget.Toast;

public class MainActivity extends AppCompatActivity {

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

        //Declaramos los botones
        Button btn = (Button) findViewById(R.id.button);
        ImageButton img = (ImageButton) findViewById(R.id.imageButton);

        btn.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast notificacion = Toast.makeText(MainActivity.this, "Esto es el botón", Toast.LENGTH_SHORT);
                notificacion.show();
            }
        });

        img.setOnClickListener(new View.OnClickListener() {
            @Override
            public void onClick(View v) {
                Toast notificacion2 = Toast.makeText(MainActivity.this, "Esto es el ImageButton", Toast.LENGTH_SHORT);
                notificacion2.show();
            }
        });

    }
}


Android Studio - Código ImageButton

Ejecutamos la aplicación y probamos la diferencia entre los dos tipos de botones.

Desarrollo Android - Prueba ImageButton

Desarrollo Android - Prueba Button