Crea un botón

Los botones permiten que el usuario active una acción definida. Existen cinco tipos de botones:

Tipo

Aspecto

Propósito

Relleno

Fondo sólido con texto en contraste

Para acciones principales, como "Enviar" y "Guardar". El efecto de sombra enfatiza la importancia del botón.

Tonal

El color de fondo varía para que coincida con la superficie.

Para acciones principales o significativas. Los botones rellenos proporcionan peso visual y son adecuados para acciones como "Agregar al carrito" y "Acceder".

Alta

La sombra hace que se destaque.

Para acciones principales o significativas. Aumenta la elevación para que el botón sea más prominente.

Delineado

Tiene un borde sin relleno.

Para acciones que son importantes, pero no principales. Los botones con contorno se combinan bien con otros botones para indicar acciones secundarias alternativas, como "Cancelar" o "Atrás".

Texto

Texto sin fondo ni borde

Para acciones menos importantes, como vínculos de navegación o acciones secundarias, como "Más información" o "Ver detalles".

Compatibilidad de versiones

Esta implementación requiere que el minSDK de tu proyecto se establezca en el nivel de API 21 o superior.

Dependencias

Crea un botón relleno

El componente de botón relleno usa el elemento componible básico Button. De forma predeterminada, se completa con un color sólido.

Resultados

Un botón relleno con un fondo morado que dice "lleno".
Figura 1: Un botón relleno.

Crea un botón tonal relleno

El componente de botón tonal relleno usa el elemento componible FilledTonalButton. De forma predeterminada, se completa con un color tonal.

Resultados

Un botón tonal con un fondo púrpura claro que dice "lleno".
Figura 2: Un botón tonal.

Crea un botón con un contorno

El componente de botón con contorno usa el elemento componible OutlinedButton. Aparece con un esquema de forma predeterminada.

Resultados

Un botón transparente con un contorno oscuro que dice "Outlined".
Figura 3: Un botón con contorno.

Cómo crear un botón elevado

El componente de botón elevado usa el elemento componible ElevatedButton. Tiene una sombra que representa el efecto de elevación de forma predeterminada y aparece como un botón con un contorno y una sombra.

Resultados

Un botón elevado con un fondo gris que dice "Elevado".
Figura 4: Un botón elevado.

Crea un botón de texto

El componente de botón de texto usa el elemento componible TextButton. Hasta que se hace clic en él, solo aparece como texto. No tiene un relleno ni un contorno sólidos de forma predeterminada.

Resultados

Un botón de texto que dice "Text Button"
Figura 5: Un botón de texto.

Puntos clave

  • onClick: Es la función a la que se llama cuando el usuario presiona el botón.
  • enabled: Cuando es falso, este parámetro hace que el botón aparezca como no disponible e inactivo.
  • colors: Es una instancia de ButtonColors que determina los colores que se usan en el botón.
  • contentPadding: Es el padding dentro del botón.

Colecciones que contienen esta guía

Esta guía forma parte de estas colecciones de guías rápidas seleccionadas que abarcan objetivos más amplios de desarrollo de Android:

Descubre cómo las funciones de componibilidad pueden ayudarte a crear fácilmente componentes de IU atractivos basados en el sistema de diseño de Material Design.

Tienes preguntas o comentarios

Ve a nuestra página de preguntas frecuentes para obtener información sobre las guías rápidas o comunícate con nosotros para contarnos tu opinión.