DesarrolloLibre

Desarrollo Web, Android, juegos y mucho más

19-06-2014

Los botones al igual que cualquiera interfaz de usuario consisten en un elemento que permite a un usuario interactuar con el sistema; generalmente se encuentran basados en eventos y son muy personalizables; en este artículo veremos cómo definir y utilizar un botón en Android.

En Android los botones pueden constar de texto y/o imagen, clasificandolo en tres tipos de botones:

  • Texto: Para crear un botón con solo texto, basta con emplear en siguiente XML:
    <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:text="Boton" />
    

    Al interpretar el XML anterior:

    botón
  • Imagen: Para crear un botón con una imagen, basta con emplear en siguiente XML:
    <ImageButton
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:background="@drawable/ic_action_new" />
    

    Al interpretar el XML anterior:

    boton con una imagen
  • Texto e Imagen: Para crear un botón compuesto por texto e imágenes, basta con emplear en siguiente XML para definir el botón:
    <Button
            android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableLeft="@drawable/ic_action_new"
            android:text="Boton" />
    

    Al interpretar el XML anterior:

    botón con una imagen alineada a la izquierda

    Si queremos que la imagen está alineada a la derecha:

    <Button
     	android:id="@+id/button"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:drawableRight="@drawable/ic_action_new"
            android:text="Boton" />
    

    Al interpretar el XML anterior:

    botón con una imagen alineada a la derecha

Atributos de los botones

Algunos de los principales atributos de los botones son:

  • android:id Identificador del elemento; en este caso del botón; al igual que ocurre con el HTML, es la forma de identificar unívocamente y acceder a un elemento.
  • android:text Texto del elemento; en este caso del botón.
  • drawable(Left/Right) Con este atributo podemos colocarle una imagen al botón alineado a la izquierda (drawableLeft) o a la derecha (drawableRight).
  • layout_width y layout_height Indicamos el ancho y altura respectivamente del elemento; en este caso nuestro botón; puede recibir alguno de los siguientes valores:
    • wrap_content Indica que las dimensiones del elemento serán ajustadas al contenido que presente el mismo: imagen explicativa sobre el wrap_content

      android:layout_width="match_content" y android:layout_height="wrap_content".

    • match_parent Indica que las dimensiones del elemento serán ajustadas a las medias del contenedor; es como la propiedad width o height con el valor 100%: imagen explicativa sobre el match_content

      android:layout_width="wrap_content" y android:layout_height="wrap_content".

    • Un valor numérico generalmente en densidades por pixeles (dp) o dpi, pero también se pueden emplear otras como y en pixeles (px) pero esta última no es muy recomendada; ejemplo 50dp.

Por supuesto también se les puede aplicar otros atributos de estilo como lo son:

  • android:visibility Permite definir si el elemento será visible o no; igual que la propiedad visibility en CSS.
  • android:padding Permite definir el espacio o margen entre el elemento y su contenido; como la propiedad padding en CSS.
  • android:background Permite indicar el color de fondo o imagen de un elemento; igual que la propiedad background en CSS.
  • android:layout_gravity Permite alinear un elemento; tienen un comportamiento similar a la propiedad float en CSS.
  • android:layout_margin Permite definir el espacio o margen entre el elemento y su contenedor; como la propiedad margin en CSS.

Entre muchos otros.

Eventos de los botones

Podemos emplear el atributo:

android:onClick="funcion" 

Por ejemplo, si quisiéramos aplicar esta funcionalidad en el primer tipo de botón visto (aunque es posible emplearlo en los tres tipos de botones):

<Button
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:text="Alarm"/>
    android:onClick="funcion" 	

En donde "funcion" es el método o función que será invocado en el Activity al momento de aplicarle click en el botón.

public void funcion(View view) {
    // hacemos algo ...
}

Manejador de eventos OnClickListener

También podemos programar el manejador de eventos fuera del XML que forma la interfaz y colocarlos dentro de la Activity:

Button botonButton = (Button) findViewById(R.id.botonButton);
botonButton.setOnClickListener(new View.OnClickListener() {
    public void onClick(View v) {
    // hacemos algo ...
    }
});

La clase R contiene las referencias a los componentes de nuestra aplicación; básicamente gráficos, elementos y textos globales de la aplicación; con R.id.botonButton podemos acceder al elemento con id botonButton:

android:id="@+id/botonButton"

Enlaces de Interés


Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Paleta de colores para el Material Design

Paleta de colores para el Material Design

Templates para Android y iOS

Templates para Android y iOS

Generador de launcher para Android sin padding

Generador de launcher para Android sin padding

Algunos artículos que te pueden interesar

¿Qué es el ADT de Android?

¿Qué es el ADT de Android?

El ADT por sus siglas en inglés Herramientas de Desarrollo Android en inglés Android Development Tools; es un plugin para Eclipse que permite construir aplicaciones para Android.

Andrés Cruz 02-09-2013

Comenzando con Adobe PhoneGap en Windows y Android

Comenzando con Adobe PhoneGap en Windows y Android

Se explica como instalar Adobe PhoneGap en Windows y Android además de crear un proyecto y configurarlo en la aplicación móvil.

Andrés Cruz 27-01-2017

Usar la consola de salida en Eclipse System.out.println y Log

Usar la consola de salida en Eclipse System.out.println y Log

La API de Android incorpora la clase Log para desplegar distinto tipos de información.

Andrés Cruz 13-02-2014