Interface de Usuario Android - Botones

Bienvenidos a otra nueva lección del curso gratuito en www.AprendeAndroid.com Últimamente estoy viendo que hay muchas webs/blogs que se están apropiando de mi trabajo gratuitamente, pero en fin... espero que les salga un Grano en el culito de esos que no te dejan sentarte! ;P.

Los Botones en Android

En el apartado anterior hemos visto los distintos tipos de layout con los que contamos en Android para distribuir los controles de la interfaz por la pantalla del dispositivo. En las próximas lecciones vamos a hacer un recorrido por los diferentes controles, y en esta concretamente los de tipo Button (Botón) que pone a nuestra disposición la plataforma de desarrollo Android.

vamos a ver los diferentes tipos y cómo podemos personalizarlos, Android en este caso nos proporciona tres tipos de botones:

Button: Es el típico botón normal, contiene un texto y puede contener imágenes de tipo icono que puedes alinear con el texto.
ToggleButton: es de tipo on/off, contiene una rayita que indica ese on/off.
ImageButton: El botón contiene una imagen, es muy útil para cuando queremos hacer cosas vistosas y de diseño con formas raras, ya que el Button es rectangular, y aquí podemos usar cualquier forma poniendo el fondo transparente.

Eclipse, Java, Android Ejemplos Botones Android

Ejemplo Button Android

Vamos a ver, en los tutos que he encontrado por ahí no se entretienen mucho en explicar estas cosas "tan sencillas" pero joe si algo es desde cero... ¡¡hay que explicarlo todo!! ¿no te parece? ;P.

Para programar un botón necesitamos 2 cosas: por un lado todas las propiedades del botón que lo programamos en el xml (tamaño, color, texto del botón, alineación, margenes...) y por el otro lo que llamamos el Listener que es el encargado de "escuchar" en nuestro código cuando es pulsado. Vamos a analizar la parte del XML, he intentado usar muchas propiedades, para poner un botón no hace falta todo esto, basta con poner tamaño texto y el OnClick.

ejemplo button Android Eclipse, Java, Android

Arriba vemos el resultado de la pantalla con el código xml que hemos programado voy a intentar explicar cada propiedad lo que hace para que poco a poco vallamos entendiendo cada línea, antes de nada vamos a reforzar lo que vimos en el tema anterior eso de los Layouts, fíjate que lo que e etiquetado como "1" es el Layout principal, es decir, el contenedor principal, con las propiedades de tamaño (ancho y alto) fill_parent, esto es así porque nos interesa que este primer contenedor coja el tamaño de su padre, es decir la pantalla del móvil o tablet, también le hemos puesto la propiedad gravity="center" para que sus hijos estén centrados tanto vertical como horizontal. Dentro de este contenedor hemos programado un botón, al que hemos puesto un texto y dos imágenes uno a cada lado, ahora expliquemos cada elemento:

 

Eclipse, Java, Android
Eclipse, Java, Android

 android:id. Esto ya lo vimos en el tema anterior, esta propiedad es el ID del control, con el que podremos identificarlo de forma única más tarde en nuestro código. Vemos que el identificador lo escribimos precedido de “@+id/”. Esto tendrá como efecto que al compilarse el proyecto se genere automáticamente una nueva constante en la clase R para dicho control.
 android:text. Texto del control. En Android, el texto de un control se puede especificar directamente, o bien utilizar alguna de las cadenas de texto definidas en los recursos del proyecto (fichero strings.xml), en cuyo caso indicaremos su identificador precedido del prefijo “@string/”.
 android:layout_height y android:layout_width. Dimensiones del control con respecto al layout que lo contiene. Esta propiedad tomará normalmente los valores “wrap_content” para indicar que las dimensiones del control se ajustarán al contenido del mismo, o bien “fill_parent” para indicar que el ancho o el alto del control se ajustará al ancho o alto del layout contenedor respectivamente.
 android:layout_margin. Este parametro indica el espacio entre el control (en este caso botón) y su padre en este caso el Layout.
 android:padding. Este parámetro indica el espacio entre Texto o Imágenes que pongamos dentro del control (en este caso el botón) y el propio control.
 android:gravity. Esta es la gravedad del control, la verdad es que es una forma original de poner la alineación, si entre las comillas de este parámetro pulsamos la famosa combinación de teclas Control+Espacio, eclipse nos dará todos los parámetros que podemos usar aquí, si ponemos solo "center" se centrara su contenido tanto vertical como horizontal.
 android:drawable. Con este parámetro pondremos una imagen al botón, que no es lo mismo que el ImageButton, que todo el botón es en si una imagen, con esto ponemos una especie de icono dentro del botón, por ejemplo si queremos poner el tipoco Play, Stop las flechas de avance o retroceso... existen variantes de este parámetro para poner la imagen a la derecha o izquierda, arriba o abajo.
 android:Text. Con este parametro definimos el texto del botón, podemos usar un recurso R usando "@String/texto o directamente un texto entre comillas.
 android:TextSize. Ai indicamos un tamaño, si no ponemos esto, se selecciona un tamaño por defecto standard, si te parece grando o pequeño ve probando usando la unidad dp que vimos en el tema anterior.
 android:backgroud. Con este parámetro definimos el color de fondo del Boton.
 android:OnClick. Esta es una propiedad que nos ayuda con el Listener, al final de la lección hablo de esto, que es la parte Java del Boton, esto nos facilita la vida, lo malo es que solo se puede utilizar a partir de la API 6 de Android, no creo que vallas a hacer un proyecto con esta API yo uso esta opción, es menos lioso.

