Interfaz de usuario en Android: Controles básicos (I)

31,3K

Actualizado: Mayo 2020

En el capítulo anterior del curso vimos los distintos tipos de layouts con los que contamos en Android para distribuir los controles de la interfaz por la pantalla del dispositivo. En los próximos capítulos vamos a hacer un repaso de los diferentes controles que pone a nuestra disposición la plataforma de desarrollo de este sistema operativo. Empezaremos con los controles más básicos y seguiremos posteriormente con algunos algo más elaborados.

En este primer post sobre el tema nos vamos a centrar en los diferentes tipos de botones y cómo podemos personalizarlos. El SDK de Android nos proporciona tres tipos de botones: los clásicos de texto (Button), los que pueden contener una imagen (ImageButton), y los de tipo on/off (ToggleButton y Switch).

No vamos a comentar mucho sobre ellos dado que son controles de sobra conocidos por todos, ni vamos a enumerar todas sus propiedades porque existen decenas. A modo de referencia, a medida que los vayamos comentando iré poniendo enlaces a su página de la documentación oficial de Android para poder consultar todas sus propiedades en caso de necesidad.

Control Button [API]

Un control de tipo Button es el botón más básico que podemos utilizar y normalmente contiene un simple texto. En el ejemplo siguiente definimos un botón con el texto «Click» asignando su propiedad android:text. Además de esta propiedad podríamos utilizar muchas otras como el color de fondo (android:background), estilo de fuente (android:typeface), color de fuente (android:textColor), tamaño de fuente (android:textSize), etc.

<Button android:id="@+id/btnBotonSimple"
        android:text="@string/click"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

Este botón quedaría como se muestra en la siguiente imagen:

Control ToggleButton [API]

Un control de tipo ToggleButton es un tipo de botón que puede permanecer en dos posibles estados, pulsado o no pulsado. En este caso, en vez de definir un sólo texto para el control definiremos dos, dependiendo de su estado. Así, podremos asignar las propiedades android:textOn y android:textoOff para definir ambos textos. Veamos un ejemplo a continuación.

<ToggleButton android:id="@+id/btnToggle"
        android:textOn="@string/on"
        android:textOff="@string/off"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

El botón se mostraría de alguna de las dos formas siguientes, dependiendo de su estado:

• 

• 

Control Switch [API]

Un control Switch es muy similar al ToggleButton anterior, donde tan sólo cambia su aspecto visual, que en vez de mostrar un estado u otro sobre el mismo espacio, se muestra en forma de deslizador o interruptor. Su uso sería completamente análogo al ya comentado:

<Switch android:id="@+id/btnSwitch"
        android:text="@string/seleccion"
        android:switchPadding="10dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_below="@id/btnToggle" />

En este caso no hemos definido los textos de los estados On y Off (aunque podríamos hacerlo con las mismas propiedades android:textOn y android:textOff que ya conocemos) ya que la propia imagen del control debería ser suficientemente descriptiva. Lo que sí hemos asignado es la propiedad android:text para añadir un texto a la izquierda del control que sirve habitualmente para describir su función. También podemos asignar por ejemplo la propiedad android:switchPadding para definir el espacio entre el texto del control y su representación visual.

Su aspecto final quedaría de la siguiente forma:

• 

• 

Control ImageButton [API]

En un control de tipo ImageButton podremos definir una imagen a mostrar en vez de un texto, para lo que deberemos asignar la propiedad android:src. Normalmente asignaremos esta propiedad con el descriptor de algún recurso que hayamos incluido en las carpetas /res/drawable. Así, por ejemplo, en nuestro caso vamos a incluir una imagen llamada «ic_estrella» por lo que haremos referencia al recurso «@drawable/ic_estrella«. Adicionalmente, al tratarse de un control de tipo imagen también deberíamos acostumbrarnos a asignar la propiedad android:contentDescription con una descripción textual de la imagen, de forma que nuestra aplicación sea lo más accesible posible. Otra propiedad que podemos asignar, también común a casi todos los tipos de botones, sería android:padding para definir el espacio entre el borde del botón y su contenido.

<ImageButton android:id="@+id/btnImagen"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:contentDescription="@string/icono_estrella"
        android:src="@drawable/ic_estrella"
        android:padding="16dp" />

En una aplicación el botón anterior se mostraría de la siguiente forma:

Cabe decir además, que aunque existe este tipo específico de botón para imágenes, también es posible añadir una imagen a un botón normal de tipo Button, a modo de elemento suplementario al texto (compound drawable). Por ejemplo, si quisiéramos añadir un icono a la izquierda del texto de un botón utilizaríamos la propiedad android:drawableLeft indicando como valor el descriptor (ID) de la imagen que queremos mostrar, y si fuera necesario podríamos indicar también el espacio entre la imagen y el texto mediante la propiedad android:drawablePadding:

<Button android:id="@+id/btnBotonMasImagen"
        android:text="@string/click"
        android:drawableLeft="@drawable/ic_estrella"
        android:drawablePadding="5dp"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content" />

El botón mostrado en este caso sería similar a éste:

Eventos de un botón

Como podéis imaginar, aunque estos controles pueden lanzar muchos otros eventos, el más común de todos ellos y el que querremos capturar en la mayoría de las ocasiones es el evento onClick, que se lanza cada vez que el usuario pulsa el botón. Para definir la lógica de este evento utilizaremos el método setOnClickListener(). La forma más habitual de hacer esto es la siguiente:

btnBotonSimple = findViewById(R.id.btnBotonSimple)
btnBotonSimple.setOnClickListener {
    lblMensaje.text = "Botón simple pulsado!"
}

