Cómo crear un botón en Android Studio

En estos días os estuvimos explicando cómo crear un layout y cómo añadir elementos a un layout, por lo que es el momento de dar el salto a los botones (Button) por si queremos hacer aplicaciones para Android sencillas como implementar una calculadora o simplemente, un botón que nos lleve a otro layout.

Cómo crear un botón en Android Studio

Pues bien, una vez situados en el layout, haremos clic en “Button” y lo arrastraremos hacia nuestro layout.

Button

 Tras arrastrarlo, nos aparecerá en nuestro layout como bien contemplamos en la imagen anterior. Pero será a la derecha en propiedades dónde le daremos estilo, por si queremos cambiarle el color fondo u otros atributos.

Cambiando el nombre del botón y el id

Si hacemos doble clic en el botón, nos saldrán las opciones de texto e id. Ahora nuestro botón se llama “AndroidStudioFAQs” y el id es “button1”, el id es muy importante, puesto que lo llamaremos más adelante desde la actividad para darle comportamiento.

Cambiando el color

Para cambiar el color, basta con situarnos encima del botón y echar un vistazo entre las propiedades, dónde encontraremos la opción de “Background”, podemos añadir una imagen que añadiremos dentro de la carpeta de Drawable o bien, seleccionar un color del sistema, como por ejemplo verde:

Imagen en botón

Para añadir una imagen a un botón, primero debemos introducirla en la carpeta de Drawable, en formato .png y sin caracteres raros en su nombre, o nos dará error.

 
Como podemos ver en la anterior imagen, piruleta.png ya se encuentra en nuestro proyecto tras añadirla a la carpeta, por lo que ahora solo queda añadirla al layout para que sustituya a nuestro feo botón:

Para eliminar el anterior texto de AndroidStudioFAQs del botón, basta con hacer clic encima y dejar el campo de texto vacío.

Resultado en Text (1)

 Como podéis ver, no es demasiado código para añadir un texto y una imagen a nuestro layout. Realmente es muy sencillo.

Es una manera rápida y sencilla de personalizar botones para darle un fondo bonito y eliminar ese grisáceo predeterminado. Si queremos un botón más realista, podemos buscar uno de 50×50 aproximadamente y añadirlo al background, por ejemplo:

Botón add

Dos botones

Para añadir dos botones, haremos lo mismo que hacíamos hasta ahora, arrastrar primero un button y luego otro hacia nuestro layout.

Resultado Text (2)

Y esto ha sido todo para esta parte del botón. En el siguiente artículo de botones hablaremos cómo darles comportamiento, para que al hacer clic en un botón ocurra algo, como que por ejemplo se abra un nuevo layout.

Espero que os haya gustado el post y cualquier duda o sugerencia, en los comentarios. ¡Gracias por leernos!