Bueno, hasta aquí con el XML del Botón, muchos de los parámetros que hemos visto son comunes con los otros 2 tipos de botones, recuerda que en cualquier momento, puedes usar las combinaciones de teclas Control+Espacio (no me cansare de recordarlo) no tienes que conocer todas las propiedades, eclipse nos ayuda a esto, usalo.

Eclipse, Java, Android

 


Ejemplo ToggleButton Android

Después de lo anterior, solo voy a decir las diferencias entre cada tipo, así que este es un tipo de botón que puede permanecer en dos estados, pulsado/no_pulsado. En este caso, en vez de definir un sólo texto para el control definiremos dos, dependiendo de su estado, asignamos estas propiedades con estas dos propiedades android:textOn y android:textoOff para definir ambos textos, veamos un ejemplo básico de ToggleButton, piensa que puedes añadir mas propiedades como el caso anterior. Yo personalmente no e usado estos controles nunca, prefiero usar el ImageButton, piensa que puedes cambiar las imágenes del boton luego en el programa cuando te convenga.

Eclipse, Java, Android Eclipse, Java, Android

Ejemplo ImageButton Android

Es un Botón muy usado en cuanto queremos hacer cositas mas vistosas, la principal diferencia es que en un ImageButton definimos una imagen a mostrar en vez de un texto. Esta imagen la definimos con la propiedad android:src. Normalmente asignaremos esta propiedad un recurso Drawable que hayamos incluido en la carpeta /res/drawable. Aquí os dejo un ejemplo de una de mis aplicaciones, use un ImageButton para hacer un Botón que pareciera un paro de emergencia, fíjate en las propiedades del xml, fíjate que solo hay 2 diferentes: android:src y android:ContentDescription esta ultima es un texto de descripción del botón a nivel informativo, ya que no aparece en nuestro programa por ningún sitio.

ejemplo imagebutton android Eclipse, Java, Android

Bueno y hasta aquí la parte de xml, ahora explicare la parte de Java, que como ya mencione un poco mas arriba hay dos métodos, el clásico tradicional, y el que a mi mas me gusta por su simpleza que es usando la propiedad OnClick en el botón en la parte de xml, como siempre digo.... cada maestrillo tiene su librillo que cada uno coja la que mas le guste.

Listener Button de Android en el código Java

Voy a comenzar por la parte tradicional, una vez en nuestro Java, para usar el control Botón tenemos que localizarlo y definir la variable, después crearemos lo que se dice Listener que es el encargado de escuchar al botón que le dirá a nuestro Java cuando el usuario lo ha pulsado, esta parte será común a los tres tipos de Botones, solo cambiando el tipo de variable (Button, ImageButton o ToggleButton).

Eclipse, Java, Android

Como veis en el ejemplo de arriba, dentro del código de nuestra aplicación hay que poner el Listener del botón, primero se localiza el botón y se asigna a una variable, después se crea el Listener, en el ejemplo al pulsar el botón cambiaremos el texto del botón, es decir la propiedad android:text que pusimos en el xml.

Ahora vamos a ver el segundo método (el que utilizo yo) como veras se queda el código como mas limpio, primero porque el código de este botón se pone fuera de nuestro programa principal, y segundo porque el código del propio Listener se simplifica bastante, nada menos que a una línea! ¿genial verdad?

Eclipse, Java, Android

Solo ten la precaución de controlar que el nombre del método "btn_hola" que pongas en la parte Java sea el mismo que pongas en el xml del Layout que estamos programando. Otra cosa que también te ahorras es la de localizar el botón, lo que pasa es que en el ejemplo, como le cambio el texto al botón hay que localizarlo, porque si no Android no sabe que botón es, pero si no cambiamos nada del botón, no hace falta localizarlo, lo que una vez mas simplificamos mas.

Espero que esta lección haya quedado clara, recuerda que puedes opinar y/o sugerir mejoras en el FORO, Si te a gustado este sitio, puedes hacer click en me gusta en Facebook, Google+, Tweeter... es el único precio que te pido por este trabajo! ;P. Compartiendo, ayudaras a otros a encontrar esta web! GRACIASSSS.