Botones de ícono en Jetpack Compose Glimmer

Dispositivos de realidad extendida correspondientes
Esta guía te ayuda a crear experiencias para estos tipos de dispositivos de realidad extendida.
Más información sobre los tipos de dispositivos de realidad extendida →
Display Glasses
Más información sobre los tipos de dispositivos de realidad extendida →

En Jetpack Compose Glimmer, un IconButton es un componente compacto e interactivo que se usa para exponer acciones complementarias con un solo toque.

Los botones de ícono parecen más pequeños que los botones estándar, pero mantienen un límite físico para garantizar la facilidad de interacción en los anteojos de visualización.

Para otros casos de uso, también hay botones estándar y botones de activación.

Un ejemplo de algunos estilos diferentes de botones de ícono en Jetpack Compose Glimmer. En estos ejemplos, se muestran cinco estados de botones de ícono: habilitado (1), enfocado (2), presionado (3), inhabilitado (4), inhabilitado y enfocado (5).

Tamaños y dimensiones

Elemento Dimensión

Tamaño mínimo del contenedor

48 x 48 dp

Tamaño interno del ícono

32 x 32 dp

Padding de contenido predeterminado

GlimmerTheme.componentSpacingValues.small

Estados

Los botones de ícono en Jetpack Compose Glimmer cambian su apariencia para comunicar su estado.

  • Habilitado: Es el estado interactivo predeterminado.
  • Enfocado: Aplica GlimmerTheme.depthEffectLevels.level1 y un resaltado de borde enfocado.
  • Presionado: Aplica una superposición blanca semitransparente a la superficie.
  • Inhabilitado: El botón no es interactivo y se quita la respuesta visual.

Valores predeterminados de los botones de ícono

Los siguientes valores predeterminados se aplican a los botones de ícono:

  • Forma: El valor predeterminado es GlimmerTheme.shapes.large (por lo general, circular).
  • Color: El valor predeterminado es GlimmerTheme.colors.surface.
  • Color de contenido: Se calcula automáticamente a partir del color de fondo, a menos que se proporcione de forma explícita.
  • Padding de contenido: Proporciona el espaciado predeterminado entre el ícono y el borde del contenedor.
  • Tamaño mínimo: Un valor fijo de 48.dp para evitar que los botones se vuelvan demasiado pequeños para interactuar con ellos.
  • Tamaño del ícono: El valor predeterminado es GlimmerTheme.iconSizes.small (32.dp).

Ejemplo: Botón de ícono

Con el siguiente código, se crea un botón de ícono con características predeterminadas:

@Composable
fun IconButtonSample() {
    IconButton(onClick = {}) { Icon(FavoriteIcon, "Localized description") }
}