Last Updated: 2021-31-05

Interfaces gráficas en Android

La interfaz de usuario de una aplicación es todo aquello que el usuario puede ver y con lo que puede interactuar en ella. Para diseñar interfaces gráficas de aplicaciones móviles, se requieren distintos tipos de vistas que brinden una experiencia agradable y familiar al usuario. Además de las vistas, es necesario definir un flujo de aplicación que maximice la usabilidad y la facilidad de interacción con el usuario.

No obstante, el estilo y el diseño son factores que tienen un impacto directo en la experiencia del usuario, ya que pueden hacer que la aplicación sea más personalizada y agradable para la interacción. Por este motivo, también es importante hablar de ellos al momento de diseñar una interfaz gráfica.

¿Qué construirá?

Al final de este tutorial usted tendrá:

• Una versión de la aplicación que representa un diccionario, con un tema de colores y estilo.

¿Qué aprenderá?

Al desarrollar este tutorial aprenderá:

• Cómo modificar el estilo de una aplicación por medio de temas.

¿Qué necesita?

• Haber completado la primera parte del tutorial "Cómo crear aplicaciones con múltiples vistas haciendo uso de actividades", y la segunda parte del tutorial "Cómo crear aplicaciones con múltiples vistas haciendo uso de fragmentos".
• JDK 8 actualizado e instalado en la máquina y variables de entorno de Java configuradas.
• Android Studio instalado y actualizado.
• SDK de Android instalado y actualizado (típicamente se instala de la mano con Android Studio).
• Un dispositivo físico con sistema operativo Android o un emulador de un dispositivo virtual con sistema operativo Android.
• (OPCIONAL) El sistema manejador de versiones Git instalado en su máquina.

Estilos de la aplicación

Además de las estructuras que permiten controlar la funcionalidad de la interfaz de usuario, existen elementos que permiten controlar los detalles de diseño de una aplicación. Estos funcionan de forma análoga a las hojas de estilo en cascada de una aplicación web y se manejan en el archivo styles.xml del directorio res/values.

En Android existen los estilos y los temas. Un estilo es una colección de atributos que especifican la apariencia de una vista. Un tema es una colección de atributos que se aplican a toda una app, actividad o jerarquía de vistas, no solo a una vista individual.

Un estilo se puede definir de la siguiente forma en el archivo styles.xml:

<resources>
    <style name="GreenText" parent="TextAppearance.AppCompat">
        <item name="android:textColor">#00FF00</item>
    </style>
</resources>

De forma similar, un tema se define de la siguiente forma:

<style name="AppTheme" parent="Theme.AppCompat.Light.DarkActionBar">
    <!-- Customize your theme here. -->
    <item name="colorPrimary">@color/colorPrimary</item>
    <item name="colorPrimaryDark">@color/colorPrimaryDark</item>
    <item name="colorAccent">@color/colorAccent</item>
</style>

Luego de haber completado los aspectos funcionales de la aplicación, usted explorará los aspectos visuales del diseño de la interfaz de usuario. Para esto, el siguiente paso es configurar algunos aspectos mínimos del estilo de la aplicación, de forma que pueda comprender el funcionamiento de los atributos de estilo.

Explore los temas y estilos existentes

Dentro del proyecto que usted descargó, ya existen configuraciones de interfaz gráfica en los archivos de recursos styles.xml y themes.xml en el directorio res/values. Abra el archivo styles.xml y encontrará un XML que contiene un tag para los recursos, el cual contiene un style que define los atributos estilísticos del texto donde se muestra el título del fragmento en la barra del menú superior en el item de nombre .

Ahora, abra el directorio themes, y note que existe un archivo normal y uno que indica que pertenece al tema nocturno. Explore el contenido de ambos archivos y note que en ambos casos, existe un tag resources que contiene los styles, los cuales a su vez permiten definir múltiples items, a partir de los cuales se definen los colores del tema.

Si su dispositivo Android cuenta con un botón para acceder al modo oscuro, actívelo para conocer el estilo oscuro de su aplicación. Note que este proceso se realiza por cuenta del sistema operativo, y que la aplicación se adapta automáticamente a los colores definidos en el archivo themes.xml(night).

Modifique una configuración global por medio del tema

Como puede notar, las propiedades modificadas en un tema afectan a la globalidad de la aplicación. Debe cambiar el valor del item colorPrimary. Para ello, agregue al archivo colors.xml un color con la siguiente etiqueta y el valor hexadecimal que prefiera (en este ejemplo, se escogió el púrpura): <color name="purple">#6A0DAD</color>

Luego, referencie este color en el valor del item como @color/purple

Además de esto, agregue la siguiente etiqueta, que modifica el tipo de fuente utilizado en los textos de toda la aplicación:

<item name="android:fontFamily">sans-serif-black</item>

Una vez vuelva a ejecutar la aplicación con los cambios, la pantalla se verá de la siguiente forma:

Modifique un elemento particular por medio de un estilo

Un hecho que, quizás pudo pasar por alto es que el texto del título, donde se indica en qué fragmento está, no cambió el estilo de su fuente. Recuerde que durante su exploración de los archivos, encontró un estilo ya existente para el texto del menú de la barra de navegación. Como este estilo afecta a dicho componente, el cambio de fuente en el tema no se vio representado.

Agregue a este estilo ya existente, la misma etiqueta que utilizó para su tema: <item name="android:fontFamily">sans-serif-black</item>

¡Felicidades!

Al finalizar este tutorial, usted pudo conocer el concepto de Estilos y Temas.

Ahora podrá crear sus propios estilos y temas para modificar el aspecto visual de sus aplicaciones de Android, aplicando propiedades comunes para diferentes elementos de la interfaz.

Créditos

Versión 1.1 - Mayo 31, 2021