Botón personalizado

En esta sección, creará un botón con una imagen personalizada en lugar de texto con el widget Button y un archivo XML que define tres imágenes diferentes que se usarán para los distintos estados del botón. Cuando se presione el botón, se mostrará un mensaje corto.

Haga clic con el botón derecho, descargue las tres imágenes siguientes y cópielas en el directorio Resources/drawable del proyecto. Se usarán para los distintos estados del botón.

Cree un nuevo archivo en el directorio Resources/drawable denominado android_button.xml. Inserte el siguiente XML:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/android_pressed"
          android:state_pressed="true" />
    <item android:drawable="@drawable/android_focused"
          android:state_focused="true" />
    <item android:drawable="@drawable/android_normal" />
</selector>

Esto define un único recurso Drawable, que cambiará su imagen en función del estado actual del botón. El primer elemento <item> define android_pressed.png como la imagen cuando se presiona el botón (se activa). El segundo elemento <item> define android_focused.png como la imagen cuando se centra el botón (cuando el botón se resalta con la bola de seguimiento o el panel direccional). El tercer elemento <item> define android_normal.png como imagen para el estado normal (cuando no se presiona ni se centra). Este archivo XML representa ahora un único recurso Drawable y, cuando un elemento Button hace referencia a él por su fondo, la imagen mostrada cambiará en función de estos tres estados.

Nota:

El orden de los elementos <item> es importante. Cuando se hace referencia a este recurso Drawable, los elementos <item> se recorren para determinar cuál es adecuado para el estado actual del botón. Dado que la imagen "normal" es la última, solo se aplica cuando las condiciones android:state_pressed y android:state_focused han recibido la evaluación false.

Abra el archivo Resources/layout/Main.axml y agregue el elemento Button:

<Button
        android:id="@+id/button"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:padding="10dp"
        android:background="@drawable/android_button" />

El atributo android:background especifica el recurso Drawable que se va a usar para el fondo del botón (que, cuando se guarda en Resources/drawable/android.xml, se hace referencia a él como @drawable/android). Esto reemplaza a la imagen de fondo normal que se usa para los botones del sistema. Para que el recurso Drawable cambie su imagen en función del estado del botón, la imagen debe aplicarse al fondo.

Para que el botón haga algo cuando se presione, agregue el código siguiente al final del Método OnCreate():

Button button = FindViewById<Button>(Resource.Id.button);

button.Click += (o, e) => {
    Toast.MakeText (this, "Beep Boop", ToastLength.Short).Show ();
};

Esto captura el elemento Button del diseño y, a continuación, agrega un mensaje de Toast que se muestra cuando se hace clic en el elemento Button.

Ahora ejecute la aplicación.

Las partes de esta página son modificaciones basadas en el trabajo creado y compartido por el proyecto de código abierto de Android y se usan según los términos descritos en la licencia de atribución de Creative Commons 2.5.