epelpad

Tutorial de botones en Android Studio

En este tutorial veremos cómo usar botones en Android con el fin de que los usuarios de tu app puedan interactuar con el contenido.

Primero estudiarás la clase Button que es la encargada de representar botones en la UI. Luego verás cómo añadir eventos de click. También cómo se clasifican según el Material Design, cómo crearlos en Android Studio y por último a personalizar su estilo.

1. Implementar Un Botón En Android

Crear Proyecto en Android Studio
Antes que nada abre Android Studio, ve al menú de herramientas y selecciona File > New > New Project… para crear un nuevo proyecto.

Tutorial de botones en Android Studio

En la configuración del proyecto ten en cuenta los siguientes parámetros:

Application Name: usa el nombre “Botones”.
Company Domain Name: Para el dominio elige la entidad que represente tu creación, puede ser tu_nombre.com, el nombre_de_tu_empresa.com o simplemente test.com.
Projection Location: En la ubicación selecciona la carpeta que tengas destinada para guardar tus proyectos. Recuerda no usar espacios en ni caracteres especiales con acentos.
Ahora en los factores de forma deja por defecto el SDK mínimo de ejecución en la versión 11 de Android.

studio

En la siguiente venta elige una actividad vacía (Empty Activity) cómo contenedor principal para los ejemplos que veremos:

tutorial

Finalmente cambia el título del archivo java para la actividad por ActividadBotones.java al igual que su layout (actividad_botones.xml). Al presionar Finish tendrás un proyecto de prueba el cual te servirá para seguir todo el tutorial.

Android

La Clase Button
Un botón es un control con texto o imagen que realiza una acción cuando el usuario lo presiona. La clase Java que lo represente es Button y puedes referirte a él dentro de un layout con la etiqueta <Button> respectivamente.

de Botones

Para agregar un botón a la actividad principal de tu app dirígete a actividad_botones.xml y agrega la siguiente definición.


<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.herprogramacion.botones.ActividadBotones">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="AGREGAR" />
</RelativeLayout>


Con ello centramos el botón en el relative layout.

El texto que especifica su acción especifícalo en el atributo android:text. En el ejemplo anterior se usó la palabra "AGREGAR".

Este código debería mostrar en la ventana Preview la siguiente imagen:

android studio

Atributos de un Botón
Si quieres cambiar las propiedades de un botón recurre a los atributos que la documentación presenta en formato Java o XML.

Debido a que Button extiende de TextView, puedes usar todos los atributos de esta clase.



Controles: Tutorial De Botones En Android James Revelo febrero 25, 2016
En este tutorial veremos cómo usar botones en Android con el fin de que los usuarios de tu app puedan interactuar con el contenido.

Primero estudiarás la clase Button que es la encargada de representar botones en la UI. Luego verás cómo añadir eventos de click. También cómo se clasifican según el Material Design, cómo crearlos en Android Studio y por último a personalizar su estilo.

1. Implementar Un Botón En Android

Crear Proyecto en Android Studio
Antes que nada abre Android Studio, ve al menú de herramientas y selecciona File > New > New Project… para crear un nuevo proyecto.

Crear nuevo proyecto en Android Studio

En la configuración del proyecto ten en cuenta los siguientes parámetros:

Application Name: usa el nombre “Botones”.
Company Domain Name: Para el dominio elige la entidad que represente tu creación, puede ser tu_nombre.com, el nombre_de_tu_empresa.com o simplemente test.com.
Projection Location: En la ubicación selecciona la carpeta que tengas destinada para guardar tus proyectos. Recuerda no usar espacios en ni caracteres especiales con acentos.
Ahora en los factores de forma deja por defecto el SDK mínimo de ejecución en la versión 11 de Android.

Seleccionar factor de forma mínimo para ejecución de app Android

En la siguiente venta elige una actividad vacía (Empty Activity) cómo contenedor principal para los ejemplos que veremos:

Añadir actividad vacía en Android Studio

Finalmente cambia el título del archivo java para la actividad por ActividadBotones.java al igual que su layout (actividad_botones.xml). Al presionar Finish tendrás un proyecto de prueba el cual te servirá para seguir todo el tutorial.

Personalizar actividad vacía en Android Studio

La Clase Button
Un botón es un control con texto o imagen que realiza una acción cuando el usuario lo presiona. La clase Java que lo represente es Button y puedes referirte a él dentro de un layout con la etiqueta <Button> respectivamente.

Ejemplo de button en Android

Para agregar un botón a la actividad principal de tu app dirígete a actividad_botones.xml y agrega la siguiente definición.

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.herprogramacion.botones.ActividadBotones">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="AGREGAR" />
</RelativeLayout>


Con ello centramos el botón en el relative layout.

El texto que especifica su acción especifícalo en el atributo android:text. En el ejemplo anterior se usó la palabra "AGREGAR".

Este código debería mostrar en la ventana Preview la siguiente imagen:

Ventana Preview en Android Studio

Atributos de un Botón
Si quieres cambiar las propiedades de un botón recurre a los atributos que la documentación presenta en formato Java o XML.

Debido a que Button extiende de TextView, puedes usar todos los atributos de esta clase.

Algunos de los más utilizados son:

