En este tutorial se explican 3 principales tipos de botones en Android Studio. El botón con icono y texto, el botón de solo imagen y el botón de solo texto.
Los botones son parte esencial de nuestra aplicación. En Android podemos encontrar 3 tipos principales de botones. Pero además podemos personalizar un botón a nuestro antojo, creando un archivo XML donde le damos los parámetros se colores, si se ve la línea, la forma, etc.
En este tutorial nos enfocaremos a los 3 botones básicos que son: Botón que contiene solo texto, botón en forma de imagen o icono y botón con icono a un lado del texto.
¿Cómo crear un botón con icono y texto en Android Studio?
- Primero escribimos el código de un botón normal. Con alto y ancho = “wrap_content”. Y el texto del botón.
- En seguida nos aseguramos de tener en la carpeta de drawable el icono que usaremos, en nuestro caso se llama icono.png.
- Después, en nuestro caso queremos que el icono esté a la izquierda y el texto a la derecha. Así que usamos el comando: android: drawableLeft =”@drawable/icono”
- Con esto ya tienes un botón con icono y texto.
Botón básico (Button) solo texto.
El código más sencillo para un botó, es el que mostramos en seguida. Cabe mencionar que un botón tiene varios parámetros en los cuales podemos personalizarlo y hacerlo muy diferente a como es normalmente.
El código básico de un botón en XML es:
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calcular"
/>
Solo tenemos 3 parámetros, los primeros dos son la altura y anchura del botón, los cuales en este caso se ajustan al contenido del botón.
Y el texto que llevará el botón, el cual se recomienda agregarlo desde los recursos String.
A este botón se le pueden agregar varios parámetros para personalizarlo, claro que el código del botón será más complejo. Pero quedará bastante mejor.
Botón de solo imagen (Image Button).
Es otro tipo de botón, el cual básicamente consta de un botón que tiene un icono o una imagen de fondo, sin ningún texto.
El código base para este botón es:
<ImageButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:src="@drawable/icono"
/>
Solo le damos los 3 parámetros básicos que son la altura, lo ancho y la imagen que tendrá de fondo.
En este caso en la carpeta drawable debemos tener una imagen con el nombre button_icon.png
Botón con icono a un lado del texto.
El otro tipo de botón que vamos a mencionar, es un botón que contiene un icono y a un lado el texto.
Para hacer esto necesitamos escribir el código de un botón normal y le agregamos el comando:
android:drawableLeft=”@drawable/button_icon”
Con el comando anterior, estamos diciendo que agregaremos un icono desde la carpeta drawable llamado button_icon.png. Este icono se localizará a la izquierda por lo tanto el texto estará a la derecha.
Si queremos el icono al lado derecho usamos:
android:drawableRight=”@drawable/button_icon”
El código complete para tener un icono y texto en un botón queda así.
<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:text="Calcular" android:drawableLeft="@drawable/icono"
/>
Para más tutoriales de Android Studio ve la sección de Android Studio.
Puedes ver la documentación de Android Studio para más información.