Botones

Un botón comunica una acción que ocurrirá cuando un usuario lo toque.

Los botones son componentes estándar del Proyecto de código abierto de Android (AOSP). Pueden estar rellenados con un color de fondo sólido o sin rellenar (con un fondo transparente). Los botones rellenos indican una acción principal o preferida. Los botones pueden aparecer de forma independiente o en grupos, a diferencia de las pestañas, que siempre aparecen en grupos.


Anatomía

Anatomía de los botones
1. Contenedor del botón sin completar
2. Contenedor del botón con relleno, que indica la acción principal o preferida
3. Etiqueta del botón

Especificaciones

Longitud mínima y máxima del botón

La longitud máxima de la etiqueta del botón es de 20 caracteres. El ancho mínimo del botón es de 156 dp.
La longitud máxima de la etiqueta del botón es de 20 caracteres. El ancho mínimo del botón es de 156 dp.

Botón con ícono frente a botón predeterminado

Los botones pueden incluir íconos. Cuando se incluyen, los íconos suelen aparecer a la izquierda del texto del botón.
Los botones pueden incluir íconos. Cuando se incluyen, los íconos suelen aparecer a la izquierda del texto del botón.

Los botones pueden aparecer como elementos en otros componentes, como la barra de la app o los diálogos.

Posición del botón en la barra de la aplicación

Los botones se ubican en el lado derecho de la barra de la aplicación.
Los botones se colocan en el lado derecho de la barra de la app

Botón en el diálogo

Los botones de los diálogos suelen estar ubicados en la parte inferior izquierda.
Por lo general, los botones de los diálogos se encuentran en la parte inferior izquierda de los diálogos.

Botón hero

Los bordes redondeados del botón hero enfatizan su importancia.
Los bordes redondeados de un botón hero enfatizan su importancia

Personalización

Para reflejar su marca, los OEMs pueden modificar la apariencia visual de un botón, por ejemplo:

  • Cómo especificar un color de resalte
  • Cómo proporcionar íconos personalizados
  • Cómo agregar fuentes personalizadas
  • Cambiar la apariencia de los botones activos, inactivos o inhabilitados
  • Cómo configurar las dimensiones, la forma de las esquinas y las posiciones de los botones
  • Usar el movimiento para proporcionar comentarios a los usuarios

La Guía de integración de la biblioteca de IU del vehículo proporciona orientación de los OEM para personalizar componentes.

El sistema de diseño proporciona orientación específica para usar el diseño, el color, la tipografía, el tamaño, la forma y el movimiento para personalizar los componentes.


Ejemplos

botones sin completar y rellenos
Botones sin completar y rellenos, en los que el botón relleno indica la acción principal
botón relleno inhabilitado
El color y la opacidad de este botón relleno indican un estado inhabilitado
Diálogo de botón sin completar
Los botones sin completar de un diálogo indican acciones con la misma ponderación
duración del movimiento de ondas del botón
Estos movimientos de ondas tienen una duración de 330 ms. Se usan para confirmar el contacto del usuario con un botón.
Animación de ondas de botones
Estos movimientos de ondas inicialmente superponen el 60% de la superficie del botón. Se expanden para que no los presione el usuario y se detengan a 10 dp del borde del botón.