Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Code
  2. Android SDK

Construye una aplicación móvil sencilla con Material Design: crea una pantalla de inicio de sesión

by
Read Time:5 minsLanguages:

Spanish (Español) translation by Ana Paulina Figueroa Vazquez (you can also view the original English article)

Material Design es un sistema de diseño que ayuda a los equipos a crear experiencias digitales de alta calidad. Reúne estilo, interacción y movimiento para crear jerarquía, significado y continuidad en toda la aplicación.

Material Design viene con componentes de Material para Android, que son necesarios para garantizar que los desarrolladores generen hermosos diseños. En este tutorial obtendrás una descripción general de varios de estos componentes de Android y crearás una página de inicio de sesión usando Material Design.

La página de inicio de sesión contendrá los siguientes componentes:

  • El logotipo de la aplicación
  • Los campos de texto de nombre de usuario y contraseña
  • Un botón para iniciar sesión
  • Un enlace para restablecer la contraseña

Requisitos previos

  • Conocimientos básicos sobre el desarrollo en Android
  • Android Studio (obtén más información aquí si aún no lo tienes)
  • Un emulador de Android o un dispositivo físico

Comienzo

Para crear un nuevo proyecto en Android Studio, selecciona la Actividad vacía y haz clic en Siguiente. Escribe un nombre, elige una ubicación y selecciona un nivel de API. Haz clic en Finalizar para crear el proyecto.

Agrega las dependencias del proyecto

Navega al archivo build.gradle del módulo de la aplicación y agrega la Biblioteca de soporte MDC de Android, como se muestra a continuación. Luego sincroniza el proyecto.

El diseño de la actividad principal

Ahora editaremos el diseño de la actividad principal, main_activity.xml. La actividad principal contiene un ConstraintLayout simple que actúa como contenedor para el componente TextView.

ConstraintLayout proporciona una interfaz con la funcionalidad de arrastrar y soltar que te permite colocar un widget determinado en relación con otro. Puedes restringir un widget en el eje horizontal y en el vertical.

Tema y colores de AppCompat

De forma predeterminada, el tema de nuestra aplicación está configurado como Theme.MaterialComponents.DayNight.DarkActionBar. Cambiémoslo a Theme.Appcompact.Light.DarkActionBar. El archivo theme.xml también define otros colores, como se muestra a continuación.

El sistema de color nos permite cambiar rápidamente el esquema de colores de toda la aplicación.

  • colorPrimary y colorSecondary son los colores de tu marca. colorSecondary proporciona más formas de acentuar partes seleccionadas de tu interfaz de usuario.
  • colorPrimaryVariant y colorSecondaryVariant son tonos más claros o más oscuros de colorPrimary y colorSecondary.
  • colorOnPrimary se usa para darle un tinte a los elementos mostrados encima de los colores primarios, como el texto y los iconos.
  • colorOnSecondary se usa para darle un tinte a los elementos mostrados encima de los colores secundarios, como el texto y los iconos.
  • colorBackground es el color de fondo de tu aplicación.

El sistema de color de Material Design tiene como objetivo crear armonía en las aplicaciones. Los estándares de Google describen cómo crear una paleta de colores destinada a mejorar la experiencia del usuario. El siguiente diagrama muestra un ejemplo de una paleta de colores que se puede utilizar con Material Design.

Material design color paletteMaterial design color paletteMaterial design color palette

Cómo usar la paleta de colores de Material Design

Al elegir los colores para tu aplicación, es recomendable limitarlos a tres tonos primarios y un color secundario. El color primario es el color que aparece con mayor frecuencia en las pantallas y los componentes de tu aplicación. Un color secundario es opcional y brinda contraste a tu aplicación. También puedes usar un color primario para proporcionar contraste. El color secundario debería ser usado para acciones específicas como las siguientes:

  • Campos de texto y cursores
  • Botones flotantes
  • Selección de texto
  • Barras de progreso
  • Controles de selección, botones y controles deslizantes
  • Enlaces

La interfaz de usuario a continuación muestra una representación del uso correcto del color en Material Design.

material designmaterial designmaterial design

Componentes de Material Design

Como se mencionó anteriormente en el tutorial, las aplicaciones hechas con Material Design usan componentes de este último. Entre algunos de estos componentes se encuentran los siguientes:

  • Menús y barra de herramientas de Android
  • Botones de acción flotantes (BAF), snackbars y CoordinatorLayout
  • Etiquetas flotantes
  • AppBar
  • Barra de herramientas colapsante
  • Cajón y menús de navegación
  • Animaciones de Android
  • RecyclerView y CardView

Comencemos agregando el logotipo usando el componente ImageView de Material Design. Elimina el TextView y agrega lo siguiente a main_activity.xml.

A continuación, agrega los campos de texto de nombre de usuario y contraseña. Usaremos el componente de campo de texto de Material Design, que incluye una función integrada que muestra una etiqueta flotante y mensajes de error.

El atributo android:inputType="textPassword" oculta el texto de entrada cuando alguien está escribiendo la contraseña.

No olvides agregar los recursos de tipo cadena correspondientes a los campos de texto en el archivo strings.xml.

Configura un recurso vectorial

Los recursos vectoriales te permiten configurar imágenes con un solo gráfico vectorial. Agreguemos recursos vectoriales para los campos de texto de nombre de usuario y contraseña. Ve a Dibujable > Nuevo > Recurso vectorial y elige una imagen prediseñada de persona para el campo de texto de nombre de usuario.

vector assetvector assetvector asset

Repite el mismo proceso y selecciona un candado para el campo de texto de contraseña.

Ahora se han creado dos archivos XML en la carpeta drawable (dibujable), y puedes usar el archivo dibujable con el atributo android:drawableStart, como se muestra a continuación.

La aplicación ahora debería verse así.

material loginmaterial loginmaterial login

A continuación agrega el botón Iniciar sesión. Usaremos el componente Button de Material Design, que viene con un efecto de ondulación de tinta integrado.

Por último, agrega el TextView de contraseña olvidada debajo del botón de inicio de sesión.

Fondo redondo

Creemos un fondo redondo para los elementos. Ve a Dibujable > Nuevo recurso dibujable y agrega lo siguiente.

Agrega el fondo a los campos de texto y al botón.

La aplicación final debería verse así:

material loginmaterial loginmaterial login

Conclusión

En este tutorial, has aprendido algunos fundamentos de Material Design y has descubierto cómo aplicar colores en este último para que se ajusten a tu marca. La clave para una aplicación hermosa en Material Design radica en unir diferentes elementos mientras sigues sus principios. Para obtener más información, consulta los siguientes artículos:

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.