En el caso de un botón de tipo ToggleButton o Switch suele ser de utilidad conocer en qué estado ha quedado el botón tras ser pulsado, para lo que implementaremos dicho evento llamando al método setOnCheckedChangeListener(). Este evento recibe dos parámetros, el primero de ellos una referencia al propio botón que se ha pulsado (en este caso no nos interesa y por ello usamos la notación «_«) y el segundo (isChecked) que indica el estado resultante del botón.

En el siguiente ejemplo se comprueba el estado del botón tras ser pulsado y se realizan acciones distintas según el resultado.

btnToggle = findViewById(R.id.btnToggle)
btnToggle.setOnCheckedChangeListener { _, isChecked ->
    if (isChecked) {
         lblMensaje.text = "Botón Toggle: On"
    } else {
         lblMensaje.text = "Botón Toggle: Off"
    }
 }

Personalizar el aspecto un botón (y otros controles)

En las imágenes mostradas durante este apartado hemos visto el aspecto que presentan por defecto los diferentes tipos de botones disponibles. Pero, ¿y si quisiéramos personalizar su aspecto más allá de cambiar un poco el tipo o el color de la letra o el fondo?

Para cambiar la forma de un botón podríamos simplemente asignar una imagen a la propiedad android:background, pero esta solución no nos serviría de mucho porque siempre se mostraría la misma imagen incluso con el botón pulsado, dando poca sensación de elemento “clickable“.

La solución perfecta pasaría por tanto por definir diferentes imágenes de fondo dependiendo del estado del botón. Pues bien, Android nos da total libertad para hacer esto mediante el uso de selectores. Un selector se define mediante un fichero XML localizado en la carpeta /res/drawable, y en él se pueden establecer los diferentes valores de una propiedad determinada de un control dependiendo de su estado.

Por ejemplo, si quisiéramos dar un aspecto diferente a nuestro botón ToggleButton, para que sea de color azul y con esquinas redondeadas, podríamos diseñar las imágenes necesarias para los estados “pulsado” (en el ejemplo toggle_on.9.png) y “no pulsado” (en el ejemplo toggle_off.9.png) y crear un selector como el siguiente:

<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:state_checked="false" android:drawable="@drawable/toggle_off" />
    <item android:state_checked="true" android:drawable="@drawable/toggle_on" />
</selector>

En el código anterior vemos cómo se asigna a cada posible estado del botón una imagen (un elemento drawable) determinada. Así, por ejemplo, para el estado “pulsado” (state_checked="true") se asigna la imagen toggle_on.

Este selector lo guardamos por ejemplo en un fichero llamado toggle_style.xml y lo colocamos como un recurso más en nuestra carpeta de recursos /res/drawable. Hecho esto, tan sólo bastaría hacer referencia a este nuevo recurso que hemos creado en la propiedad android:background del botón:

<ToggleButton android:id="@+id/btnPersonalizado"
        android:textOn="@string/on"
        android:textOff="@string/off"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:background="@drawable/toggle_style" />

En la siguiente imagen vemos el aspecto por defecto de nuestro ToggleButton personalizado con los cambios indicados:

• 

• 

Botones sin borde

Otra forma de personalizar los controles en Android es utilizando estilos. Los estilos merecen un capítulo a parte, pero comentaremos aquí algunos muy utilizados en las últimas versiones de Android, concretamente en el tema que nos ocupa de los botones.

En determinadas ocasiones, como por ejemplo cuando se utilizan botones dentro de otros elementos como listas o tablas, es interesante contar con todas la funcionalidad de un botón pero prescindiendo sus bordes de forma que adquiera un aspecto plano y se integre mejor con el diseño de la interfaz. Para ello, podemos utilizar el estilo borderlessButtonStyle como estilo del botón (propiedad style), de forma que éste se mostrará sin bordes pero conservará otros detalles como el cambio de apariencia al ser pulsado. Veamos cómo se definiría por ejemplo un botón de texto sin borde (por supuesto podríamos hacer lo mismo con un ImageButton):

<Button android:id="@+id/btnSinBorde1"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="@string/click"
        android:textColor="@color/colorPrimary"
        style="?android:attr/borderlessButtonStyle" />

Vemos en el código anterior cómo además del texto hemos definido su color asignando la propiedad android:textColor con el color primario definido para la aplicación (definido en el fichero /app/res/values/colors.xml). En la siguiente imagen vemos cómo quedaría este botón:

Barras de botones (Button Bar)

Otro lugar muy habitual donde encontrar botones sin borde es en las llamadas barras de botones (button bar) que muestran muchas aplicaciones. Para definir una barra de botones, utilizaremos normalmente como contenedor un LinearLayout horizontal e incluiremos dentro de éste los botones (Button) necesarios, asignando a cada elemento su estilo correspondiente, en este caso buttonBarStyle para el contenedor, y buttonBarButtonStyle para los botones. En nuestro ejemplo crearemos una barra con dos botones, Aceptar y Cancelar, que quedaría así:

<LinearLayout
        android:id="@+id/barraBotones"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_alignParentBottom="true"
        style="?android:attr/buttonBarStyle">

        <Button android:id="@+id/btnAceptar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/Aceptar"
            style="?android:attr/buttonBarButtonStyle" />

        <Button android:id="@+id/btnCancelar"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_weight="1"
            android:text="@string/Cancelar"
            style="?android:attr/buttonBarButtonStyle" />

    </LinearLayout>

Visualmente el resultado sería el siguiente:

Para terminar, en la imagen siguiente se muestra la aplicación de ejemplo completa, donde se puede comprobar el aspecto de cada uno de los tipos de botón comentados:

CÓDIGO DEL ARTÍCULO: Puedes consultar y/o descargar el código completo de los ejemplos desarrollados en este artículo accediendo a la pagina del curso en GitHub.