AtributoDescripción
android:textPermite cambiar el texto de un botón
android:backgroundSe usa para cambiar el fondo del botón. Puedes usar un recurso del archivo colors.xml o un drawable.
android:enabledDeterminar si el botón está habilitado ante los eventos del usuario. Usa true (valor por defecto) para habilitarlo y false en caso contrario.
android:gravityAsigna una posición al texto con respecto a los ejes x o y dependiendo de la orientación deseada.
Por ejemplo: Si usas top, el texto se alineará hacia el borde superior.

android:idRepresenta al identificador del botón para diferenciar su existencia de otros views.
android:onClickAlmacena la referencia de un método que se ejecutará al momento de presionar el botón.
android:textColorDetermina el color del texto en el botón
android:drawable*Determina un drawable que será dibujado en la orientación establecida.
Por ejemplo: Si usas el atributo android:drawableBottom, el drawable será dibujado debajo del texto.

Teniendo en cuenta la anterior tabla te invito a ver los resultados que producen usar algunos de esos atributos.

Cambiar texto de un botón
Asigna una cadena directamente al atributo android:text para indicar la acción del botón.

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
android:text="Agregar" />



Por defecto el texto del botón estará en mayúsculas, pero si quieres deshabilitar esta característica usa el valor false en el atributo android:textAllCaps.


<Button
...
android:textAllCaps="false"/>



Ahora, si deseas cambiar el texto programáticamente usa el método setText().

Para ello abre ActividadBotones.java. Obtén la instancia del botón con findViewById() y luego invoca setText() con una secuencia de caracteres como parámetro.



public class ActividadBotones extends AppCompatActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.actividad_botones);

Button boton = (Button) findViewById(R.id.button);
boton.setText("Ordenar"botones en android studios;
}
}

Esto produce el siguiente resultado:

imagenes a botones

Ahora también es posible asignar un recurso string al texto del botón desde XML y Java.

En caso de XML usa la notación de recurso @string o @android:string (strings del sistema) de la siguiente forma:

<Button
...
android:text="@string/texto_agregar"/>



En Java solo usa el operador punto para llegar al identificador perteneciente a la clase R:

Button boton = (Button) findViewById(R.id.button);
boton.setText(R.string.texto_agregar);



Cambiar Color de Fondo
Modificar el fondo de un botón implica el cambio del atributo android:background por un recurso de color o drawable.

Ejemplo:

Usar el color primario del proyecto como color de background de un botón

Solución:

Invoca la referencia @color/colorPrimary de tu archivo values/colors.xml:

<Button
...
android:background="@color/colorPrimary"/>



El resultado es:

Tutorial de botones en Android Studio

Sin embargo, hacer esto hace perder la reacción de superficie que se tenía antes por el Material Design.

La forma redondeada tampoco se hace presente.

Solo queda la elevación al momento de tocar el botón.

Para conservar el efecto y cambiar el color del botón usa el atributo app:backgrountTint de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto"
xmlns:tools="http://schemas.android.com/tools"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.herprogramacion.botones.ActividadBotones">

<Button
android:id="@+id/button"
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:layout_centerHorizontal="true"
android:layout_centerVertical="true"
app:backgroundTint="@color/colorPrimary"
android:text="@string/texto_agregar" />
</RelativeLayout>


Así tendrías:


studio


Botón con Texto e Imagen
En la sección de atributos viste que existen atributos con la forma android:drawable* para alinear una imagen al texto de un botón.

Para demostrar su uso veamos el siguiente ejemplo sencillo.

Alinear a la izquierda del botón ordenar un icono asociado a pizzas.

Solución

Abre el layout actividad_botones.xml y agrega un botón centrado en el padre. Cambia el color de texto a blanco (@android:color/white), usa un tinte de color rojo (#ef9a9a) y alinea a la izquierda el siguiente drawable de pizza:

tutorial

Tu código debería quedar de la siguiente forma:

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:tools="http://schemas.android.com/tools"
xmlns:app="http://schemas.android.com/apk/res-auto"
android:layout_width="match_parent"
android:layout_height="match_parent"
android:paddingBottom="@dimen/activity_vertical_margin"
android:paddingLeft="@dimen/activity_horizontal_margin"
android:paddingRight="@dimen/activity_horizontal_margin"
android:paddingTop="@dimen/activity_vertical_margin"
tools:context="com.herprogramacion.botones.ActividadBotones">


<Button
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:drawableLeft="@drawable/ic_pizza"
android:drawablePadding="8dp"
android:id="@+id/boton"
android:textColor="@android:color/white"
app:backgroundTint="#ef9a9a"
android:text="Ordenar"
android:layout_centerVertical="true"
android:layout_centerHorizontal="true" />
</RelativeLayout>


Y el resultado sería:


Android

5 comentarios - Tutorial de botones en Android Studio

GoNxII +3
No leí nada pero buen post
22matutex22 +1
Excelente a mi me sirve bastante saludos
lalala123456 +2
Es una verga esto, con razon esquivo a full las paginas en español con cosas de android...
MAGUBOSCO +1
tanto quilombo para agregar un botón? , igual van +3 por el esfuerzo
MAGUBOSCO +1
@ange1andres great!
ange1andres +2
igual es un copy paste de otra pagina, aca no hay ningun tutorial sobre android studio y cualquiera que quiera hacer una app para android le puede servir el post
MAGUBOSCO +1
@ange1andres está perfecto , si! veo la fuente